@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
/* The theme's stylesheet initializes tailwindcss and imports the theme's default styles.

   The $ThemeStylesheet path is evaluated via a postcss resolver, which finds the theme's
   main stylesheet within the theme's gem.
   
   To control the order of the tailwindcss imports further, you can eject the theme's
   stylesheet locally using the following command, which will take precedence.
   > rake bullet_train:themes:light:eject_css

   Read more: https://bullettrain.co/docs/stylesheets
*/
/*
 * This is an extra level of indirection because for some reason using @tailwind directives directly inside this file doesn't work.
 * When we move to v4 we should be able to just to `@import "tailwindcss"` here.
 */
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: 'Geist Mono', ui-monospace, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder{
  color: #6b7280;
  opacity: 1;
}
input::placeholder,textarea::placeholder{
  color: #6b7280;
  opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}
::-webkit-date-and-time-value{
  min-height: 1.5em;
  text-align: inherit;
}
::-webkit-datetime-edit{
  display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
  padding-top: 0;
  padding-bottom: 0;
}
select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
select:where([multiple]),select:where([size]:not([size="1"])){
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}
input:where([type='checkbox']),input:where([type='radio']){
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}
input:where([type='checkbox']){
  border-radius: 0px;
}
input:where([type='radio']){
  border-radius: 100%;
}
input:where([type='checkbox']):focus,input:where([type='radio']):focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
input:where([type='checkbox']):checked,input:where([type='radio']):checked{
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
input:where([type='checkbox']):checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  input:where([type='checkbox']):checked{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
input:where([type='radio']):checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  input:where([type='radio']):checked{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus{
  border-color: transparent;
  background-color: currentColor;
}
input:where([type='checkbox']):indeterminate{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  input:where([type='checkbox']):indeterminate{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus{
  border-color: transparent;
  background-color: currentColor;
}
input:where([type='file']){
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}
input:where([type='file']):focus{
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.form-input,.form-textarea,.form-select,.form-multiselect{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
.form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
.form-select:where([size]:not([size="1"])){
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}
.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.prose-sm{
  font-size: 0.875rem;
  line-height: 1.7142857;
}
.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}
.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}
.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}
.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}
.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}
.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}
.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}
.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}
.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
}
.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.9em;
}
.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
}
.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}
.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4285714em;
}
.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4285714em;
}
.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}
.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.1428571em;
}
.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}
.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}
.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}
.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}
.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.5;
}
.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}
.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
a{
  color: var(--secondary-500);
}
a:hover{
  color: var(--secondary-600);
  text-decoration-line: underline;
}
b, strong{
  font-weight: 500;
}
.buttons > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.button{
  background-color: var(--primary-500);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.booking-step-indicator.button { color: #fff; }
.button:hover{
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.button:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}
.button:where(.dark, .dark *){
  --tw-ring-offset-color: #334155;
}
.button.button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.button.button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.button.button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.button-secondary{
  color: var(--secondary-500);
}
.button-secondary:hover{
  color: var(--secondary-600);
  text-decoration-line: underline;
}
/* @apply dark:text-base-200; */
.button-secondary.button-increase-contrast{
  color: var(--secondary-700);
}
.button-secondary.button-increase-contrast:hover{
  color: var(--secondary-900);
}
.button-secondary.button-red{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red.button-increase-contrast{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.button-secondary.button-red.button-increase-contrast:hover{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.button, .button-secondary, .button-alternative{
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.button.button-smaller, .button-secondary.button-smaller, .button-alternative.button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
.button-alternative{
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.button-alternative:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}
.button-alternative:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.button-alternative:hover:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.button-color{
  background-color: var(--primary-500);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.booking-step-indicator.button-color { color: #fff; }
.button-color:hover{
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.button-color:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}
.button-color:where(.dark, .dark *){
  --tw-ring-offset-color: #334155;
}
.button-color.button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.button-color.button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.button-color.button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.button-color{
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.button-color.button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
form.button_to input[type=submit].button-color{
  background-color: var(--primary-500);
}
form.button_to input[type=submit].button-color:hover{
  background-color: var(--primary-600);
}
.equipment-item-actions .button-color {
  font-size: var(--text-sm);
}
.button-color {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.button-color:hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.button-color.button-red {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
.button-color.button-red:hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
a.button-color:not(.button-secondary):not(.button-alternative),
button.button-color:not(.button-secondary):not(.button-alternative) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a.button-color:not(.button-secondary):not(.button-alternative):hover,
button.button-color:not(.button-secondary):not(.button-alternative):hover {
  background-color: var(--accent-strong, var(--accent));
}
.button-color{
  border-radius: 9999px;
}
.btn-toggle input[type=checkbox], .btn-toggle input[type=radio] {
      display: none;
    }
.btn-toggle input[type=checkbox]:checked + button, .btn-toggle input[type=radio]:checked + button{
  background-color: var(--primary-500);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.booking-step-indicator.btn-toggle input[type=checkbox]:checked + button,.booking-step-indicator .btn-toggle input[type=radio]:checked + button { color: #fff; }
.btn-toggle input[type=checkbox]:checked + button:hover, .btn-toggle input[type=radio]:checked + button:hover{
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.btn-toggle input[type=checkbox]:checked + button:focus, .btn-toggle input[type=radio]:checked + button:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}
.btn-toggle input[type=checkbox]:checked + button:where(.dark, .dark *), .btn-toggle input[type=radio]:checked + button:where(.dark, .dark *){
  --tw-ring-offset-color: #334155;
}
.btn-toggle input[type=checkbox]:checked + button.button-red, .btn-toggle input[type=radio]:checked + button.button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.btn-toggle input[type=checkbox]:checked + button.button-red:hover, .btn-toggle input[type=radio]:checked + button.button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.btn-toggle input[type=checkbox]:checked + button.button-red:focus, .btn-toggle input[type=radio]:checked + button.button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.btn-toggle input[type=checkbox]:checked + button, .btn-toggle input[type=radio]:checked + button{
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.btn-toggle input[type=checkbox]:checked + button.button-smaller, .btn-toggle input[type=radio]:checked + button.button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
form.button_to input[type=submit].btn-toggle input[type=checkbox]:checked + button,form.button_to input[type=submit] .btn-toggle input[type=radio]:checked + button{
  background-color: var(--primary-500);
}
form.button_to input[type=submit].btn-toggle input[type=checkbox]:checked + button:hover,form.button_to input[type=submit] .btn-toggle input[type=radio]:checked + button:hover{
  background-color: var(--primary-600);
}
.equipment-item-actions .btn-toggle input[type=checkbox]:checked + button,.equipment-item-actions  .btn-toggle input[type=radio]:checked + button {
  font-size: var(--text-sm);
}
.btn-toggle input[type=checkbox]:checked + button, .btn-toggle input[type=radio]:checked + button {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.btn-toggle input[type=checkbox]:checked + button:hover, .btn-toggle input[type=radio]:checked + button:hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn-toggle input[type=checkbox]:checked + button.button-red, .btn-toggle input[type=radio]:checked + button.button-red {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
.btn-toggle input[type=checkbox]:checked + button.button-red:hover, .btn-toggle input[type=radio]:checked + button.button-red:hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
a.btn-toggle input[type=checkbox]:checked + button:not(.button-secondary):not(.button-alternative),
button.btn-toggle input[type=checkbox]:checked + button:not(.button-secondary):not(.button-alternative),a .btn-toggle input[type=radio]:checked + button:not(.button-secondary):not(.button-alternative),
button .btn-toggle input[type=radio]:checked + button:not(.button-secondary):not(.button-alternative) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a.btn-toggle input[type=checkbox]:checked + button:not(.button-secondary):not(.button-alternative):hover,
button.btn-toggle input[type=checkbox]:checked + button:not(.button-secondary):not(.button-alternative):hover,a .btn-toggle input[type=radio]:checked + button:not(.button-secondary):not(.button-alternative):hover,
button .btn-toggle input[type=radio]:checked + button:not(.button-secondary):not(.button-alternative):hover {
  background-color: var(--accent-strong, var(--accent));
}
.btn-toggle.btn-color-picker input[type=checkbox]:checked + button, .btn-toggle.btn-color-picker input[type=radio]:checked + button{
  border-radius: 9999px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}
.full{
  display: flex;
  width: 100%;
  justify-content: center;
}
form.\!form > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.form > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.\!form .form-wrapper > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.form .form-wrapper > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.\!form .form-wrapper[disabled] {
        opacity: 0.3 !important;
        position: relative !important;
        -webkit-user-select: none !important;
           -moz-user-select: none !important;
                user-select: none !important;
      }
form.form .form-wrapper[disabled] {
        opacity: 0.3;
        position: relative;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
form.\!form .form-wrapper[disabled]:before {
          content: "" !important;
          position: absolute !important;
          background-color: transparent !important;
          top: 0 !important;
          bottom: 0 !important;
          left: 0 !important;
          right: 0 !important;
        }
form.form .form-wrapper[disabled]:before {
          content: "";
          position: absolute;
          background-color: transparent;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
/*
    This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
    because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
    no extra element is injected into the form.
    */
form.\!form[method="post" i], form.\!form[method="patch" i]{
  margin-top: -1.25rem;
}
form.form[method="post" i], form.form[method="patch" i]{
  margin-top: -1.25rem;
}
form.\!form[method="post" i], form.\!form[method="patch" i]{
  margin-top: -1.25rem;
}
form.\!form .buttons{
  padding-top: 0.25rem;
}
form.\!form .buttons > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
form.form .buttons{
  padding-top: 0.25rem;
}
form.form .buttons > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.table{
  width: 100%;
}
.table > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(15 23 42 / 0.05);
}
.table{
  text-align: left;
}
.table:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(51 65 85 / 0.05);
}
.table th{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--text-2xs);
  line-height: 0.9rem;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}
.table th:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.table th:first-child{
  padding-left: 1.25rem;
}
.table th:last-child{
  padding-right: 1.25rem;
}
.table tbody > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(15 23 42 / 0.05);
}
.table tbody:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(51 65 85 / 0.05);
}
.table td{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.table td:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.table td:first-child{
  padding-left: 1.25rem;
}
.table td:last-child{
  padding-right: 1.25rem;
}
.table td.buttons{
  padding-right: 0.75rem;
}
.table td.buttons > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.table td.buttons{
  text-align: right;
}
/* just having a cell with buttons shouldn't expand the height of a table row. */
.table td.buttons > *{
  margin-top: -1.25rem;
  margin-bottom: -1.25rem;
}
.box-table .table th:first-child, .box-table .table td:first-child{
  padding-left: 2rem;
}
.box-table .table th:last-child, .box-table .table td:last-child{
  padding-right: 2rem;
}
.pagy{
  display: flex;
}
.pagy > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.pagy a:not(.gap){
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pagy a:not(.gap).button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
.pagy a:not(.gap){
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pagy a:not(.gap):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}
.pagy a:not(.gap):where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pagy a:not(.gap):hover:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.pagy a:not(.gap) {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
}
.pagy a:not(.gap):hover {
  color: var(--text-primary);
  background: var(--surface-alt);
  border-color: var(--border);
}
.btn-toggle:has(input:checked) .pagy a:not(.gap) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-toggle:has(input:checked) .pagy a:not(.gap):hover {
  background-color: var(--accent-strong, var(--accent));
}
a.button:not(.button-secondary):not(.pagy a:not(.gap)),
button.button:not(.button-secondary):not(.pagy a:not(.gap)) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a.button:not(.button-secondary):not(.pagy a:not(.gap)):hover,
button.button:not(.button-secondary):not(.pagy a:not(.gap)):hover {
  background-color: var(--accent-strong, var(--accent));
}
.pagy a:not(.gap):not([href]) { /* disabled links (aka: the current page) */ background-color: var(--primary-500); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
.booking-step-indicator.pagy a:not(.gap):not([href]) { color: #fff; }
.pagy a:not(.gap):not([href]):hover{
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
.pagy a:not(.gap):not([href]):focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}
.pagy a:not(.gap):not([href]):where(.dark, .dark *){
  --tw-ring-offset-color: #334155;
}
.pagy a:not(.gap):not([href]).button-red{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.pagy a:not(.gap):not([href]).button-red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.pagy a:not(.gap):not([href]).button-red:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.pagy a:not(.gap):not([href]){
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pagy a:not(.gap):not([href]).button-smaller{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
form.button_to input[type=submit].pagy a:not(.gap):not([href]){
  background-color: var(--primary-500);
}
form.button_to input[type=submit].pagy a:not(.gap):not([href]):hover{
  background-color: var(--primary-600);
}
.equipment-item-actions .pagy a:not(.gap):not([href]) {
  font-size: var(--text-sm);
}
.pagy a:not(.gap):not([href]) {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.pagy a:not(.gap):not([href]):hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.pagy a:not(.gap):not([href]).button-red {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
.pagy a:not(.gap):not([href]).button-red:hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
a.pagy a:not(.gap):not([href]):not(.button-secondary):not(.button-alternative),
button.pagy a:not(.gap):not([href]):not(.button-secondary):not(.button-alternative) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a.pagy a:not(.gap):not([href]):not(.button-secondary):not(.button-alternative):hover,
button.pagy a:not(.gap):not([href]):not(.button-secondary):not(.button-alternative):hover {
  background-color: var(--accent-strong, var(--accent));
}
.pagy a:not(.gap):not([href]):not([aria-current]){ /* the prev link when on first page, next link when on last page */ display: none;
        }
.diveos-sidebar__owner-menu.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
.pkb-guided-foot .diveos-button.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
.diver-cards.pagy a:not(.gap):not([href]):not([aria-current]) {
  display: none;
}
.engine-body .bw-modal-overlay.pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].pagy a:not(.gap):not([href]):not([aria-current]) { display: none; }
/* Fix Safari issue related to <summary> / <details> arrow */
details > summary.list-none::-webkit-details-marker,
  details > summary.list-none::marker {
    display: none;
  }
.sortable-active-dropzone{
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.sortable-active-dropzone:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.sortable-active-item{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 1;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.sortable-active-item > *{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 1;
}
.sortable-active-item:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.sortable-active-item > *:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.sortable-drop-target{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: #6b7280;
  --tw-shadow: var(--tw-shadow-colored);
}
.sortable-drop-target > *{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  opacity: 0;
}
.sortable-drop-target:hover{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.sortable-drop-target:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
  --tw-shadow-color: #000;
  --tw-shadow: var(--tw-shadow-colored);
}
.sortable-drop-target > *:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bulk-action-unavailable{
  display: none !important;
}
.diveos-sidebar__owner-menu.bulk-action-unavailable { display: none !important; }
.pkb-guided-foot .diveos-button.bulk-action-unavailable { display: none !important; }
.diver-cards.bulk-action-unavailable {
  display: none !important;
}
.engine-body .bw-modal-overlay.bulk-action-unavailable { display: none !important; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].bulk-action-unavailable { display: none !important; }
.bulk-actions-selectable-item-checkbox-wrapper{
  display: none;
}
.diveos-sidebar__owner-menu.bulk-actions-selectable-item-checkbox-wrapper { display: none; }
.pkb-guided-foot .diveos-button.bulk-actions-selectable-item-checkbox-wrapper { display: none; }
.st-cover:has(.st-cover__img:not(.bulk-actions-selectable-item-checkbox-wrapper)) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
.st-cover:has(.st-cover__img:not(.bulk-actions-selectable-item-checkbox-wrapper)):hover { border-color: var(--hairline); background: transparent; }
.st-cover:has(.st-cover__img:not(.bulk-actions-selectable-item-checkbox-wrapper)) .st-cover__img { display: block; }
.st-cover:has(.st-cover__img:not(.bulk-actions-selectable-item-checkbox-wrapper)) .st-cover-edit {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: var(--text-xs); font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.diver-cards.bulk-actions-selectable-item-checkbox-wrapper {
  display: none;
}
.engine-body .bw-modal-overlay.bulk-actions-selectable-item-checkbox-wrapper { display: none; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].bulk-actions-selectable-item-checkbox-wrapper { display: none; }
.bulk-actions .bulk-actions-checkbox-cell{
  width: 1rem;
  padding-right: 0px;
}
.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle{
  display: none;
}
.diveos-sidebar__owner-menu.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle { display: none; }
.pkb-guided-foot .diveos-button.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle { display: none; }
.st-cover:has(.st-cover__img:not(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle)) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
.st-cover:has(.st-cover__img:not(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle)):hover { border-color: var(--hairline); background: transparent; }
.st-cover:has(.st-cover__img:not(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle)) .st-cover__img { display: block; }
.st-cover:has(.st-cover__img:not(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle)) .st-cover-edit {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: var(--text-xs); font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.diver-cards.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle {
  display: none;
}
.engine-body .bw-modal-overlay.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle { display: none; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle { display: none; }
.bulk-actions:not(.selectable) td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2){
  padding-left: 1.25rem;
}
.bulk-actions:not(.selectable) .box-table td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2){
  padding-left: 2rem;
}
.bulk-actions.selectable-available:not(.selectable) .bulk-action{
  display: none;
}
.diveos-sidebar__owner-menu.bulk-actions.selectable-available:not(.selectable) .bulk-action { display: none; }
.pkb-guided-foot .diveos-button.bulk-actions.selectable-available:not(.selectable) .bulk-action { display: none; }
.diver-cards.bulk-actions.selectable-available:not(.selectable) .bulk-action {
  display: none;
}
.engine-body .bw-modal-overlay.bulk-actions.selectable-available:not(.selectable) .bulk-action { display: none; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].bulk-actions.selectable-available:not(.selectable) .bulk-action { display: none; }
.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell{
  display: none;
}
.diveos-sidebar__owner-menu.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell { display: none; }
.pkb-guided-foot .diveos-button.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell { display: none; }
.st-cover:has(.st-cover__img:not(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell)) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
.st-cover:has(.st-cover__img:not(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell)):hover { border-color: var(--hairline); background: transparent; }
.st-cover:has(.st-cover__img:not(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell)) .st-cover__img { display: block; }
.st-cover:has(.st-cover__img:not(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell)) .st-cover-edit {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: var(--text-xs); font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.diver-cards.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell {
  display: none;
}
.engine-body .bw-modal-overlay.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell { display: none; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell { display: none; }
.bulk-actions.selectable .bulk-action-single{
  display: none;
}
.diveos-sidebar__owner-menu.bulk-actions.selectable .bulk-action-single { display: none; }
.pkb-guided-foot .diveos-button.bulk-actions.selectable .bulk-action-single { display: none; }
.diver-cards.bulk-actions.selectable .bulk-action-single {
  display: none;
}
.engine-body .bw-modal-overlay.bulk-actions.selectable .bulk-action-single { display: none; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].bulk-actions.selectable .bulk-action-single { display: none; }
.date-input .single-daterange{
  border-radius: 0.375rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.date-input .single-daterange:focus{
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}
@media (min-width: 768px){
  .date-input .single-daterange{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect{
  border-radius: 0.375rem;
  font-weight: 300;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus{
  --tw-ring-color: var(--primary-500);
}
.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect{
  --tw-border-opacity: 1 !important;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus{
  border-color: var(--primary-500) !important;
}
.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
      -moz-text-align-last: center;
           text-align-last: center;
    }
.daterangepicker .calendar-table .active{
  background-color: var(--primary-500) !important;
}
.daterangepicker .calendar-table .\!active{
  background-color: var(--primary-500) !important;
}
.select2-container{
  width: 100%;
}
.select2-border{
  border-color: var(--primary-500) !important;
    box-shadow: inset 0 0 0 1px var(--primary-500) !important;
    outline: 0 !important;
}
.select2-selection--single,
  .select2-selection--multiple {
    height: 38px !important;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    border-radius: 0.375rem !important;
    padding-top: 0px !important;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }
.select2-selection--single:focus, .select2-selection--multiple:focus{
  --tw-ring-color: var(--primary-500) !important;
}
.select2-selection--single.focus-visible, .select2-selection--multiple.focus-visible{
  border-color: var(--primary-500) !important;
    box-shadow: inset 0 0 0 1px var(--primary-500) !important;
    outline: 0 !important;
}
.select2-selection--single:focus, .select2-selection--multiple:focus {
      outline: 0 !important;
    }
.select2-selection--single .select2-selection__arrow, .select2-selection--multiple .select2-selection__arrow {
      height: 34px !important;
    }
.select2-selection--single .select2-selection__rendered, .select2-selection--multiple .select2-selection__rendered{
  padding-left: 0.75rem !important;
  --tw-text-opacity: 1 !important;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1)) !important;
      line-height: 35px !important;
}
.select2-selection--multiple .select2-selection__choice {
    margin-top: 6px !important;
    line-height: 22px !important;
  }
.select2-container--open .select2-selection--single, .select2-container--open .select2-selection--multiple, .select2-container--focus .select2-selection--single, .select2-container--focus .select2-selection--multiple{
  border-color: var(--primary-500) !important;
    box-shadow: inset 0 0 0 1px var(--primary-500) !important;
    outline: 0 !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single,
  .select2-container--default.select2-container--disabled .select2-selection--multiple{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.select2-container--default.select2-container--disabled .select2-selection--single:hover,
  .select2-container--default.select2-container--disabled .select2-selection--multiple:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.select2-container--default.select2-container--disabled .select2-selection--single:where(.dark, .dark *),
  .select2-container--default.select2-container--disabled .select2-selection--multiple:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.select2-container--default.select2-container--disabled .select2-selection--single:where(.dark, .dark *):hover,
  .select2-container--default.select2-container--disabled .select2-selection--multiple:where(.dark, .dark *):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.select2-container .select2-dropdown{
  overflow: hidden !important;
  border-width: 2px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)) !important;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.booking-step-indicator.select2-container .select2-dropdown {
  background-color: var(--surface-alt) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: none !important;
}
.select2-container .select2-dropdown{
  border-color: var(--primary-500) !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
  background-color: var(--primary-500) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.booking-step-indicator.select2-container--default .select2-results__option[aria-selected=true] { color: #fff !important; }
.select2-search__field{
  border-radius: 0.375rem;
  --tw-border-opacity: 1 !important;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)) !important;
}
.select2-search__field:focus{
  border-color: var(--primary-500) !important;
  --tw-ring-color: var(--primary-500) !important;
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-top-0{
  top: -0px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-4{
  bottom: 1rem;
}
.bottom-52{
  bottom: 13rem;
}
.bottom-full{
  bottom: 100%;
}
.left-0{
  left: 0px;
}
.left-10{
  left: 2.5rem;
}
.left-2\.5{
  left: 0.625rem;
}
.left-3{
  left: 0.75rem;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-0\.5{
  right: 0.125rem;
}
.right-1{
  right: 0.25rem;
}
.right-10{
  right: 2.5rem;
}
.right-2{
  right: 0.5rem;
}
.top-0{
  top: 0px;
}
.top-1{
  top: 0.25rem;
}
.top-1\/2{
  top: 50%;
}
.top-2{
  top: 0.5rem;
}
.top-full{
  top: 100%;
}
.z-0{
  z-index: 0;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.order-1{
  order: 1;
}
.order-2{
  order: 2;
}
.order-3{
  order: 3;
}
.col-span-1{
  grid-column: span 1 / span 1;
}
.col-span-12{
  grid-column: span 12 / span 12;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.col-span-3{
  grid-column: span 3 / span 3;
}
.col-span-4{
  grid-column: span 4 / span 4;
}
.col-span-5{
  grid-column: span 5 / span 5;
}
.col-span-7{
  grid-column: span 7 / span 7;
}
.float-right{
  float: right;
}
.-m-2{
  margin: -0.5rem;
}
.m-0{
  margin: 0px;
}
.m-2{
  margin: 0.5rem;
}
.m-4{
  margin: 1rem;
}
.m-5{
  margin: 1.25rem;
}
.m-auto{
  margin: auto;
}
.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-12{
  margin-left: 3rem;
  margin-right: 3rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-12{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.-mb-1{
  margin-bottom: -0.25rem;
}
.-mb-1\.5{
  margin-bottom: -0.375rem;
}
.-mb-5{
  margin-bottom: -1.25rem;
}
.-ml-1{
  margin-left: -0.25rem;
}
.-ml-10{
  margin-left: -2.5rem;
}
.-ml-5{
  margin-left: -1.25rem;
}
.-mr-2{
  margin-right: -0.5rem;
}
.-mt-0\.5{
  margin-top: -0.125rem;
}
.-mt-1{
  margin-top: -0.25rem;
}
.-mt-10{
  margin-top: -2.5rem;
}
.-mt-2{
  margin-top: -0.5rem;
}
.-mt-3{
  margin-top: -0.75rem;
}
.-mt-4{
  margin-top: -1rem;
}
.-mt-5{
  margin-top: -1.25rem;
}
.-mt-7{
  margin-top: -1.75rem;
}
.-mt-px{
  margin-top: -1px;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-14{
  margin-bottom: 3.5rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-2\.5{
  margin-bottom: 0.625rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-7{
  margin-bottom: 1.75rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.me-1{
  margin-inline-end: 0.25rem;
}
.ml-0{
  margin-left: 0px;
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-10{
  margin-left: 2.5rem;
}
.ml-12{
  margin-left: 3rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-2\.5{
  margin-left: 0.625rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-5{
  margin-left: 1.25rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-0{
  margin-right: 0px;
}
.mr-0\.5{
  margin-right: 0.125rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.mr-10{
  margin-right: 2.5rem;
}
.mr-12{
  margin-right: 3rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mr-auto{
  margin-right: auto;
}
.ms-1{
  margin-inline-start: 0.25rem;
}
.ms-2{
  margin-inline-start: 0.5rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-2\.5{
  margin-top: 0.625rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-8{
  margin-top: 2rem;
}
.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.size-1\.5{
  width: 0.375rem;
  height: 0.375rem;
}
.size-10{
  width: 2.5rem;
  height: 2.5rem;
}
.size-2\.5{
  width: 0.625rem;
  height: 0.625rem;
}
.size-3{
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5{
  width: 0.875rem;
  height: 0.875rem;
}
.size-4{
  width: 1rem;
  height: 1rem;
}
.size-5{
  width: 1.25rem;
  height: 1.25rem;
}
.size-7{
  width: 1.75rem;
  height: 1.75rem;
}
.size-8{
  width: 2rem;
  height: 2rem;
}
.size-9{
  width: 2.25rem;
  height: 2.25rem;
}
.h-0\.5{
  height: 0.125rem;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-12{
  height: 3rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-28{
  height: 7rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-72{
  height: 18rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[78vh\]{
  height: 78vh;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.max-h-12{
  max-height: 3rem;
}
.max-h-16{
  max-height: 4rem;
}
.max-h-20{
  max-height: 5rem;
}
.max-h-24{
  max-height: 6rem;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-72{
  max-height: 18rem;
}
.max-h-80{
  max-height: 20rem;
}
.max-h-\[100px\]{
  max-height: 100px;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-\[calc\(100vh-200px\)\]{
  max-height: calc(100vh - 200px);
}
.max-h-full{
  max-height: 100%;
}
.min-h-0{
  min-height: 0px;
}
.min-h-11{
  min-height: 2.75rem;
}
.min-h-32{
  min-height: 8rem;
}
.min-h-8{
  min-height: 2rem;
}
.min-h-9{
  min-height: 2.25rem;
}
.min-h-\[120px\]{
  min-height: 120px;
}
.min-h-\[44px\]{
  min-height: 44px;
}
.min-h-full{
  min-height: 100%;
}
.min-h-screen{
  min-height: 100vh;
}
.w-0{
  width: 0px;
}
.w-1\.5{
  width: 0.375rem;
}
.w-1\/2{
  width: 50%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-1\/5{
  width: 20%;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-3\/4{
  width: 75%;
}
.w-32{
  width: 8rem;
}
.w-4{
  width: 1rem;
}
.w-4\/5{
  width: 80%;
}
.w-44{
  width: 11rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: 1.25rem;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-60{
  width: 15rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: 2rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[110px\]{
  width: 110px;
}
.w-\[120px\]{
  width: 120px;
}
.w-\[130px\]{
  width: 130px;
}
.w-\[140px\]{
  width: 140px;
}
.w-\[150px\]{
  width: 150px;
}
.w-\[160px\]{
  width: 160px;
}
.w-\[240px\]{
  width: 240px;
}
.w-\[300px\]{
  width: 300px;
}
.w-\[570px\]{
  width: 570px;
}
.w-\[80px\]{
  width: 80px;
}
.w-\[88px\]{
  width: 88px;
}
.w-\[\2026\]{
  width: …;
}
.w-auto{
  width: auto;
}
.w-full{
  width: 100%;
}
.w-max{
  width: -moz-max-content;
  width: max-content;
}
.min-w-0{
  min-width: 0px;
}
.min-w-11{
  min-width: 2.75rem;
}
.min-w-48{
  min-width: 12rem;
}
.min-w-72{
  min-width: 18rem;
}
.min-w-9{
  min-width: 2.25rem;
}
.min-w-\[180px\]{
  min-width: 180px;
}
.min-w-\[18px\]{
  min-width: 18px;
}
.min-w-\[240px\]{
  min-width: 240px;
}
.min-w-\[280px\]{
  min-width: 280px;
}
.min-w-\[60px\]{
  min-width: 60px;
}
.min-w-\[72px\]{
  min-width: 72px;
}
.min-w-full{
  min-width: 100%;
}
.min-w-max{
  min-width: -moz-max-content;
  min-width: max-content;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-72{
  max-width: 18rem;
}
.max-w-\[1140px\]{
  max-width: 1140px;
}
.max-w-\[1280px\]{
  max-width: 1280px;
}
.max-w-\[160px\]{
  max-width: 160px;
}
.max-w-\[180px\]{
  max-width: 180px;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[280px\]{
  max-width: 280px;
}
.max-w-\[420px\]{
  max-width: 420px;
}
.max-w-\[860px\]{
  max-width: 860px;
}
.max-w-\[880px\]{
  max-width: 880px;
}
.max-w-\[960px\]{
  max-width: 960px;
}
.max-w-\[9rem\]{
  max-width: 9rem;
}
.max-w-\[calc\(100vw-1\.5rem\)\]{
  max-width: calc(100vw - 1.5rem);
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-auto{
  flex: 1 1 auto;
}
.flex-initial{
  flex: 0 1 auto;
}
.flex-none{
  flex: none;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.grow{
  flex-grow: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.-translate-x-20{
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full{
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[18px\]{
  --tw-translate-x: 18px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-5{
  --tw-translate-y: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-90{
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-none{
  transform: none;
}
@keyframes pulse{
  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-grab{
  cursor: grab;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all{
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.columns-\[var\(--column-width\2c _15ch\)_3\]{
  -moz-columns: var(--column-width, 15ch) 3;
       columns: var(--column-width, 15ch) 3;
}
.auto-rows-fr{
  grid-auto-rows: minmax(0, 1fr);
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1\.2fr_1fr_1fr_auto\]{
  grid-template-columns: 1.2fr 1fr 1fr auto;
}
.grid-cols-\[100px_1fr_140px_140px\]{
  grid-template-columns: 100px 1fr 140px 140px;
}
.grid-cols-\[1fr_1fr_120px_44px\]{
  grid-template-columns: 1fr 1fr 120px 44px;
}
.grid-cols-\[1fr_1fr_120px_88px\]{
  grid-template-columns: 1fr 1fr 120px 88px;
}
.grid-cols-\[2fr_1fr_1fr_auto\]{
  grid-template-columns: 2fr 1fr 1fr auto;
}
.grid-cols-\[88px_1fr_auto_120px\]{
  grid-template-columns: 88px 1fr auto 120px;
}
.grid-cols-\[auto_1fr\]{
  grid-template-columns: auto 1fr;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.flex-wrap{
  flex-wrap: wrap;
}
.place-content-center{
  place-content: center;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-20{
  gap: 5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-px{
  gap: 1px;
}
.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-1\.5{
  row-gap: 0.375rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.gap-y-4{
  row-gap: 1rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-7 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]){
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
}
.divide-dashed > :not([hidden]) ~ :not([hidden]){
  border-style: dashed;
}
.divide-base-900\/5 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(15 23 42 / 0.05);
}
.divide-hairline > :not([hidden]) ~ :not([hidden]){
  border-color: var(--hairline, #E5E7EB);
}
.divide-hairline-2 > :not([hidden]) ~ :not([hidden]){
  border-color: var(--hairline-2, #F0F1F4);
}
.self-start{
  align-self: flex-start;
}
.justify-self-end{
  justify-self: end;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-visible{
  overflow: visible;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-y-scroll{
  overflow-y: scroll;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.text-wrap{
  text-wrap: wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-btn{
  border-radius: 6px;
}
.rounded-card{
  border-radius: 10px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-bl-lg{
  border-bottom-left-radius: 0.5rem;
}
.rounded-bl-none{
  border-bottom-left-radius: 0px;
}
.rounded-br-lg{
  border-bottom-right-radius: 0.5rem;
}
.rounded-br-none{
  border-bottom-right-radius: 0px;
}
.rounded-tl-lg{
  border-top-left-radius: 0.5rem;
}
.rounded-tr-lg{
  border-top-right-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-\[1\.5px\]{
  border-width: 1.5px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-2{
  border-right-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-t-4{
  border-top-width: 4px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-none{
  border-style: none;
}
.\!border-hairline{
  border-color: var(--hairline, #E5E7EB) !important;
}
.border-accent{
  border-color: var(--accent, #0369A1);
}
.border-accent-border{
  border-color: var(--accent-border, rgba(3,105,161,0.26));
}
.border-accent-strong{
  border-color: var(--accent-strong, #075985);
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-base-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-base-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-base-400{
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.border-base-900{
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-700{
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.border-briefing-border{
  border-color: var(--briefing-border, #FCD34D);
}
.border-cancelled-border{
  border-color: var(--cancelled-border, #FECDD3);
}
.border-confirmed-border{
  border-color: var(--confirmed-border, #BBF7D0);
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-800{
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.border-hairline{
  border-color: var(--hairline, #E5E7EB);
}
.border-hairline-2{
  border-color: var(--hairline-2, #F0F1F4);
}
.border-hairline-strong{
  border-color: var(--hairline-strong, #D1D5DB);
}
.border-indigo-300{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-pending-border{
  border-color: var(--pending-border, #D6D3D1);
}
.border-primary-300{
  border-color: var(--primary-300);
}
.border-primary-500{
  border-color: var(--primary-500);
}
.border-primary-600{
  border-color: var(--primary-600);
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-slate-100{
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/40{
  border-color: rgb(255 255 255 / 0.4);
}
.border-l-accent{
  border-left-color: var(--accent, #0369A1);
}
.border-l-briefing{
  border-left-color: var(--briefing, #92400E);
}
.border-l-cancelled{
  border-left-color: var(--cancelled, #9F1239);
}
.border-l-confirmed{
  border-left-color: var(--confirmed, #15803D);
}
.border-l-hairline-strong{
  border-left-color: var(--hairline-strong, #D1D5DB);
}
.border-l-primary-500{
  border-left-color: var(--primary-500);
}
.bg-\[color\:--code-editor-background\]{
  background-color: var(--code-editor-background);
}
.bg-\[var\(--accent-light\)\]{
  background-color: var(--accent-light);
}
.bg-accent{
  background-color: var(--accent, #0369A1);
}
.bg-accent-light{
  background-color: var(--accent-light, #E0F2FE);
}
.bg-accent-soft{
  background-color: var(--accent-soft, rgba(3,105,161,0.08));
}
.bg-accent-strong{
  background-color: var(--accent-strong, #075985);
}
.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-300{
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.bg-base-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-base-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-base-300{
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-base-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-base-800{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-300{
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-700{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.bg-briefing{
  background-color: var(--briefing, #92400E);
}
.bg-briefing-bg{
  background-color: var(--briefing-bg, #FFFBEB);
}
.bg-cancelled{
  background-color: var(--cancelled, #9F1239);
}
.bg-cancelled-bg{
  background-color: var(--cancelled-bg, #FFF1F2);
}
.bg-canvas{
  background-color: var(--canvas, #F9FAFB);
}
.bg-confirmed{
  background-color: var(--confirmed, #15803D);
}
.bg-confirmed-bg{
  background-color: var(--confirmed-bg, #F0FDF4);
}
.bg-current{
  background-color: currentColor;
}
.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-300{
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-hairline{
  background-color: var(--hairline, #E5E7EB);
}
.bg-hairline-strong{
  background-color: var(--hairline-strong, #D1D5DB);
}
.bg-ink{
  background-color: var(--ink, #111827);
}
.bg-inwater-bg{
  background-color: var(--inwater-bg, #F0F9FF);
}
.bg-pending-bg{
  background-color: var(--pending-bg, #F5F5F4);
}
.bg-primary-200{
  background-color: var(--primary-200);
}
.bg-primary-400{
  background-color: var(--primary-400);
}
.bg-primary-500{
  background-color: var(--primary-500);
}
.bg-primary-600{
  background-color: var(--primary-600);
}
.bg-primary-700{
  background-color: var(--primary-700);
}
.bg-primary-900{
  background-color: var(--primary-900);
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-rose-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-300{
  --tw-bg-opacity: 1;
  background-color: rgb(253 164 175 / var(--tw-bg-opacity, 1));
}
.bg-sky-300{
  --tw-bg-opacity: 1;
  background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/60{
  background-color: rgb(15 23 42 / 0.6);
}
.bg-stone-300{
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
}
.bg-surface{
  background-color: var(--surface, #FFFFFF);
}
.bg-surface-alt{
  background-color: var(--surface-alt, #F3F4F6);
}
.bg-transparent{
  background-color: transparent;
}
.bg-viz-5{
  background-color: var(--viz-5, #38BDF8);
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-accent{
  --tw-gradient-from: var(--accent, #0369A1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-500{
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-700{
  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-900{
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary-200{
  --tw-gradient-from: var(--secondary-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white{
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-accent-strong{
  --tw-gradient-to: var(--accent-strong, #075985) var(--tw-gradient-to-position);
}
.to-primary-400{
  --tw-gradient-to: var(--primary-400) var(--tw-gradient-to-position);
}
.to-primary-600{
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}
.to-primary-800{
  --tw-gradient-to: var(--primary-800) var(--tw-gradient-to-position);
}
.fill-current{
  fill: currentColor;
}
.stroke-current{
  stroke: currentColor;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-3\.5{
  padding: 0.875rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.p-9{
  padding: 2.25rem;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-14{
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7{
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[18px\]{
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-\[22px\]{
  padding-top: 22px;
  padding-bottom: 22px;
}
.pb-0\.5{
  padding-bottom: 0.125rem;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-1\.5{
  padding-bottom: 0.375rem;
}
.pb-10{
  padding-bottom: 2.5rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-3\.5{
  padding-bottom: 0.875rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-5{
  padding-bottom: 1.25rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-7{
  padding-bottom: 1.75rem;
}
.pb-\[max\(1\.25rem\2c env\(safe-area-inset-bottom\)\)\]{
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.pb-\[max\(1rem\2c env\(safe-area-inset-bottom\)\)\]{
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.pl-0{
  padding-left: 0px;
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-8{
  padding-left: 2rem;
}
.pl-9{
  padding-left: 2.25rem;
}
.pr-0{
  padding-right: 0px;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-20{
  padding-right: 5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-3\.5{
  padding-right: 0.875rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-5{
  padding-right: 1.25rem;
}
.pr-8{
  padding-right: 2rem;
}
.pt-0{
  padding-top: 0px;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.pt-10{
  padding-top: 2.5rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-2\.5{
  padding-top: 0.625rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-3\.5{
  padding-top: 0.875rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-7{
  padding-top: 1.75rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-start{
  text-align: start;
}
.text-end{
  text-align: end;
}
.align-middle{
  vertical-align: middle;
}
.align-text-bottom{
  vertical-align: text-bottom;
}
.align-\[-2px\]{
  vertical-align: -2px;
}
.font-mono{
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.font-sans{
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-2xs{
  font-size: var(--text-2xs);
  line-height: 0.9rem;
  letter-spacing: 1px;
}
.text-3xl{
  font-size: var(--text-3xl);
  line-height: 2.25rem;
}
.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13\.5px\]{
  font-size: 13.5px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: var(--text-xs);
}
.font-bold{
  font-weight: 700;
}
.font-extralight{
  font-weight: 200;
}
.font-light{
  font-weight: 300;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.capitalize{
  text-transform: capitalize;
}
.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);
}
.leading-4{
  line-height: 1rem;
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-none{
  line-height: 1;
}
.leading-normal{
  line-height: 1.5;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-accent{
  color: var(--accent, #0369A1);
}
.text-accent-strong{
  color: var(--accent-strong, #075985);
}
.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-base-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-base-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-base-50{
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}
.text-base-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-base-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-base-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-base-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-briefing{
  color: var(--briefing, #92400E);
}
.text-cancelled{
  color: var(--cancelled, #9F1239);
}
.text-confirmed{
  color: var(--confirmed, #15803D);
}
.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-hairline{
  color: var(--hairline, #E5E7EB);
}
.text-ink{
  color: var(--ink, #111827);
}
.text-inwater{
  color: var(--inwater, #075985);
}
.text-muted{
  color: var(--muted, #6B7280);
}
.text-muted-2{
  color: var(--muted-2, #9CA3AF);
}
.text-pending{
  color: var(--pending, #57534E);
}
.text-pink-600{
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-primary-400{
  color: var(--primary-400);
}
.text-primary-500{
  color: var(--primary-500);
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-900{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-700{
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-secondary-300{
  color: var(--secondary-300);
}
.text-secondary-500{
  color: var(--secondary-500);
}
.text-secondary-700{
  color: var(--secondary-700);
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-viz-ink{
  color: var(--viz-ink, #075985);
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.line-through{
  text-decoration-line: line-through;
}
.no-underline{
  text-decoration-line: none;
}
.decoration-hairline{
  text-decoration-color: var(--hairline, #E5E7EB);
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-muted-2::-moz-placeholder{
  color: var(--muted-2, #9CA3AF);
}
.placeholder-muted-2::placeholder{
  color: var(--muted-2, #9CA3AF);
}
.placeholder-red-500::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}
.placeholder-red-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}
.accent-accent{
  accent-color: var(--accent, #0369A1);
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-20{
  opacity: 0.2;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card{
  --tw-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 0 0 1px var(--hairline, #E5E7EB);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-base-900{
  --tw-shadow-color: #0f172a;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-500{
  --tw-shadow-color: #6b7280;
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.outline-1{
  outline-width: 1px;
}
.-outline-offset-1{
  outline-offset: -1px;
}
.outline-gray-300{
  outline-color: #d1d5db;
}
.outline-hairline-strong{
  outline-color: var(--hairline-strong, #D1D5DB);
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset{
  --tw-ring-inset: inset;
}
.ring-accent{
  --tw-ring-color: var(--accent, #0369A1);
}
.ring-accent-border{
  --tw-ring-color: var(--accent-border, rgba(3,105,161,0.26));
}
.ring-accent-soft{
  --tw-ring-color: var(--accent-soft, rgba(3,105,161,0.08));
}
.ring-blue-600{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}
.ring-cancelled{
  --tw-ring-color: var(--cancelled, #9F1239);
}
.ring-cancelled-border{
  --tw-ring-color: var(--cancelled-border, #FECDD3);
}
.ring-confirmed{
  --tw-ring-color: var(--confirmed, #15803D);
}
.ring-confirmed-border{
  --tw-ring-color: var(--confirmed-border, #BBF7D0);
}
.ring-hairline{
  --tw-ring-color: var(--hairline, #E5E7EB);
}
.ring-hairline-strong{
  --tw-ring-color: var(--hairline-strong, #D1D5DB);
}
.ring-primary-500{
  --tw-ring-color: var(--primary-500);
}
.ring-purple-400{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity, 1));
}
.ring-sky-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(186 230 253 / var(--tw-ring-opacity, 1));
}
.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-opacity-40{
  --tw-ring-opacity: 0.4;
}
.ring-offset-1{
  --tw-ring-offset-width: 1px;
}
.ring-offset-2{
  --tw-ring-offset-width: 2px;
}
.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);
}
.grayscale{
  --tw-grayscale: grayscale(100%);
  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);
}
.invert{
  --tw-invert: invert(100%);
  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-blur-sm{
  --tw-backdrop-blur: blur(4px);
  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{
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000{
  transition-duration: 1000ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear{
  transition-timing-function: linear;
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.background-fade-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    z-index: -1;
  }
.background-fade:before {
      content: "";
      position: absolute;
      z-index: 1;
      background-color: var(--primary-200);
      background-image: linear-gradient(to right, var(--tw-gradient-stops));
      --tw-gradient-from: #fff var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.background-fade{

    position: absolute;
    top: 0px;
    transform: translate(-360px, 0px) rotate(-45deg);
    z-index: -1;
    background-color: var(--primary-400);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.medium-fade:before {
      right: -40px;
      top: -200px;
      width: 1000px;
      height: 600px;
    }
.medium-fade{

    right: -800px;
    width: 800px;
    height: 600px;
}
.large-fade:before {
      right: -0px;
      top: -200px;
      width: 1500px;
      height: 800px;
    }
.large-fade{

    right: -700px;
    width: 1000px;
    height: 800px;
}
.pricing-table-shadow {
    box-shadow: 0 2px 30px 0 rgba(54,88,206,0.2);
  }
.pricing-page-background {
    background-image: linear-gradient(to bottom, #f8faff, #fff);
  }
.brand-title {
    color: #047bf8;
    font-size: 2.99rem;
    margin: 30px 0px;
    margin-top: 10px;
    position: relative;
    letter-spacing: -0.025em;
    line-height: 120%;
    font-weight: 700;
  }
.brand-description {
    color: #868686;
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 200;
  }
.text-light-gradient {
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-fill-color: rgba(0,0,0,0);
    background-attachment: scroll;
    background-clip: text;
    background-color: rgba(0,0,0,0);
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.reveal {
    transition-property: opacity, transform;
    --tw-translate-y: 1.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)}
.reveal-from-left{
  --tw-translate-y: 0px;
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.reveal.in{
  transform: none;
  opacity: 1;
  transition-duration: 1000ms;
}
.space-y > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-x > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.gap-y{
  row-gap: 1.25rem;
}
.gap-x{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
[hidden] {
    display: none !important;
  }
/**
     * Custom components
     **/
/* Color picker */
.dark .pcr-app{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark .pcr-app .pcr-interaction .pcr-result{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark .pcr-app .pcr-interaction .pcr-result:focus {
          box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 3px var(--primary-500);
        }
/* Date range picker */
.dark .daterangepicker{
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark .daterangepicker::before {
        border-bottom-color: #0f172a;
      }
.dark .daterangepicker::after {
        border-bottom-color: #1e293b;
      }
.dark .daterangepicker .calendar-table{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* navigation arrows */
.dark .daterangepicker .calendar-table .available span{
  border-color: var(--primary-500);
}
/* Clear and Apply buttons wrapper */
.dark .daterangepicker .drp-buttons {
        border-top-color: #0f172a;
        --tw-text-opacity: 1;
        color: rgb(203 213 225 / var(--tw-text-opacity, 1));
      }
.dark .daterangepicker th.available:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.dark .daterangepicker td.off{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.dark .daterangepicker td.off { color: #fff; }
.dark .daterangepicker td.available:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.dark .daterangepicker .hourselect, .dark .daterangepicker .minuteselect, .dark .daterangepicker .ampmselect{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1)) !important;
}
/* Phone field */
.dark .iti__country-list{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
/* Select2 */
.dark .select2-container .select2-selection__rendered{
  --tw-text-opacity: 1 !important;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1)) !important;
}
.dark .select2-container .select2-dropdown{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark .select2-container .select2-search__field{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.dark .select2-container .select2-selection--multiple, .dark .select2-container .select2-selection--single{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.dark .select2-container .select2-selection--multiple:focus, .dark .select2-container .select2-selection--single:focus{
  --tw-ring-color: var(--primary-500) !important;
}
.dark .select2-container .select2-selection--multiple, .dark .select2-container .select2-selection--single{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* For the selected options in the multiple select2 component */
.dark .select2-container .select2-selection__choice{
  border-color: var(--primary-500) !important;
  background-color: var(--primary-500) !important;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.dark .select2-container .select2-selection__choice { color: #fff; }
.dark .select2-container .select2-selection__choice .select2-selection__choice__remove{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.dark .select2-container .select2-selection__choice .select2-selection__choice__remove { color: #fff; }
.dark .select2-container .select2-selection__choice .select2-selection__choice__remove:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.dark .select2-container .select2-selection__choice .select2-selection__choice__remove:hover { color: #fff; }
.dark .select2-container .select2-results__option{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Trix Editor */
.dark trix-editor{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.dark trix-editor:focus, .dark trix-editor:active{
  border-color: var(--primary-500) !important;
}
.dark trix-toolbar{
  opacity: 0.5 !important;
}
.dark trix-toolbar.visible{
  opacity: 1 !important;
}
.dark trix-toolbar.\!visible{
  opacity: 1 !important;
}
.dark trix-toolbar .trix-button-group, .dark trix-toolbar .trix-button{
  --tw-border-opacity: 1 !important;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)) !important;
}
.dark trix-toolbar .trix-button:disabled::before{
  opacity: 0.25;
}
.dark trix-toolbar .trix-dialog{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  --tw-shadow-color: #0f172a !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}
.dark trix-toolbar .trix-dialog .trix-button--dialog{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.dark trix-toolbar .trix-dialog .trix-button--dialog { color: #fff; }
.dark trix-toolbar .trix-dialog .trix-input--dialog{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark trix-toolbar .trix-dialog .trix-input--dialog:focus{
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}
.dark trix-toolbar .trix-dialog .trix-input--dialog:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark .tribute-container ul{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.dark .trix-dialogs{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.dark .trix-content a[href^="bullettrain://"]{
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.dark .trix-content a[href^="bullettrain://"] { color: #fff; }
/* CKEditor */
.dark .ck {
      --ck-color-base-background: #1e293b;
      --ck-color-base-border: #0f172a;
      --ck-color-toolbar-background: #1e293b;
      --ck-color-toolbar-border: #0f172a;
      --ck-color-text: #cbd5e1;
    }
.dark .ck .ck-editor__editable:not(.ck-editor__nested-editable){
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark .ck .ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.\[--code-editor-background\:theme\(\'colors\.base\.50\'\)\]{
  --code-editor-background: #f8fafc;
}
/* 
 * Refer to the stimulus-scroll-reveal documentation for details.
 * https://www.stimulus-components.com/docs/stimulus-scroll-reveal/
 */
:root, .theme-blue {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  --secondary-50: #eff6ff;
  --secondary-100: #dbeafe;
  --secondary-200: #bfdbfe;
  --secondary-300: #93c5fd;
  --secondary-400: #60a5fa;
  --secondary-500: #3b82f6;
  --secondary-600: #2563eb;
  --secondary-700: #1d4ed8;
  --secondary-800: #1e40af;
  --secondary-900: #1e3a8a;
}
.theme-slate {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;

  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}
.theme-gray {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;

  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}
.theme-zinc {
  --primary-50: #fafafa;
  --primary-100: #f4f4f5;
  --primary-200: #e4e4e7;
  --primary-300: #d4d4d8;
  --primary-400: #a1a1aa;
  --primary-500: #71717a;
  --primary-600: #52525b;
  --primary-700: #3f3f46;
  --primary-800: #27272a;
  --primary-900: #18181b;

  --secondary-50: #fafafa;
  --secondary-100: #f4f4f5;
  --secondary-200: #e4e4e7;
  --secondary-300: #d4d4d8;
  --secondary-400: #a1a1aa;
  --secondary-500: #71717a;
  --secondary-600: #52525b;
  --secondary-700: #3f3f46;
  --secondary-800: #27272a;
  --secondary-900: #18181b;
}
.theme-neutral {
  --primary-50: #fafafa;
  --primary-100: #f5f5f5;
  --primary-200: #e5e5e5;
  --primary-300: #d4d4d4;
  --primary-400: #a3a3a3;
  --primary-500: #737373;
  --primary-600: #525252;
  --primary-700: #404040;
  --primary-800: #262626;
  --primary-900: #171717;

  --secondary-50: #fafafa;
  --secondary-100: #f5f5f5;
  --secondary-200: #e5e5e5;
  --secondary-300: #d4d4d4;
  --secondary-400: #a3a3a3;
  --secondary-500: #737373;
  --secondary-600: #525252;
  --secondary-700: #404040;
  --secondary-800: #262626;
  --secondary-900: #171717;
}
.theme-stone {
  --primary-50: #fafaf9;
  --primary-100: #f5f5f4;
  --primary-200: #e7e5e4;
  --primary-300: #d6d3d1;
  --primary-400: #a8a29e;
  --primary-500: #78716c;
  --primary-600: #57534e;
  --primary-700: #44403c;
  --primary-800: #292524;
  --primary-900: #1c1917;

  --secondary-50: #fafaf9;
  --secondary-100: #f5f5f4;
  --secondary-200: #e7e5e4;
  --secondary-300: #d6d3d1;
  --secondary-400: #a8a29e;
  --secondary-500: #78716c;
  --secondary-600: #57534e;
  --secondary-700: #44403c;
  --secondary-800: #292524;
  --secondary-900: #1c1917;
}
.theme-red {
  --primary-50: #fef2f2;
  --primary-100: #fee2e2;
  --primary-200: #fecaca;
  --primary-300: #fca5a5;
  --primary-400: #f87171;
  --primary-500: #ef4444;
  --primary-600: #dc2626;
  --primary-700: #b91c1c;
  --primary-800: #991b1b;
  --primary-900: #7f1d1d;

  --secondary-50: #fef2f2;
  --secondary-100: #fee2e2;
  --secondary-200: #fecaca;
  --secondary-300: #fca5a5;
  --secondary-400: #f87171;
  --secondary-500: #ef4444;
  --secondary-600: #dc2626;
  --secondary-700: #b91c1c;
  --secondary-800: #991b1b;
  --secondary-900: #7f1d1d;
}
.theme-orange {
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;

  --secondary-50: #fff7ed;
  --secondary-100: #ffedd5;
  --secondary-200: #fed7aa;
  --secondary-300: #fdba74;
  --secondary-400: #fb923c;
  --secondary-500: #f97316;
  --secondary-600: #ea580c;
  --secondary-700: #c2410c;
  --secondary-800: #9a3412;
  --secondary-900: #7c2d12;
}
.theme-amber {
  --primary-50: #fffbeb;
  --primary-100: #fef3c7;
  --primary-200: #fde68a;
  --primary-300: #fcd34d;
  --primary-400: #fbbf24;
  --primary-500: #f59e0b;
  --primary-600: #d97706;
  --primary-700: #b45309;
  --primary-800: #92400e;
  --primary-900: #78350f;

  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: #f59e0b;
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;
}
.theme-yellow {
  --primary-50: #fefce8;
  --primary-100: #fef9c3;
  --primary-200: #fef08a;
  --primary-300: #fde047;
  --primary-400: #facc15;
  --primary-500: #eab308;
  --primary-600: #ca8a04;
  --primary-700: #a16207;
  --primary-800: #854d0e;
  --primary-900: #713f12;

  --secondary-50: #fefce8;
  --secondary-100: #fef9c3;
  --secondary-200: #fef08a;
  --secondary-300: #fde047;
  --secondary-400: #facc15;
  --secondary-500: #eab308;
  --secondary-600: #ca8a04;
  --secondary-700: #a16207;
  --secondary-800: #854d0e;
  --secondary-900: #713f12;
}
.theme-lime {
  --primary-50: #f7fee7;
  --primary-100: #ecfccb;
  --primary-200: #d9f99d;
  --primary-300: #bef264;
  --primary-400: #a3e635;
  --primary-500: #84cc16;
  --primary-600: #65a30d;
  --primary-700: #4d7c0f;
  --primary-800: #3f6212;
  --primary-900: #365314;

  --secondary-50: #f7fee7;
  --secondary-100: #ecfccb;
  --secondary-200: #d9f99d;
  --secondary-300: #bef264;
  --secondary-400: #a3e635;
  --secondary-500: #84cc16;
  --secondary-600: #65a30d;
  --secondary-700: #4d7c0f;
  --secondary-800: #3f6212;
  --secondary-900: #365314;
}
.theme-green {
  --primary-50: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-200: #bbf7d0;
  --primary-300: #86efac;
  --primary-400: #4ade80;
  --primary-500: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
  --primary-800: #166534;
  --primary-900: #14532d;

  --secondary-50: #f0fdf4;
  --secondary-100: #dcfce7;
  --secondary-200: #bbf7d0;
  --secondary-300: #86efac;
  --secondary-400: #4ade80;
  --secondary-500: #22c55e;
  --secondary-600: #16a34a;
  --secondary-700: #15803d;
  --secondary-800: #166534;
  --secondary-900: #14532d;
}
.theme-emerald {
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #064e3b;

  --secondary-50: #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
}
.theme-teal {
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-400: #2dd4bf;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary-900: #134e4a;

  --secondary-50: #f0fdfa;
  --secondary-100: #ccfbf1;
  --secondary-200: #99f6e4;
  --secondary-300: #5eead4;
  --secondary-400: #2dd4bf;
  --secondary-500: #14b8a6;
  --secondary-600: #0d9488;
  --secondary-700: #0f766e;
  --secondary-800: #115e59;
  --secondary-900: #134e4a;
}
.theme-cyan {
  --primary-50: #ecfeff;
  --primary-100: #cffafe;
  --primary-200: #a5f3fc;
  --primary-300: #67e8f9;
  --primary-400: #22d3ee;
  --primary-500: #06b6d4;
  --primary-600: #0891b2;
  --primary-700: #0e7490;
  --primary-800: #155e75;
  --primary-900: #164e63;

  --secondary-50: #ecfeff;
  --secondary-100: #cffafe;
  --secondary-200: #a5f3fc;
  --secondary-300: #67e8f9;
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2;
  --secondary-700: #0e7490;
  --secondary-800: #155e75;
  --secondary-900: #164e63;
}
.theme-sky {
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  --secondary-50: #f0f9ff;
  --secondary-100: #e0f2fe;
  --secondary-200: #bae6fd;
  --secondary-300: #7dd3fc;
  --secondary-400: #38bdf8;
  --secondary-500: #0ea5e9;
  --secondary-600: #0284c7;
  --secondary-700: #0369a1;
  --secondary-800: #075985;
  --secondary-900: #0c4a6e;
}
.theme-indigo {
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
}
.theme-violet {
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;

  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
}
.theme-purple {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7e22ce;
  --primary-800: #6b21a8;
  --primary-900: #581c87;

  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7e22ce;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;
}
.theme-fuchsia {
  --primary-50: #fdf4ff;
  --primary-100: #fae8ff;
  --primary-200: #f5d0fe;
  --primary-300: #f0abfc;
  --primary-400: #e879f9;
  --primary-500: #d946ef;
  --primary-600: #c026d3;
  --primary-700: #a21caf;
  --primary-800: #86198f;
  --primary-900: #701a75;

  --secondary-50: #fdf4ff;
  --secondary-100: #fae8ff;
  --secondary-200: #f5d0fe;
  --secondary-300: #f0abfc;
  --secondary-400: #e879f9;
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  --secondary-700: #a21caf;
  --secondary-800: #86198f;
  --secondary-900: #701a75;
}
.theme-pink {
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --primary-200: #fbcfe8;
  --primary-300: #f9a8d4;
  --primary-400: #f472b6;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;
  --primary-800: #9d174d;
  --primary-900: #831843;

  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;
}
.theme-rose {
  --primary-50: #fff1f2;
  --primary-100: #ffe4e6;
  --primary-200: #fecdd3;
  --primary-300: #fda4af;
  --primary-400: #fb7185;
  --primary-500: #f43f5e;
  --primary-600: #e11d48;
  --primary-700: #be123c;
  --primary-800: #9f1239;
  --primary-900: #881337;

  --secondary-50: #fff1f2;
  --secondary-100: #ffe4e6;
  --secondary-200: #fecdd3;
  --secondary-300: #fda4af;
  --secondary-400: #fb7185;
  --secondary-500: #f43f5e;
  --secondary-600: #e11d48;
  --secondary-700: #be123c;
  --secondary-800: #9f1239;
  --secondary-900: #881337;
}
.theme-secondary-blue {
  --secondary-50: #eff6ff;
  --secondary-100: #dbeafe;
  --secondary-200: #bfdbfe;
  --secondary-300: #93c5fd;
  --secondary-400: #60a5fa;
  --secondary-500: #3b82f6;
  --secondary-600: #2563eb;
  --secondary-700: #1d4ed8;
  --secondary-800: #1e40af;
  --secondary-900: #1e3a8a;
}
.theme-secondary-slate {
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}
.theme-secondary-gray {
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}
.theme-secondary-zinc {
  --secondary-50: #fafafa;
  --secondary-100: #f4f4f5;
  --secondary-200: #e4e4e7;
  --secondary-300: #d4d4d8;
  --secondary-400: #a1a1aa;
  --secondary-500: #71717a;
  --secondary-600: #52525b;
  --secondary-700: #3f3f46;
  --secondary-800: #27272a;
  --secondary-900: #18181b;
}
.theme-secondary-neutral {
  --secondary-50: #fafafa;
  --secondary-100: #f5f5f5;
  --secondary-200: #e5e5e5;
  --secondary-300: #d4d4d4;
  --secondary-400: #a3a3a3;
  --secondary-500: #737373;
  --secondary-600: #525252;
  --secondary-700: #404040;
  --secondary-800: #262626;
  --secondary-900: #171717;
}
.theme-secondary-stone {
  --secondary-50: #fafaf9;
  --secondary-100: #f5f5f4;
  --secondary-200: #e7e5e4;
  --secondary-300: #d6d3d1;
  --secondary-400: #a8a29e;
  --secondary-500: #78716c;
  --secondary-600: #57534e;
  --secondary-700: #44403c;
  --secondary-800: #292524;
  --secondary-900: #1c1917;
}
.theme-secondary-red {
  --secondary-50: #fef2f2;
  --secondary-100: #fee2e2;
  --secondary-200: #fecaca;
  --secondary-300: #fca5a5;
  --secondary-400: #f87171;
  --secondary-500: #ef4444;
  --secondary-600: #dc2626;
  --secondary-700: #b91c1c;
  --secondary-800: #991b1b;
  --secondary-900: #7f1d1d;
}
.theme-secondary-orange {
  --secondary-50: #fff7ed;
  --secondary-100: #ffedd5;
  --secondary-200: #fed7aa;
  --secondary-300: #fdba74;
  --secondary-400: #fb923c;
  --secondary-500: #f97316;
  --secondary-600: #ea580c;
  --secondary-700: #c2410c;
  --secondary-800: #9a3412;
  --secondary-900: #7c2d12;
}
.theme-secondary-amber {
  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: #f59e0b;
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;
}
.theme-secondary-yellow {
  --secondary-50: #fefce8;
  --secondary-100: #fef9c3;
  --secondary-200: #fef08a;
  --secondary-300: #fde047;
  --secondary-400: #facc15;
  --secondary-500: #eab308;
  --secondary-600: #ca8a04;
  --secondary-700: #a16207;
  --secondary-800: #854d0e;
  --secondary-900: #713f12;
}
.theme-secondary-lime {
  --secondary-50: #f7fee7;
  --secondary-100: #ecfccb;
  --secondary-200: #d9f99d;
  --secondary-300: #bef264;
  --secondary-400: #a3e635;
  --secondary-500: #84cc16;
  --secondary-600: #65a30d;
  --secondary-700: #4d7c0f;
  --secondary-800: #3f6212;
  --secondary-900: #365314;
}
.theme-secondary-green {
  --secondary-50: #f0fdf4;
  --secondary-100: #dcfce7;
  --secondary-200: #bbf7d0;
  --secondary-300: #86efac;
  --secondary-400: #4ade80;
  --secondary-500: #22c55e;
  --secondary-600: #16a34a;
  --secondary-700: #15803d;
  --secondary-800: #166534;
  --secondary-900: #14532d;
}
.theme-secondary-emerald {
  --secondary-50: #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
}
.theme-secondary-teal {
  --secondary-50: #f0fdfa;
  --secondary-100: #ccfbf1;
  --secondary-200: #99f6e4;
  --secondary-300: #5eead4;
  --secondary-400: #2dd4bf;
  --secondary-500: #14b8a6;
  --secondary-600: #0d9488;
  --secondary-700: #0f766e;
  --secondary-800: #115e59;
  --secondary-900: #134e4a;
}
.theme-secondary-cyan {
  --secondary-50: #ecfeff;
  --secondary-100: #cffafe;
  --secondary-200: #a5f3fc;
  --secondary-300: #67e8f9;
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2;
  --secondary-700: #0e7490;
  --secondary-800: #155e75;
  --secondary-900: #164e63;
}
.theme-secondary-sky {
  --secondary-50: #f0f9ff;
  --secondary-100: #e0f2fe;
  --secondary-200: #bae6fd;
  --secondary-300: #7dd3fc;
  --secondary-400: #38bdf8;
  --secondary-500: #0ea5e9;
  --secondary-600: #0284c7;
  --secondary-700: #0369a1;
  --secondary-800: #075985;
  --secondary-900: #0c4a6e;
}
.theme-secondary-indigo {
  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
}
.theme-secondary-violet {
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
}
.theme-secondary-purple {
  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7e22ce;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;
}
.theme-secondary-fuchsia {
  --secondary-50: #fdf4ff;
  --secondary-100: #fae8ff;
  --secondary-200: #f5d0fe;
  --secondary-300: #f0abfc;
  --secondary-400: #e879f9;
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  --secondary-700: #a21caf;
  --secondary-800: #86198f;
  --secondary-900: #701a75;
}
.theme-secondary-pink {
  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;
}
.theme-secondary-rose {
  --secondary-50: #fff1f2;
  --secondary-100: #ffe4e6;
  --secondary-200: #fecdd3;
  --secondary-300: #fda4af;
  --secondary-400: #fb7185;
  --secondary-500: #f43f5e;
  --secondary-600: #e11d48;
  --secondary-700: #be123c;
  --secondary-800: #9f1239;
  --secondary-900: #881337;
}
/* Import Electron utilities shared across all Tailwind-based themes. */
/* @import "../tailwind/electron.scss"; */
.electron a, .todesktop a {
    outline-color: var(--tw-ring-color);
    /* TODO: Will --tw-ring-opacity still be available in tailwindcss v4? */
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(3, 98, 198, var(--tw-ring-opacity));
  }
.electron .electron-mobile-only, .todesktop .electron-mobile-only{
  display: block;
}
.wz-adddate.electron .electron-mobile-only,.wz-adddate .todesktop .electron-mobile-only { display: block; }
.wz-adddate.electron .electron-mobile-only .wz-adddate-btn,.wz-adddate .todesktop .electron-mobile-only .wz-adddate-btn { width: 100%; justify-content: center; height: 42px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.wz-adddate.electron .electron-mobile-only .wz-menu,.wz-adddate .todesktop .electron-mobile-only .wz-menu { width: 100%; }
@media (min-width: 1024px){
  .electron .electron-mobile-only, .todesktop .electron-mobile-only{
    display: none;
  }
}
.electron .electron-title-bar, .todesktop .electron-title-bar {
    /* override `md:rounded-lg` */
    border-top-left-radius: 0;
  }
/* hide logo because it doesn't fit into the ui well. */
.electron .electron-title-bar img, .todesktop .electron-title-bar img { display: none; }
.electron .electron-title-bar, .todesktop .electron-title-bar{

    min-height: 36px;
}
.electron .main-container-padding, .todesktop .main-container-padding {
    padding: 0;
  }
.electron .main-container, .todesktop .main-container {
    /* override `md:rounded-lg` */
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    /* override `md:h-auto` */
    height: 100vh;
  }
/* hide profiler results because they don't fit into the ui well. */
.electron .profiler-results, .todesktop .profiler-results { display: none; }
/* touch up the padding of the breadcrumbs. */
.electron ol.breadcrumb, .todesktop ol.breadcrumb { padding-top: 3px; }
/*
 * This takes care of the window's contents shifting when the
 * scrollbar appears and disappears during the turn.css animation
 */
/* Chrome, Safari and Opera */
.devise_layout::-webkit-scrollbar {
  display: none;
}
/* Firefox and Edge */
.devise_layout {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cloudinary-field button.upload {
    margin: 0;
    border-radius: 4px;
    padding: 0;
    border: 2px solid #dde2ec;
    background: transparent;
    position: relative;
    min-height: 50px;
    min-width: 50px;
  }
.cloudinary-field button.upload:not(.present) {
      min-height: 100px;
      min-width: 100px;
    }
.cloudinary-field button.upload i {
      display: block;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      line-height: 50px;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      margin-top: -25px;
      top: 50%;
      left: 50%;
      font-size: 32px;
      color: #dde2ec;
    }
.cloudinary-field button.upload + button.clear {
      display: none;
      font-size: 32px;
      color: #dde2ec;
      background: transparent;
      border: 0;
      overflow: visible;
    }
.cloudinary-field button.upload + button.clear:focus i, .cloudinary-field button.upload + button.clear:active i {
          color: var(--primary-500);
        }
.cloudinary-field button.upload.present i {
        display: none;
      }
.cloudinary-field button.upload.present + button.clear {
        display: inline-block;
      }
.cloudinary-field button.upload:focus, .cloudinary-field button.upload:active {
      border-color: var(--primary-500);
    }
.cloudinary-field button.upload:focus i, .cloudinary-field button.upload:active i {
        color: var(--primary-500);
      }
input[type=tel] {
  line-height: 21px;
}
input[type=tel]::-moz-placeholder {
    color: #9ca3af;
  }
input[type=tel]::placeholder {
    color: #9ca3af;
  }
.select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple {
  min-height: 37px;
}
.select2-selection.select2-selection--single .select2-selection__rendered, .select2-selection.select2-selection--multiple .select2-selection__rendered {
    padding-left: 12px;
    min-height: 34px;
    line-height: 34px;
  }
.select2-selection.select2-selection--single .select2-selection__arrow, .select2-selection.select2-selection--multiple .select2-selection__arrow {
    padding-top: 35px;
  }
.select2-container .select2-search--inline .select2-search__field {
  font-weight: 300;
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.5rem;
}
@media (min-width: 768px){
  .select2-container .select2-search--inline .select2-search__field{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.select2 {
  display: block;
}
.select2 img {
    display: none;
  }
.select2-results img {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    margin-right: 8px;
  }
.select2-results__option--highlighted{
  background-color: var(--primary-400) !important;
}
.trix-content .attachment-gallery > action-text-attachment,
    .trix-content .attachment-gallery > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }
.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
      .trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
      .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
      .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
/* Override Tailwind's preflight styles */
/* https://github.com/tailwindlabs/tailwindcss/issues/989#issuecomment-506555308 */
.trix-content ul {
    list-style-type: disc;
  }
.trix-content ol {
    list-style-type: decimal;
  }
.trix-content action-text-attachment .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
/* don't show the editor tool bar unless the user is editing the field. */
/* see https://github.com/basecamp/trix/issues/343 and `app/assets/javascripts/account/fields.js` */
trix-toolbar {
  opacity: 0.15;
}
trix-toolbar.visible {
    opacity: 1;
  }
/* Override Tailwind's preflight styles */
/* https://github.com/tailwindlabs/tailwindcss/issues/989#issuecomment-506555308 */
.trix-button:where(.dark, .dark *){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
/* Prevent red ring on Trix Editor */
:-moz-focusring {
  outline-style: none;
}
a[href^="bullettrain://"], span.tribute-reference {
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 4px;
  margin: -1px 0;
  color: #3E4B5B;
  line-height: 17px;
  text-decoration: none;
  background-color: #ebe2ff;
  border: 1px solid #7147d2;
}
a[href^="bullettrain://users"], a[href^="bullettrain://teams"], span.tribute-users-reference, span.tribute-teams-reference {
  background-color: #e2ebff;
  border: 1px solid #4771d2;
}
.tribute-container ul {
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid var(--primary-500);
    background: white;
    list-style: none;
    padding: 0;
  }
.tribute-container ul:empty {
      display: none;
    }
.tribute-container ul li{
  display: flex;
  align-items: center;
}
.tribute-container ul li span {
        font-weight: normal;
      }
.tribute-container ul li.highlight {
        background-color: #5897fb;
        color: white;
      }
.tribute-container ul li{
      padding: 5px 10px;
}
.tribute-container ul li img {
        height: 30px;
        width: 30px;
        border-radius: 15px;
        margin-right: 5px;
      }
trix-editor [data-trix-cursor-target] {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  /* background-color: red; */
}
.trix-editor * {
    box-sizing: border-box;
  }
trix-editor {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  font-weight: 300;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
trix-editor:focus, trix-editor:active {
    border-color: var(--primary-500);
    box-shadow: inset 0 0 0 1px var(--primary-500);
  }
trix-editor[disabled]{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
trix-editor[disabled]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
trix-editor[disabled]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
trix-editor[disabled]:where(.dark, .dark *):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.trix-hide-toolbar trix-toolbar {
    display: none !important;
  }
.trix-content{
  font-size: 1rem;
  line-height: 1.5rem;
}
@media (min-width: 768px){
  .trix-content{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
/* The Trix Editor uses SVGs for its buttons, so we manually override them here for dark mode */
/* Icons taken from https://react-icons.github.io/react-icons/icons?name=md */
.dark .trix-button--icon-bold::before {
    background-image: url('data:image/svg+xml;utf-8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path></svg>') !important;
  }
.dark .trix-button--icon-italic::before {
    background-image: url('data:image/svg+xml;utf-8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path></svg>') !important;
  }
.dark .trix-button--icon-strike::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85-.29-.86-1.2-1.28-2.25-1.28-1.86 0-2.34 1.02-2.34 1.7 0 .48.25.88.74 1.21.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97 0 1-.81 1.67-2.28 1.67-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58.81 2.29 3.29 3.3 5.67 3.3 2.27 0 5.3-.89 5.3-4.05 0-.3-.01-1.16-.48-1.94H21V12z"></path></svg>') !important;
  }
.dark .trix-button--icon-link::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M8 11h8v2H8v-2zm12.1 1H22c0-2.76-2.24-5-5-5h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1zM3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3z"></path></svg>') !important;
  }
.dark .trix-button--icon-heading-1::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"></path></svg>') !important;
  }
.dark .trix-button--icon-quote::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"></path></svg>') !important;
  }
.dark .trix-button--icon-code::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></svg>') !important;
  }
.dark .trix-button--icon-bullet-list::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"></path></svg>') !important;
  }
.dark .trix-button--icon-number-list::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"></path></svg>') !important;
  }
.dark .trix-button--icon-decrease-nesting-level::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>') !important;
  }
.dark .trix-button--icon-increase-nesting-level::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>') !important;
  }
.dark .trix-button--icon-attach::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 015 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 005 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"></path></svg>') !important;
  }
.dark .trix-button--icon-undo::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path></svg>') !important;
  }
.dark .trix-button--icon-redo::before {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="%23FFFFFF" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16a8.002 8.002 0 017.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path></svg>') !important;
  }
.code-editor .monaco-editor, .code-editor .monaco-editor .overflow-guard {
    border-radius: inherit;
  }
.code-editor .monaco-editor, .code-editor .monaco-editor-background, .code-editor .monaco-editor .margin {
    background-color: var(--code-editor-background,transparent);
  }
.required > label::after{
  display: inline-block;
  padding-left: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  content: "*";
}
[data-turn-exit],
[data-turn-enter] {
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
  animation-fill-mode: forwards;
}
html.turn-exit [data-turn-exit] {
  animation-name: fade-out-up;
  animation-duration: .3s;
}
html.turn-enter [data-turn-enter] {
  animation-name: fade-in-up;
  animation-duration: .6s;
}
html.turn-before-exit [data-turn-exit],
html.turn-exit [data-turn-exit] {
  will-change: transform, opacity;
}
@keyframes fade-out-up {
  0% {
   opacity: 1;
   transform: translateZ(0)
  }

  100% {
   opacity: 0;
   transform: translate3d(0, -2rem, 0)
  }
}
@keyframes fade-in-up {
  0% {
   opacity: 0;
   transform: translate3d(0, 2rem, 0)
  }

  100% {
   opacity: 1;
   transform: translateZ(0)
  }
}
/*
 * A (possibly) temporary fix for a weird interaction between Turbo and turn.js
 * https://github.com/bullet-train-co/bullet_train/issues/2214#issuecomment-3349556410
 */
.turn-view-transitions.turn-transition [data-turn-enter],
.turn-view-transitions.turn-before-transition [data-turn-enter] {
  opacity: 0;
}
/*
 * This mostly prevents sudden side-to-side jumping due to the addition of a scrollbar during transition.
 */
html.turn-advance:has(body.devise_layout){
  overflow: hidden;
}
/*
 * This disables the view transitions that turn automatically injects just by being present.
 */
@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
    opacity: 1 !important;
  }
}
#bt-docs-content h1,
#bt-docs-content h2,
#bt-docs-content h3,
#bt-docs-content h4,
#bt-docs-content h5,
#bt-docs-content h6{
  position: relative;
  margin-left: -1.2rem;
  padding-left: 1.2rem;
}
#bt-docs-content h1 a,
#bt-docs-content h2 a,
#bt-docs-content h3 a,
#bt-docs-content h4 a,
#bt-docs-content h5 a,
#bt-docs-content h6 a{
  text-decoration: none;
  display: none;
  position: absolute;
  float:left;
  margin-left:-1.2rem;
  line-height: 1;
  width: 1rem;
  height: 100%;
}
#bt-docs-content h1 a::before,
#bt-docs-content h2 a::before,
#bt-docs-content h3 a::before,
#bt-docs-content h4 a::before,
#bt-docs-content h5 a::before,
#bt-docs-content h6 a::before{
  content: "🔗";
}
#bt-docs-content h1:hover a,
#bt-docs-content h2:hover a,
#bt-docs-content h3:hover a,
#bt-docs-content h4:hover a,
#bt-docs-content h5:hover a,
#bt-docs-content h6:hover a{
  display: flex;
  justify-content: center; /* Align horizontal */
  align-items: center; /* Align vertical */
}
@media only screen and (max-width: 640px) {
  #bt-docs-content h1,
  #bt-docs-content h2,
  #bt-docs-content h3,
  #bt-docs-content h4,
  #bt-docs-content h5,
  #bt-docs-content h6{
    margin-left: -1.375rem;
    padding-left: 1.375rem;
  }
  #bt-docs-content h1 a,
  #bt-docs-content h2 a,
  #bt-docs-content h3 a,
  #bt-docs-content h4 a,
  #bt-docs-content h5 a,
  #bt-docs-content h6 a{
    margin-left:-1.375rem;
  }
  #bt-docs-content h1 a::before,
  #bt-docs-content h2 a::before,
  #bt-docs-content h3 a::before,
  #bt-docs-content h4 a::before,
  #bt-docs-content h5 a::before,
  #bt-docs-content h6 a::before{
    font-size: 1rem;
  }
}
form.button_to{
  display: inline-block;
}
form.button_to input[type=submit]{
  background-color: transparent;
}
form.button_to input[type=submit].button{
  background-color: var(--primary-500);
}
form.button_to input[type=submit].button:hover{
  background-color: var(--primary-600);
}
/* hide the first breadcrumb chevron */
ol.breadcrumb li:first-child svg { display: none; }
/* Override Turbo's progress bar color with the application's theme. */
.turbo-progress-bar {
  height: 5px;
  background-color: var(--primary-500);
}
/*
  When dragging a sortable table row, only show the first column, usually containing the element's label.
  Can be customize on a per-table basis.
*/
tr.gu-mirror > *:not(:first-child) {
  display: none;
}
/* alias used to support ejecting the file to local */
/* ✅ YOUR APPLICATION'S CSS */
/* If you need to customize your application's CSS, this is the place to do it. This helps
   avoid merge conflicts in the future when Rails or Bullet Train update their own CSS.
*/
/* tokens.css must come first — defines ramps + semantic aliases consumed
   downstream. Per docs/archive/UI-MIGRATION-PLAN.md T1 + UI-ARCHITECTURE.md §5. */
/*
 * tokens.css — DiveOS design token ENTRY (v4 — repo spec: sky-700 + Inter)
 *
 * Two-layer token architecture (split 2026-07-11, os-ds extraction step 1):
 *   - tokens/primitives.css — product-INVARIANT raw scales (ramps, spacing,
 *     type, radius, shadow, z, motion, layout). Shared byte-for-byte across
 *     DiveOS / HotelOS; never referenced by components directly.
 *   - tokens/semantic.css   — the THEME surface: role mappings (neutrals,
 *     accent, status, input, notifications, interaction states) + fonts.
 *     The ~10% a product re-brands; components consume ONLY these.
 * A consuming product re-themes by overriding tokens/semantic.css alone.
 *
 * v4 migration (2026-06-06): aligned to the diveOS-design-system repo
 * (gitlab.nsfrg.my:novas/diveOS-design-system), the locked design source of
 * truth — body font Inter, accent sky-700 #0369A1, cool-gray neutrals,
 * ramp-based status tints, dark mode removed (light-only).
 *
 * Loaded via application.css before all other stylesheets. The token @imports
 * below are inlined by postcss-import at build time into one :root cascade;
 * order is cosmetic since every var() resolves at use-time.
 */
/*
 * tokens/primitives.css — PRODUCT-INVARIANT design primitives.
 *
 * The raw scales every product shares byte-for-byte: colour ramps, the
 * spacing / type / radius / shadow scales, z-index stack, motion timings,
 * and structural layout defaults. These are the SOURCE the semantic layer
 * (tokens/semantic.css) maps into roles — components NEVER reference a
 * primitive directly, only its semantic alias.
 *
 * When the design system is extracted into the shared os-ds gem, this file
 * ships once and is identical across DiveOS / HotelOS. A product re-themes by
 * overriding tokens/semantic.css, not this file (it may ADD a brand ramp here
 * — e.g. a --teal-* scale — then point --accent at it in its semantic layer).
 *
 * Loaded via tokens.css (the entry) before tokens/semantic.css. Ordering is
 * cosmetic: all vars land in one :root cascade and var() resolves at use-time.
 */
:root {
  /* ─── Foundation ramps (semantic source + showcase swatches) ─────── */
  --gray-50:  #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB;
  --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280;
  --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937;
  --gray-900: #111827; --gray-950: #030712;

  --sky-50:  #F0F9FF; --sky-100: #E0F2FE; --sky-200: #BAE6FD;
  --sky-300: #7DD3FC; --sky-400: #38BDF8; --sky-500: #0EA5E9;
  --sky-600: #0284C7; --sky-700: #0369A1; --sky-800: #075985;
  --sky-900: #0C4A6E; --sky-950: #082F49;

  --amber-50:  #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A;
  --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B;
  --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E;
  --amber-900: #78350F; --amber-950: #451A03;

  --green-50:  #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0;
  --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #22C55E;
  --green-600: #16A34A; --green-700: #15803D; --green-800: #166534;
  --green-900: #14532D; --green-950: #052E16;

  --red-50:  #FEF2F2; --red-100: #FEE2E2; --red-200: #FECACA;
  --red-300: #FCA5A5; --red-400: #F87171; --red-500: #EF4444;
  --red-600: #DC2626; --red-700: #B91C1C; --red-800: #991B1B;
  --red-900: #7F1D1D; --red-950: #450A0A;

  --slate-50:  #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0;
  --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B;
  --slate-900: #0F172A; --slate-950: #020617;

  --rose-50:  #FFF1F2; --rose-100: #FFE4E6; --rose-200: #FECDD3;
  --rose-300: #FDA4AF; --rose-400: #FB7185; --rose-500: #F43F5E;
  --rose-600: #E11D48; --rose-700: #BE123C; --rose-800: #9F1239;
  --rose-900: #881337; --rose-950: #4C0519;

  --stone-50:  #FAFAF9; --stone-100: #F5F5F4; --stone-200: #E7E5E4;
  --stone-300: #D6D3D1; --stone-400: #A8A29E; --stone-500: #78716C;
  --stone-600: #57534E; --stone-700: #44403C; --stone-800: #292524;
  --stone-900: #1C1917; --stone-950: #0C0A09;

  /* ─── Spacing scale — 8-point system (4px sub-grid) ──────────────────
     One unit = 4px. Use these for all component padding / gap / margin so
     primitives stay on the grid. Half-step (--space-0-5 = 2px) is reserved
     for hairline-level nudges only (icon optical alignment), not layout. */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ─── Type scale — even steps on the system (no odd/half sizes) ───────
     Component font-size MUST use these tokens, never a raw px. The old
     11/12.5/13/13.5/15px values snap to the nearest step. Bigger one-off
     display/hero sizes (>28) stay raw — they're not primitives. */
  --text-2xs:  10px;   /* micro labels, table th eyebrows */
  --text-xs:   12px;   /* eyebrows, sub-lines, meta, chips (← 11/11.5/12.5) */
  --text-sm:   14px;   /* body / primary cell / card heading (← 13/13.5/15) */
  --text-md:   16px;   /* prominent body, small headings (← 15.5/17) */
  --text-lg:   18px;   /* card/section headings (← 19) */
  --text-xl:   20px;   /* large headings (← 21/22) */
  --text-2xl:  24px;   /* (← 23/25/26) */
  --text-3xl:  28px;   /* page titles (← 27/30/31/32) */

  /* ─── Line-height scale — paired 1:1 with the type scale ──────────────
     Practical UI, Ch.5 (Typography): line-height is ABSOLUTE and lands on
     the 4pt vertical grid (so text aligns to the layout rhythm), the RATIO
     DECREASES as font-size grows (headings tighter than body), and body
     text stays ≥1.5 for readability. Each --leading-* is the leading for
     the same-suffix --text-*; a text role sets font-size AND its paired
     line-height, never a raw ratio. Book anchors: H3 24/32, H4 20/28,
     Small 16/24, Tiny 14/20. */
  --leading-2xs: 14px;   /* 10px · 1.40 — micro labels (single-line) */
  --leading-xs:  18px;   /* 12px · 1.50 — meta / small print */
  --leading-sm:  22px;   /* 14px · 1.57 — default body (≥1.5) */
  --leading-md:  24px;   /* 16px · 1.50 — body / small heading (book Small) */
  --leading-lg:  28px;   /* 18px · 1.56 — roomy body / card heading */
  --leading-xl:  28px;   /* 20px · 1.40 — heading (book H4 20/28) */
  --leading-2xl: 32px;   /* 24px · 1.33 — heading (book H3 24/32) */
  --leading-3xl: 36px;   /* 28px · 1.29 — page title (book H2/H3 pattern) */
  --leading-relaxed: 1.6; /* long-form prose paragraphs (unitless, opt-in) */

  /* ─── Border radius scale — small / medium / large intent ────────────
     Practical UI uses 3 radii (small/medium/large). Ours is finer for a
     dense UI, but maps to the same intent. --radius is the default; --radius-md
     is a back-compat alias of it (they were a duplicate 8px). */
  --radius-sm:   6px;             /* small — chips, inputs, tight controls */
  --radius:      8px;             /* medium (default) — buttons, cards */
  --radius-md:   var(--radius);   /* alias of the default (dedup: was 8px twice) */
  --radius-lg:   10px;            /* large — panels, popovers */
  --radius-xl:   14px;            /* x-large — hero / sheet surfaces */
  --radius-pill: 9999px;

  /* ─── Elevation — TWO tiers (Practical UI Ch.3: ~2 elevations is enough) ──
     `raised`  = anything lifted off the page (cards, menus, popovers, dropdowns).
     `overlay` = surfaces floating above the page (drawers, modals, toasts).
     These two are the only concrete shadow values; the legacy --shadow-* names
     below all derive from them (back-compat), so a component can keep its old
     token and still get the collapsed 2-tier system. The card "ring" is a
     structural hairline border, composited on top of `raised` — not a 3rd
     elevation. (Visual-reviewed before/after 2026-07-11.) */
  --elevation-raised:  0 1px 2px rgba(17, 24, 39, 0.06), 0 2px 6px -1px rgba(17, 24, 39, 0.05);
  --elevation-overlay: 0 16px 40px -12px rgba(17, 24, 39, 0.20), 0 6px 16px -8px rgba(17, 24, 39, 0.10);

  /* Legacy shadow names → the 2 tiers (was 5 distinct values). --shadow-sm is
     the exception: it's a control WHISPER (segmented options, toggle knobs,
     small pills), NOT a real elevation, so it keeps its subtle 1-layer value —
     folding it into --elevation-raised made those inline controls read too
     heavy. --shadow-md is the actual raised tier. */
  --shadow-sm:    0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md:    var(--elevation-raised);
  --shadow-card:  0 1px 2px rgba(17, 24, 39, 0.05), 0 0 0 1px var(--hairline);  /* raised + hairline ring */
  --shadow-hover: var(--elevation-raised), 0 0 0 1px var(--hairline);           /* card hover = raised + ring */
  --shadow-panel: var(--elevation-overlay);

  /* ─── Z-index stack ──────────────────────────────────────────────── */
  --z-toast:    60;
  --z-modal:    50;
  --z-panel:    40;
  --z-dropdown: 30;
  --z-tooltip:  20;

  /* ─── Material Symbols defaults (legacy) ─────────────────────────── */
  --ms-default-size: 20px;
  --ms-default-weight: 300;

  /* ─── Motion ─────────────────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  120ms;
  --t-med:   180ms;
  --t-slow:  240ms;

  /* ─── Layout primitives ─────────────────────────────────────────── */
  --sidebar-w: 240px;
  --panel-w:   520px;

  /* Page width tiers — the content column ceiling per archetype. The shell
     (.diveos-content) defaults to --page-wide; forms/wizards opt into --narrow
     via content_for(:page_width). Below the ceiling the fluid --gutter breathes;
     past it, margin-inline:auto converts surplus to symmetric side space.
     Two tiers only — reading pages stay wide and cap PROSE with --measure. */
  --page-wide:    1280px;   /* default: lists, kanban, calendar, dashboard, detail, settings */
  --page-narrow:  768px;    /* forms, wizards, focused reading */
  /* Measure (max line length) SCALES DOWN as text grows — Practical UI Ch.4/5:
     optimal line length shrinks at larger sizes (~90ch small body → ~45ch
     display). Apply via .dv-measure (default) / --lg / --display; never on
     tables or cards. */
  --measure:         68ch;  /* default: 14–16px body — the reading cap */
  --measure-lg:      56ch;  /* 18–20px lead paragraphs / large body */
  --measure-display: 45ch;  /* 24px+ display / hero copy that wraps */
  --gutter:       clamp(16px, 4cqi, 64px);  /* fluid side gutter (measured on the content pane) */
  --content-max:  var(--page-narrow);       /* legacy alias the wizard CSS consumes (was undefined) */
}
/*
 * tokens/semantic.css — the THEME surface (per-product override point).
 *
 * Maps the raw primitives (tokens/primitives.css) into named ROLES that
 * components consume: neutrals (canvas/surface/ink/…), the accent family,
 * status palette, input tokens, notification semantics, and interaction
 * states. This is the ~10% a product re-brands: swap the accent, the fonts,
 * or the status mapping here and every .dv-* component re-themes with no
 * component edits.
 *
 * In the shared os-ds gem this file ships as the DEFAULT (DiveOS: sky-700 /
 * Inter). A consuming app (HotelOS) overrides it with its own tokens/semantic.css
 * loaded after the gem's — same role names, different primitive targets.
 *
 * NOTE the dive-domain status names (briefing / inwater) live here: they are a
 * semantic/domain choice, so HotelOS replaces this block with its own statuses
 * rather than inheriting them.
 */
:root {
  /* ─── Typography — role fonts (a product may rebrand these) ────────────
     Single typeface for UI: Inter for BOTH display/headings and body
     (General Sans was dropped — headings + body are now one family).
     Geist Mono for tabular numerals, IDs, timestamps, financial figures.
     --font-display is kept as a distinct token (same value as --font-sans)
     so heading call-sites keep their semantic name and can diverge later
     without a sweep. */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* ─── Semantic neutrals (v4 — cool gray ramp aliases) ──────────────── */
  --canvas:           var(--gray-50);      /* page bg */
  --surface:          #FFFFFF;             /* cards, modals */
  --surface-alt:      var(--gray-100);     /* header zone, sidebar, subtle distinction */
  --hairline:         var(--gray-200);     /* default border */
  --hairline-2:       #F0F1F4;             /* inner row separator */
  --hairline-strong:  var(--gray-300);     /* active/focused border */
  --ink:              var(--gray-900);     /* body + headings */
  --muted:            var(--gray-500);     /* less prominent text */
  --muted-2:          #6A707A;             /* captions, meta — darkened from gray-400 to clear 4.5:1 (Practical UI Ch.3 contrast; was 2.5:1) */

  /* ─── Accent (v4 — sky-700, swappable per tenant) ─────────────────── */
  --accent:           var(--sky-700);
  --accent-strong:    var(--sky-800);
  --accent-soft:      rgba(3, 105, 161, 0.08);
  --accent-softer:    rgba(3, 105, 161, 0.04);
  --accent-border:    rgba(3, 105, 161, 0.26);
  --on-accent:        #FFFFFF;                 /* text/glyphs on an accent fill (buttons, markers, pills) */

  /* ─── v1/v2 compat aliases — back-compat for existing callsites ───── */
  --bg:               var(--canvas);
  --text-primary:     var(--ink);
  --text-secondary:   var(--gray-700);
  --text-muted:       var(--muted);
  --border:           var(--hairline);
  --border-strong:    var(--hairline-strong);
  --accent-tint:      var(--accent-soft);
  --accent-light:     var(--sky-100);       /* lit accent tint for current-step */

  /* ─── Sequential data-viz ramp (NOT status colors) ─────────────────
     Monochromatic sky ramp for functional 5-step sequential data
     visualisations (e.g. pricing-zone bands). Purple/violet is banned;
     use these for any light→intense sequential encoding. Text on any
     step: --viz-ink (sky-800 stays readable on sky-50..400). */
  --viz-1:   var(--sky-50);
  --viz-2:   var(--sky-100);
  --viz-3:   var(--sky-200);
  --viz-4:   var(--sky-300);
  --viz-5:   var(--sky-400);
  --viz-ink: var(--sky-800);

  --sidebar-bg:       var(--gray-100);
  --hover-warm:       var(--gray-100);      /* legacy name; now neutral gray hover */

  /* ─── Status palette — single source (v4 ramp-based soft tints) ─────
     Both legacy names (--status-*-fg / --status-*-bg) and v2 short names
     (--<status>, --<status>-bg, --<status>-border) resolve to the SAME
     ramp values so no chip can drift between aliases.
     5 repo statuses + 2 app-derived (returning=slate, completed=gray). */
  --status-pending-fg:    var(--stone-600);
  --status-pending-bg:    var(--stone-100);
  --status-pending-border:var(--stone-300);
  --pending:              var(--status-pending-fg);
  --pending-bg:           var(--status-pending-bg);
  --pending-border:       var(--status-pending-border);

  --status-confirmed-fg:  var(--green-700);
  --status-confirmed-bg:  var(--green-50);
  --status-confirmed-border: var(--green-200);
  --confirmed:            var(--status-confirmed-fg);
  --confirmed-bg:         var(--status-confirmed-bg);
  --confirmed-border:     var(--status-confirmed-border);

  --status-briefing-fg:   var(--amber-800);
  --status-briefing-bg:   var(--amber-50);
  --status-briefing-border: var(--amber-300);
  --briefing:             var(--status-briefing-fg);
  --briefing-bg:          var(--status-briefing-bg);
  --briefing-border:      var(--status-briefing-border);

  --status-in-water-fg:   var(--sky-800);
  --status-in-water-bg:   var(--sky-50);
  --status-in-water-border: var(--sky-200);
  --inwater:              var(--status-in-water-fg);
  --inwater-bg:           var(--status-in-water-bg);
  --inwater-border:       var(--status-in-water-border);

  --status-returning-fg:  var(--slate-600);
  --status-returning-bg:  var(--slate-100);
  --status-returning-border: var(--slate-300);

  --status-completed-fg:  var(--gray-500);
  --status-completed-bg:  var(--gray-100);
  --status-completed-border: var(--gray-300);

  --status-cancelled-fg:  var(--rose-800);
  --status-cancelled-bg:  var(--rose-50);
  --status-cancelled-border: var(--rose-200);
  --cancelled:            var(--status-cancelled-fg);
  --cancelled-bg:         var(--status-cancelled-bg);
  --cancelled-border:     var(--status-cancelled-border);

  /* ─── Bar / rail tints (peripheral indicators — lighter ramp steps) ── */
  --bar-confirmed:  var(--green-300);
  --bar-briefing:   var(--amber-300);
  --bar-inwater:    var(--sky-300);
  --bar-pending:    var(--stone-300);
  --bar-cancelled:  var(--rose-300);
  --bar-returning:  var(--slate-300);

  /* ─── Input tokens (v4 repo model) ─────────────────────────────────── */
  --input-bg:           var(--gray-50);
  --input-border:       var(--gray-300);
  --input-border-hover: var(--gray-400);
  --input-border-focus: rgba(3, 105, 161, 0.60);
  --input-placeholder:  rgba(107, 114, 128, 0.80);  /* darkened from 0.50 to clear ~3:1 supplementary-text bar (label always present) */
  --focus-ring:         rgba(3, 105, 161, 0.10);
  --error:              #C13028;

  /* ─── Notification semantics (toasts / inline alerts) ───────────────
     Generic success/danger/warning/info layer, distinct from the
     booking-status palette. Resolves to existing colour ramps. */
  --success:         var(--green-700);
  --success-bg:      var(--green-50);
  --success-border:  var(--green-200);

  --danger:          var(--rose-800);
  --danger-bg:       var(--rose-50);
  --danger-border:   var(--rose-200);

  --warning:         var(--amber-700);
  --warning-bg:      var(--amber-50);
  --warning-border:  var(--amber-200);

  --info:            var(--accent);
  --info-bg:         var(--sky-50);
  --info-border:     var(--sky-200);

  /* ─── Interaction states ─────────────────────────────────────────────
     Canonical state vocabulary every interactive primitive uses:
       hover    → neutral darken overlay (or accent-strong on filled)
       active   → stronger overlay / translateY(1px) press
       focus    → --shadow-focus keyboard ring (focus-visible only)
       selected → accent-soft fill + accent text
       disabled → --disabled-opacity, no pointer events
     See /admin/design_system "Interaction states" for the recipe. */
  --state-hover:    rgba(17, 24, 39, 0.04);
  --state-active:   rgba(17, 24, 39, 0.08);
  --state-selected: var(--accent-soft);
  --focus-ring-color: rgba(3, 105, 161, 0.35);
  --shadow-focus:   0 0 0 3px var(--focus-ring-color);
  --disabled-opacity: 0.5;
  --transition-base: var(--t-med) var(--ease-standard);
}
/* patterns.css — 11 shared composition components (Section label, KPI
   strip, Open row, Ledger row, Side panel, etc.). docs/archive/UI-MIGRATION-PLAN.md
   T3. Loaded after tokens.css so semantic vars resolve. */
/*
 * Bullet Train's base CSS applies a global `a:hover { text-decoration-
 * line: underline; color: secondary-600; }` to every anchor. That
 * overrides custom hover treatments because text-decoration-line is
 * different from text-decoration (the latter doesn't reset the former).
 * Reset hover behavior for the custom link classes used in patterns +
 * shell. They handle their own hover state via background-color +
 * color changes — no underline, no link recoloring.
 */
/* Reset BT's global a:hover (text-decoration-line: underline + color
   secondary-600) for our custom link components. Also reset base a
   color (BT sets a { color: var(--secondary-500) }) so descendant text
   inherits --text-primary instead of the link blue. Both rules need
   to be on the parent anchor — the children inherit from there. */
.diveos-sidebar__link,
.diveos-sidebar__owner,
.open-row__link,
.ledger-row__link,
.filter-pill,
.segmented__option,
.tabs__tab,
.settings-sub-nav__link,
.trip-row__link,
.setting-item--linked,
.header-zone__action-button,
.org-outlet-row,
.lead-card-clickable__link,
.run-reopen-row {
  color: inherit;
}
.diveos-sidebar__link:hover,
.diveos-sidebar__owner:hover,
.open-row__link:hover,
.ledger-row__link:hover,
.filter-pill:hover,
.segmented__option:hover,
.tabs__tab:hover,
.settings-sub-nav__link:hover,
.trip-row__link:hover,
.setting-item--linked:hover,
.header-zone__action-button:hover,
.org-outlet-row:hover,
.lead-card-clickable__link:hover,
.run-reopen-row:hover {
  text-decoration-line: none;
  color: inherit;
}
/* Hover background colors set explicitly elsewhere; preserve the
   defined hover states for backgrounds. */
.diveos-sidebar__link:hover { color: var(--text-primary); }
.diveos-sidebar__item--active .diveos-sidebar__link:hover { color: var(--accent-strong); }
.filter-pill:hover { color: var(--text-secondary); }
.filter-pill--active:hover { color: var(--accent-strong); }
.segmented__option:hover { color: var(--text-primary); }
.tabs__tab:hover { color: var(--text-primary); }
.settings-sub-nav__link:hover { color: var(--text-primary); }
.settings-sub-nav__item--active .settings-sub-nav__link:hover { color: var(--accent-strong); }
/*
 * patterns.css — DiveOS shared pattern styles
 *
 * One file per concern would be tidier but Propshaft imports flat. The
 * patterns live here in the same order as UI-ARCHITECTURE.md §4 so a
 * reader scrolling the spec finds the CSS for each pattern in sequence.
 *
 * Resolves all colors through tokens.css semantic aliases (light-only
 * since v4 — dark mode removed per the diveOS-design-system repo spec).
 *
 * Inter is the body font (loaded by tokens.css). Geist Mono is used for
 * any tabular-nums context (time anchors, KPI values, capacity ratios).
 * Apply via inline class `font-mono` or local rule.
 */
/* ─── Text roles ────────────────────────────────────────────────────────
   Named typographic roles. Use these instead of hand-speccing
   size/weight/transform/tracking/color inline (the `text-[10px] uppercase
   tracking-[0.08em] text-muted` soup that recurs in ~47 files). Each maps to a
   --text-* token, so nothing is off-scale. They carry NO layout (no margins /
   display) so they compose on any element — for a standalone eyebrow WITH
   block spacing use .section-label; for a card's header use .dv-card__title.
   Role names, not size names (body-14 etc.): a name shouldn't lie when the
   scale shifts. Each role names its px in the comment for reference. */
/* Headings — structural h1–h5 classes that apply a heading level's appearance
   to ANY element, decoupled from the semantic tag (à la Primer .h1–.h6 / Carbon
   heading tokens / Polaris headingXl–Sm). Decoupling is deliberate: pick the
   tag for document structure, the class for size — bare <h1>–<h5> stay on
   Tailwind's preflight reset so a level never forces a size. Semantic role
   aliases share each style (.dv-title === .dv-h4), so both vocabularies work
   with one definition. Display font, 600, tight tracking. */
.dv-h1, .dv-display  { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-3xl); letter-spacing: -0.025em; color: var(--ink); }
/* 28/36 — page hero */
.dv-h2, .dv-title-lg { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-2xl); letter-spacing: -0.02em;  color: var(--ink); }
/* 24/32 — major section */
.dv-h3               { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: 600; line-height: var(--leading-xl);  letter-spacing: -0.015em; color: var(--ink); }
/* 20/28 — subsection */
.dv-h4, .dv-title    { font-family: var(--font-display); font-size: var(--text-lg);  font-weight: 600; line-height: var(--leading-lg);  letter-spacing: -0.01em;  color: var(--ink); }
/* 18/28 — card / panel heading */
.dv-h5, .dv-title-sm { font-family: var(--font-display); font-size: var(--text-md);  font-weight: 600; line-height: var(--leading-md);  letter-spacing: -0.01em;  color: var(--ink); }
/* 16/24 — small heading */
/* Subtitle — supporting subhead under a title. */
.dv-subtitle { font-size: var(--text-md); line-height: var(--leading-md); color: var(--muted); }
/* 16/24 — muted lead-in */
/* Body. */
.dv-body-lg  { font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
/* 16/24 — roomy body */
.dv-body     { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
/* 14/22 — default body */
.dv-small    { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink); }
/* 12/18 — small print */
.dv-eyebrow {                         /* micro uppercase label — "STATUS", "BOAT" */
  font-size: var(--text-2xs);         /* 10px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dv-meta {                            /* secondary / supporting line */
  font-size: var(--text-xs);          /* 12px */
  color: var(--muted);
}
.dv-figure {                          /* numeric — money / rate / id / count */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Tone modifiers — additive; defined AFTER the base color rule so the semantic
   tone wins the cascade over the base color:var(--ink). Signals a status zone
   on a figure (e.g. pricing floor / recommended / ceiling). Token-only. */
.dv-figure--confirmed { color: var(--confirmed); }
.dv-figure--cancelled { color: var(--cancelled); }
.dv-figure--pending   { color: var(--pending); }
.dv-figure--accent    { color: var(--accent); }
.dv-figure--muted     { color: var(--muted); }
/* notional / de-emphasised figure */
.dv-caption {                         /* quietest micro caption */
  font-size: var(--text-2xs);         /* 10px */
  color: var(--muted-2);
}
/* ─── Section label ─────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 24px 0 8px;
  line-height: 1.4;
}
/* ─── Layout primitives: Stack + Inline ─────────────────────────────────
   Name the layout instead of hand-rolling `flex flex-col gap-3` /
   `flex items-center gap-2`. Stack = vertical flow, Inline = horizontal flow,
   both with a token gap off the --space scale. (Polaris BlockStack/InlineStack,
   Primer Stack, Braid Stack/Inline.) Default gap = the common case; the size
   modifiers step the scale and apply to both. Inline centers + wraps by default;
   alignment/justify modifiers cover the rest. */
.dv-stack  { display: flex; flex-direction: column; gap: var(--space-3); }
/* 12 */
.dv-inline { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* 8 */
/* Gap steps (both Stack + Inline). */
.dv-stack--xs, .dv-inline--xs { gap: var(--space-1); }
/* 4 */
.dv-stack--sm, .dv-inline--sm { gap: var(--space-2); }
/* 8 */
.dv-stack--md, .dv-inline--md { gap: var(--space-3); }
/* 12 */
.dv-stack--lg, .dv-inline--lg { gap: var(--space-4); }
/* 16 */
.dv-stack--xl, .dv-inline--xl { gap: var(--space-6); }
/* 24 */
/* Cross-axis + main-axis modifiers. */
.dv-stack--center    { align-items: center; }
.dv-inline--top      { align-items: flex-start; }
.dv-inline--baseline { align-items: baseline; }
.dv-inline--between  { justify-content: space-between; }
.dv-inline--end      { justify-content: flex-end; }
.dv-inline--nowrap   { flex-wrap: nowrap; }
/* ─── KPI strip ─────────────────────────────────────────────────────── */
.kpi-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 28px 36px;
  margin: 0 0 28px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
.kpi-strip__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kpi-strip__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
  margin: 0;
}
.kpi-strip__label {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0;
}
/* ─── StatBand — bordered metrics card (content-pane sibling of kpi_strip)
   2–5 cells, big tabular number over an uppercase label, inner hairlines.
   Sits on the gray canvas (NOT in the header band). Cell count via --cols.
   Spec: Design/agent-view-dive-sites-stat-card/handover/stat-band/. ──────── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.stat-band__cell {
  padding: 18px 20px;
  border-left: 1px solid var(--hairline-2);
}
.stat-band__cell:first-child { border-left: 0; }
.stat-band__label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-band__value {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.stat-band__unit { font-size: 0.6em; font-weight: 500; color: var(--muted); }
.stat-band__value--display { font-family: var(--font-display); font-variant-numeric: normal; }
.stat-band__value--positive  { color: var(--status-confirmed-fg); }
.stat-band__value--attention { color: var(--status-briefing-fg); }
.stat-band__value--negative  { color: var(--status-cancelled-fg); }
.stat-band__value--empty     { color: var(--muted-2); font-weight: 500; }
/* Vertical variant — single column, cells stacked with top hairlines.
   For a narrow rail (e.g. dive-site facts) where vertical space is ample. */
.stat-band--vertical { grid-template-columns: 1fr; }
.stat-band--vertical .stat-band__cell { border-left: 0; border-top: 1px solid var(--hairline-2); }
.stat-band--vertical .stat-band__cell:first-child { border-top: 0; }
@media (max-width: 640px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band__cell:nth-child(odd)   { border-left: 0; }
  .stat-band__cell:nth-child(n + 3) { border-top: 1px solid var(--hairline-2); }
}
/* ─── Stat card — clickable KPI/filter tile ─────────────────────────────
   A bordered tile (swatch + label, big tabular value, sub-line) that toggles
   a filter when clicked. Replaces hand-rolled utility-soup tiles (gear
   category KPIs) that drifted off the type scale and underlined on hover
   because BT's global a:hover beat the `no-underline` utility. As an <a> it
   resets its own hover underline. Sizes are tokens, not raw px. */
.dv-stat-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.dv-stat-card:hover { border-color: var(--hairline-strong); text-decoration: none; }
.dv-stat-card--active { border-color: var(--accent); background: var(--accent-softer); }
.dv-stat-card--active:hover { border-color: var(--accent); }
.dv-stat-card__head { display: flex; align-items: center; gap: var(--space-2); }
.dv-stat-card__swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dv-stat-card__label {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--ink);
}
.dv-stat-card__value {
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; margin-top: 6px;
}
.dv-stat-card__sub { font-size: var(--text-2xs); font-weight: 500; color: var(--muted); margin-top: 6px; }
.dv-stat-card__sub--due { color: var(--briefing); }
/* ─── Header zone ───────────────────────────────────────────────────── */
.header-zone {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.header-zone__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
.header-zone__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.header-zone__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.header-zone__action-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease-out;
}
.header-zone__action-button:hover { background: var(--surface-alt); }
.header-zone__action-button:disabled { opacity: 0.5; cursor: not-allowed; }
.header-zone__action-button--primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
.header-zone__action-button--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* Destructive action — used for bottom-LEFT footer actions in side panels
   (Set inactive, Retire item). Ghost background + danger/red text; on hover it
   gains a soft red tint and red border so the destructive intent reads clearly
   without competing with the filled primary on the right. */
.header-zone__action-button--danger {
  background: transparent;
  color: var(--cancelled);
  border-color: transparent;
}
.header-zone__action-button--danger:hover {
  background: var(--cancelled-bg);
  color: var(--cancelled);
  border-color: var(--cancelled-border);
}
/* ─── Dives surface specifics ──────────────────────────────────────── */
.dives-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 16px;
}
.dives-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.dives-empty {
  padding: 64px 16px;
  text-align: center;
  color: var(--text-muted);
}
.dives-empty--wide { padding: 96px 16px 64px; }
.dives-empty__line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.dives-empty__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* ─── Drawer body lists (Divers / Stops tabs) ──────────────────────── */
.drawer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.drawer-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
  margin: 8px 0 16px;
}
.drawer-notes {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 16px;
}
.drawer-notes--incident { color: var(--red-700); }
/* ─── Settings shell layout (T12) ──────────────────────────────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 1023px) {
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }
}
/* ─── Settings hub (v3): nav + detail split INSIDE the .diveos-main pane ──
   Container query, not viewport: the split lives in the pane (viewport − the
   240px sidebar), so at a ~1024px window the pane is ~784px and the 200px nav
   left the detail card only ~409px — the description wrapped one word per line
   and the status chips clipped. Stack on a narrow PANE so the cards get full
   width; the nav becomes a horizontal wrapping bar on top. */
.settings-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  margin-top: 8px;
}
.settings-subnav { border-right: 1px solid var(--hairline); padding-right: 16px; }
.settings-subnav__items { display: flex; flex-direction: column; gap: 2px; }
/* Card fix FIRST (pane ≤880): the row's status chips drop BELOW the title/meta
   instead of competing for row width, so the description reads on a full measure
   line rather than one word per line. This alone de-cramps the card while the
   nav stays a 2-column rail — no need to stack the nav (which would leave a
   short section as one lonely card over a tall void). */
@container (max-width: 880px) {
  .setting-item { grid-template-columns: auto 1fr; row-gap: 8px; }
  .setting-item__trail {
    grid-column: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* Legacy settings feature-cards (integrations, developer tools, PMS): the row
   is `icon | body(flex-1) | trailing action/status`. On a narrow pane the body
   collapses to one word per line and the trailing element crowds/overlaps it.
   Wrap the row so the trailing action drops to its own full-width line under the
   body, which keeps a readable measure. */
@container (max-width: 700px) {
  .os-feature-row { flex-wrap: wrap; row-gap: 12px; }
  .os-feature-row > .os-feature-row__end {
    flex-basis: 100%;
    justify-content: flex-start;
    max-width: none;
    text-align: left;
  }
}
/* Only stack the nav to a top bar once the pane is too narrow for the 200px
   rail + a usable detail column (phones / very narrow panes). */
@container (max-width: 640px) {
  .settings-grid { grid-template-columns: 1fr; gap: 16px; }
  .settings-subnav {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding-right: 0;
    padding-bottom: 10px;
  }
  .settings-subnav__group { margin-bottom: 10px; }
  .settings-subnav__items { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}
.settings-sub-nav {
  border-right: 1px solid var(--border);
  padding-right: 16px;
}
@media (max-width: 1023px) {
  .settings-sub-nav { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .settings-sub-nav__items { display: flex; flex-wrap: wrap; gap: 4px; }
}
.settings-sub-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.settings-sub-nav__item { position: relative; }
.settings-sub-nav__link {
  display: block;
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.settings-sub-nav__link:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}
.settings-sub-nav__item--active .settings-sub-nav__link {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.settings-sub-nav__item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 1px 1px 0;
}
@media (max-width: 1023px) {
  .settings-sub-nav__item--active::before { display: none; }
}
.settings-content { min-width: 0; }
/* ─── Settings nav item (redesigned, icon + label) ──────────────────────
   The grouped Settings sub-nav (Shop / Operations / People / Account) — an
   icon + label row that is the active section's accent-soft chip and warms on
   hover. Promotes the per-item utility soup (the hand-rolled active/hover
   string with an arbitrary hover:bg-[var(--hover-warm)]) into a token-driven
   component, mirroring how .dv-filter-bar scopes the filter row. The group
   heading uses .dv-eyebrow (named micro-label). */
.dv-settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.dv-settings-nav__item:hover,
.dv-settings-nav__item:focus-visible { background: var(--hover-warm); text-decoration: none; color: var(--ink); }
.dv-settings-nav__item svg { color: var(--muted); flex-shrink: 0; }
.dv-settings-nav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.dv-settings-nav__item.is-active:hover { background: var(--accent-soft); color: var(--accent); }
.dv-settings-nav__item.is-active svg { color: var(--accent); }
.settings-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Status summary grid — each section partial renders this above the link
   list to show at-a-glance configuration state. Two columns; --ok rows
   show in green-700, --todo rows in amber-700, both via tokens.css. */
.settings-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 16px 0 24px;
  padding: 0;
}
@media (max-width: 1023px) {
  .settings-status { grid-template-columns: 1fr; }
}
.settings-status__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.settings-status__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.settings-status__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.settings-status__row--ok .settings-status__value {
  color: var(--green-700);
}
.settings-status__row--todo .settings-status__value {
  color: var(--amber-700);
}
.settings-status__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.settings-status__hint {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: 6px;
}
/* ─── Modern settings list (card rows) ───────────────────────────────
   v4 modernization. Replaces the .settings-status stat-strip + tight
   ledger-row with richer card rows: leading icon, title + description,
   trailing status pill + chevron. One row per editable thing; status is
   folded onto the row (no separate stat-strip), counts neutral, only true
   needs-attention / healthy state takes color. */
.setting-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.setting-list__item { margin: 0; }
.setting-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
}
.setting-list__item:last-child .setting-item { border-bottom: 0; }
.setting-item--linked { cursor: pointer; }
.setting-item--linked:hover { background: var(--hover-warm); }
.setting-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.setting-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setting-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.setting-item__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.setting-item__trail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.setting-item__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.setting-item__pill--count { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.setting-item__pill--warn  { background: var(--status-briefing-bg);  color: var(--amber-700); border-color: var(--status-briefing-border, var(--border)); }
.setting-item__pill--ok    { background: var(--status-confirmed-bg);  color: var(--green-700); border-color: var(--status-confirmed-border, var(--border)); }
.setting-item__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.setting-item__chevron { color: var(--text-muted); display: inline-flex; align-items: center; }
.setting-item--linked:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .setting-item { transition: none; } }
/* ─── Filter bar ────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.filter-bar::-webkit-scrollbar { display: none; }
/* v4: aligned to the repo .chip spec — 28px pill, hairline border on
   surface; active = accent-soft bg + accent-border + accent text. */
.filter-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background 150ms ease-out;
}
.filter-pill:hover { background: var(--canvas); }
.filter-pill--active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}
/* ─── Operations bar (.dv-opbar) ─────────────────────────────────────────
   Consolidated status + actions strip at the foot of a form-detail page
   (sharing / public-access / documents). Uses the shared cool blue-gray
   summary surface (#F2F5F9 / #D5DEEA — same as .ds-sum) so it reads as a
   DISTINCT operations panel, not another white form-field info_card. Status +
   meta on the left, action buttons + a QR tile on the right. Standard for
   status/CTA sections across forms. */
.dv-opbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  background: #F2F5F9;             /* shared cool blue-gray summary surface */
  border: 1px solid #D5DEEA;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.dv-opbar__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dv-opbar__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate-500);
}
.dv-opbar__label svg { color: var(--muted-2); }
.dv-opbar__facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-opbar__meta { font-size: var(--text-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.dv-opbar__meta svg { color: var(--confirmed); }
.dv-opbar__dot { color: var(--hairline-strong); }
.dv-opbar__files { display: flex; gap: 16px; font-size: var(--text-sm); }
.dv-opbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-opbar__actions form { margin: 0; }
/* QR on demand via a <details> popover (C variant — the inline thumbnail was
   the A variant). "Show QR" is a secondary button; the QR floats below it. */
.dv-opbar__qrtoggle { position: relative; }
.dv-opbar__qrtoggle > summary { list-style: none; cursor: pointer; }
.dv-opbar__qrtoggle > summary::-webkit-details-marker { display: none; }
.dv-opbar__qrtoggle > summary::marker { content: ""; }
.dv-opbar__qrpop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
  padding: 14px; text-align: center; width: -moz-max-content; width: max-content;
}
.dv-opbar__qr { width: 132px; height: 132px; display: grid; place-items: center; }
.dv-opbar__qr svg { width: 100%; height: 100%; display: block; }
.dv-opbar__qrcap { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 8px; }
/* ─── Status pill ───────────────────────────────────────────────────── */
/* The gem owns the FULL component: base, size/shape modifiers, the seven
   colour variants, the child elements, and the interactive (button) states.
   Every variant is a pure pass-through to the --status-<key>-{bg,fg,border}
   tokens in tokens/semantic.css, so the palette is defined once, here.

   A consuming app supplies only two things: the human LABEL, and the mapping
   from its own domain status to a variant key (e.g. a status-palette helper
   deciding that an unpaid invoice is `--pending`). It must NOT redefine any
   `.status-pill*` rule locally — a local copy silently overrides the gem and
   the two systems drift apart. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Leading Lucide glyph inside the pill. This rule MUST live here: the gem's
   own `status_icon_svg` (helpers/os_ds/status_palette_helper.rb) emits
   `class="status-icon"`, so a gem-rendered icon would be unstyled if the rule
   sat in a consuming app. Sized in fixed px rather than a token — it tracks the
   pill's 12px optical glyph size, not the type scale. */
.status-icon { width: 12px; height: 12px; flex-shrink: 0; }
/* Size modifier (mirrors .dv-badge--sm) */
.status-pill--sm { font-size: var(--text-2xs); padding: 2px 8px; }
/* Shape modifier: square uppercase tag (mirrors .dv-badge--square) */
.status-pill--square {
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-2xs);
  padding: 3px 8px;
}
.status-pill__label { line-height: 1; }
.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Legacy alias: `.status-pill-dot` (single dash) is the pre-BEM spelling of
   `.status-pill__dot` and is still used by host-app views. Kept so those
   callers keep rendering; prefer `.status-pill__dot` in new markup. */
.status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Colour variants — pure token pass-throughs. Palette pivot 2026-05-23:
   Confirmed=green (was blue), In Water=sky (was emerald). The theme is
   light-only, so there is no dark branch here or in the tokens. */
.status-pill--pending   { background: var(--status-pending-bg);   border-color: var(--status-pending-border);   color: var(--status-pending-fg); }
.status-pill--confirmed { background: var(--status-confirmed-bg); border-color: var(--status-confirmed-border); color: var(--status-confirmed-fg); }
.status-pill--briefing  { background: var(--status-briefing-bg);  border-color: var(--status-briefing-border);  color: var(--status-briefing-fg); }
.status-pill--in_water  { background: var(--status-in-water-bg);  border-color: var(--status-in-water-border);  color: var(--status-in-water-fg); }
.status-pill--returning { background: var(--status-returning-bg); border-color: var(--status-returning-border); color: var(--status-returning-fg); }
.status-pill--completed { background: var(--status-completed-bg); border-color: var(--status-completed-border); color: var(--status-completed-fg); }
.status-pill--cancelled { background: var(--status-cancelled-bg); border-color: var(--status-cancelled-border); color: var(--status-cancelled-fg); }
/* Editable status pill — the badge-dropdown trigger is a button.status-pill.
   It gets interaction affordances the static pill never does: a subtle hover
   and a token-driven focus-visible ring. The static .status-pill stays inert. */
button.status-pill {
  cursor: pointer;
  /* No resting shadow — the chevron + hover brightness carry the control
     affordance. (A shadow here reads as unwanted elevation on a flat chip.) */
  transition: filter 120ms ease;
}
button.status-pill:hover {
  filter: brightness(0.97);
}
button.status-pill:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* ─── Open row ──────────────────────────────────────────────────────── */
.open-row {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.open-row__link,
.open-row > *:not(:has(.open-row__link)) {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  min-height: 96px;
}
.open-row__link { transition: background 150ms ease-out; }
.open-row__link:hover { background: var(--surface-alt); }
.open-row__time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.open-row__time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
}
.open-row__time-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.open-row__body { min-width: 0; }
.open-row__primary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
.open-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--text-primary);
}
.open-row__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.open-row__right {
  text-align: right;
}
.open-row__right-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
}
.open-row__right-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
/* ─── Ledger row ────────────────────────────────────────────────────── */
.ledger-row {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.ledger-row__link,
.ledger-row > *:not(:has(.ledger-row__link)) {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 16px;
  min-height: 48px;
  text-decoration: none;
  color: inherit;
}
.ledger-row__link { transition: background 150ms ease-out; }
.ledger-row__link:hover { background: var(--surface-alt); }
.ledger-row__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  width: 60px;
}
.ledger-row__title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex: 1;
}
.ledger-row__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.ledger-row__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex-shrink: 0;
}
/* ─── Side panel (drawer) ───────────────────────────────────────────── */
.side-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
.side-panel__header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.side-panel__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.side-panel__close {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.side-panel__close:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}
.side-panel__close-icon { width: 18px; height: 18px; stroke-width: 1.75; }
.side-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
/* Title + status on one row, meta drops below (booking drawer, #113). */
.side-panel__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.side-panel__title--inline {
  margin: 0;
}
.side-panel__subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.side-panel__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.side-panel__tab-zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Tab bar shares the panel's 24px gutter (header/body) instead of sitting
   flush-left. Applies to every drawer that uses the side_panel chrome. */
.side-panel__tab-zone > .tabs { padding-left: 24px; padding-right: 24px; }
.side-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  /* Positioning context so absolutely-positioned descendants (e.g. the
     `.dv-segment__input.sr-only` DIN/INT radios) are contained by the
     scroll body, not the `position: fixed` `.side-drawer` wrapper. Without
     this, focusing a visually-hidden control scroll-into-views the fixed
     wrapper and yanks the whole panel off-screen ("drawer scroll broke"). */
  position: relative;
}
.side-panel__action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.side-panel__action-bar-left { flex: 1; }
.side-panel__action-bar-right {
  display: flex;
  gap: 8px;
  /* Always pin to the right edge. With a left/destructive action present the
     flex:1 left pushes us right (left|……|right); with no left action the
     margin-left:auto still drives us to the right edge so a lone primary CTA
     is bottom-right by default (not flex-start/left). */
  margin-left: auto;
}
/* Single-CTA footers (e.g. the booking quick-view "View full booking") pin
   their one action to the right edge. Now redundant since the default
   right-aligns via margin-left:auto — kept for any explicit callers. */
.side-panel__action-bar--end { justify-content: flex-end; }
/* Width modifier — opt-in wider (560px) read-only summary drawer. Add
   `.side-panel--wide` to the `.side-panel` section when a surface needs the
   roomier variant. */
.side-panel--wide { max-width: 560px; }
/* ─── Field grid ────────────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-grid__field--span-2 { grid-column: 1 / -1; }
.field-grid__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.field-grid__value {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
/* ─── Segmented control ─────────────────────────────────────────────── */
.segmented {
  display: inline-flex;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
}
.segmented__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.segmented__option:hover { color: var(--text-primary); }
.segmented__option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.segmented__option--active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.segmented__option--active:focus-visible {
  box-shadow: var(--shadow-sm), var(--shadow-focus);
}
/* Form-field variant — full-width equal segments, backed by a native radio
   group; the checked segment lifts to white with accent text (A5 difficulty
   picker). Native radios + :has, no JS. */
.segmented--field { display: flex; width: 100%; }
.segmented--field .segmented__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.segmented__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented--field .segmented__option:has(.segmented__radio:checked) {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.segmented--field .segmented__option:has(.segmented__radio:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* ─── Toggle switch (form-bound) ────────────────────────────────────────
   A styled boolean control backed by a native checkbox that submits with the
   form (unlike the fetch-based .toggle_switch component). Native checkbox +
   :has(), no JS. */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.toggle-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toggle-switch__track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  background: var(--hairline-strong);
  border-radius: var(--radius-pill);
  transition: background 150ms ease-out;
}
.toggle-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease-out;
}
.toggle-switch__input:checked ~ .toggle-switch__track,
.toggle-switch:has(.toggle-switch__input:checked) .toggle-switch__track {
  background: var(--accent);
}
.toggle-switch__input:checked ~ .toggle-switch__track .toggle-switch__knob,
.toggle-switch:has(.toggle-switch__input:checked) .toggle-switch__knob {
  transform: translateX(16px);
}
.toggle-switch__input:focus-visible ~ .toggle-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* ─── Tabs ──────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}
.tabs__tab--active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tabs__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tabs__tab--active .tabs__count { color: var(--text-secondary); }
/* ─── Equipment lifecycle action bar (P4-1 T4) ────────────────────────
   State-aware action zone on the EquipmentItem show page. Status pill
   + context-appropriate transition buttons. Calm-surface: button row
   reads as one composition with the status, not as 4 separate widgets. */
.equipment-item-status {
  margin-bottom: 12px;
}
.equipment-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.equipment-item-actions form { margin: 0; }
.equipment-item-actions .button {
  font-size: var(--text-sm);
}
/* ─── Participant form (P4-2) ────────────────────────────────────────
   Collapsible sections via <details>. Per design 1C: tracked + free-form
   gear default collapsed when empty, auto-expand when assigned. */
.participant-form__section {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.participant-form__section-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style: none;
}
.participant-form__section-summary::-webkit-details-marker { display: none; }
.participant-form__section-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  transition: transform 150ms ease-out;
}
.participant-form__section[open] > .participant-form__section-summary::before {
  transform: rotate(90deg);
}
.participant-form__section-hint {
  margin-left: 8px;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.participant-form__section-body {
  padding: 8px 16px 16px;
  border-top: 1px solid var(--border);
}
.participant-form__empty-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 8px 0;
}
.participant-form__tracked-items {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.participant-form__tracked-item {
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  transition: background 100ms ease-out;
}
.participant-form__tracked-item:hover { background: var(--surface-alt); }
.participant-form__tracked-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;  /* WCAG AA touch target per design 6C */
}
.participant-form__tracked-input { margin: 0; }
.participant-form__tracked-identifier {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.participant-form__tracked-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex: 1;
}
/* ── Phase 6 Pattern Library Additions (R3-R14 + D1-D11) ─────────────────
   form_section, wizard_layout, hero_show, empty_state, loading_state.
   See plan §3 + DESIGN.md tokens for the visual grammar driving these. */
/* ── form_section ───────────────────────────────────────────────────── */
/* Section card — A5 forms spec: surface card, soft shadow, fixed padding.
   Sections stack with an 18px gap in the centered .form-page column. */
.form-section {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 24px;
  margin-bottom: 18px;
}
/* The arena theme styles `form.form` (post/patch) with BT's `-mt-5 space-y-5`
   rhythm: a -1.25rem (-20px) top margin plus 20px between children. The
   NEGATIVE margin collapses with the .form-page's 2rem band gap (32 + -20 =
   12px), eating most of it — that's why forms looked like they lost the 2rem.
   The space-y also overrides our 18px section stack. We use form_section
   cards + the band's 2rem, not BT's form rhythm, so neutralize both. The
   selectors mirror the gem's so they tie on specificity and win on source
   order (patterns.css loads after the theme). */
form.form[method="post" i],
form.form[method="patch" i] { margin-top: 0; }
/* space-y-5 sets BOTH margins on later children (a Rails hidden CSRF input is
   the first child, so the first section counts as "later"): margin-top 20px
   AND margin-bottom: calc(1.25rem * --tw-space-y-reverse) = 0, which zeroes
   our 18px section stack. Restore both — flush top (band owns the 2rem gap),
   18px between/after sections. */
form.form > .form-section:not([hidden]) { margin-top: 0; margin-bottom: 18px; }
.form-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Muted icon — a quiet marker that keeps the section stack calm (A5 forms
   spec). The heading carries the weight in ink; the icon is NOT accent. */
.form-section__icon {
  color: var(--muted);
}
/* Title-case heading — General Sans, the DS CardTitle treatment chosen over
   the uppercase SectionLabel because each header carries a description. */
.form-section__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
/* Description — muted, at the card's left edge (under the icon), not indented
   under the title. */
.form-section__subtitle {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
  margin: 6px 0 0;
}
/* Header→field gap. The card-title-with-description variant breathes at 32px
   between the title/description and the first field; tighter without one. */
.form-section__body { margin-top: 20px; }
.form-section:has(.form-section__subtitle) .form-section__body { margin-top: 32px; }
@media (max-width: 640px) {
  .form-section { padding: 18px 16px 20px; }
}
/* ── wizard_layout ──────────────────────────────────────────────────── */
.wizard-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 40px;
}
.wizard-layout__header { margin-bottom: 24px; }
.wizard-layout__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.wizard-layout__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}
.wizard-layout__stepper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
.wizard-layout__step {
  margin-bottom: 20px;
}
.wizard-layout__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.wizard-layout__actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wizard-layout__cancel,
.wizard-layout__back,
.wizard-layout__next {
  display: inline-flex;
  align-items: center;
  height: 44px;  /* WCAG AAA touch target */
  padding: 0 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.wizard-layout__cancel {
  color: var(--text-muted);
}
.wizard-layout__cancel:hover { color: var(--text-primary); }
.wizard-layout__back {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.wizard-layout__back:hover { background: var(--surface-alt); }
.wizard-layout__next {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.wizard-layout__next:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
@media (max-width: 640px) {
  .wizard-layout { padding: 20px 16px; }
  .wizard-layout__stepper { padding: 14px; }
  /* Stack action bar vertically + full width on mobile. */
  .wizard-layout__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .wizard-layout__actions-right {
    flex-direction: column;
    align-items: stretch;
  }
  .wizard-layout__cancel,
  .wizard-layout__back,
  .wizard-layout__next {
    justify-content: center;
  }
}
/* ── hero_show ──────────────────────────────────────────────────────── */
/* Fills the diveos-content shell (1280 column + 48px gutters) so the
   header band can bleed full-width, like every other account page. */
.hero-show {
  display: block;
}
/* White header band — reuses .dv-page-band (full-bleed white + bleed math).
   This adds only the vertical rhythm: pull up to negate diveos-content's
   top padding (40px), breathe before the body. */
.hero-show__band {
  margin-top: calc(-1 * var(--shell-pad-top, 40px));
  margin-bottom: 2rem;
  padding-top: 26px;
  padding-bottom: 22px;
}
/* Page header band — form/settings/list header (reuses .dv-page-band +
   the .hero-show__breadcrumb/__crumb* classes for the crumb row). */
.page-header { margin-top: calc(-1 * var(--shell-pad-top, 40px)); padding-top: var(--space-8); padding-bottom: var(--space-6); }
.page-header .hero-show__breadcrumb { margin-bottom: 16px; }
.page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.page-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) { .page-header { margin-top: -56px; } }
/* Form column under a page_header — centered, 640px (A5 forms spec): a
   field-led single column of section cards. Top gap from the global
   band→body rule below. */
.form-page { max-width: 640px; margin-inline: auto; }
/* Content-sized field rows — small numerics/codes group in a wrapping row at
   their natural width instead of stretching the column (A5 field-sizing). */
.field-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
.field-w-116 { width: 116px; }
.field-w-168 { width: 168px; }
.field-w-116 :where(.diveos-input, input[type], select),
.field-w-168 :where(.diveos-input, input[type], select) { width: 100%; }
/* 50/50 split — equal columns for text PAIRS (names), not numerics. Field
   widths are contextual: compact for numbers/codes, split/full for text. */
.field-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
/* Cancel the stacked-field rhythm inside the split grid — the two fields are
   adjacent siblings, so `.diveos-field + .diveos-field { margin-top }` would
   push the 2nd one down and stagger the row. */
.field-split .diveos-field + .diveos-field { margin-top: 0; }
/* Inline unit suffix (e.g. % on a commission rate) — sits in the input, not
   as a hint below. */
.field-pct .diveos-field__input { position: relative; }
.field-pct .diveos-field__input::after {
  content: "%"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm); color: var(--muted); pointer-events: none;
}
.field-pct .diveos-input { padding-right: 26px; }
/* DS Trix toolbar — make the rich-text controls read as part of the system:
   hairline-bordered button groups on surface, muted glyphs, accent-tint
   active, DS-radius. Kept consistently visible (no opacity dimming). */
trix-toolbar { opacity: 1; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
trix-toolbar .trix-button-group {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
trix-toolbar .trix-button {
  width: 32px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hairline-2);
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 0;
}
trix-toolbar .trix-button-group .trix-button:first-child { border-left: 0; }
trix-toolbar .trix-button::before { opacity: 0.65; }
trix-toolbar .trix-button:not(:disabled):hover { background: var(--surface-alt); }
trix-toolbar .trix-button:not(:disabled):hover::before { opacity: 0.9; }
trix-toolbar .trix-button.trix-active {
  background: var(--accent-soft);
}
trix-toolbar .trix-button.trix-active::before { opacity: 1; }
trix-toolbar .trix-button:disabled::before { opacity: 0.25; }
.hero-show__back-row { margin-bottom: 18px; }
.hero-show__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.hero-show__back-link:hover { text-decoration: underline; }
/* Name-led header inside the white band — title + status, meta line,
   actions. The band (.dv-page-band) owns the bottom hairline + bg. */
.hero-show__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hero-show__identity {
  flex: 1;
  min-width: 0;
}
.hero-show__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.hero-show__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
/* Meta line — middot-separated id + facts. Mirrors booking's
   .bk-contact-line so entity headers read identically. */
.hero-show__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.hero-show__meta-id {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-show__meta-dot { font-size: var(--text-xl); line-height: 0; color: var(--muted-2); }
.hero-show__meta-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.hero-show__meta-item i,
.hero-show__meta-item svg { color: var(--muted-2); flex-shrink: 0; }
.hero-show__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hero-show__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
}
.hero-show__action--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.hero-show__action--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.hero-show__action--secondary {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.hero-show__action--secondary:hover { background: var(--surface-alt); }
.hero-show__action--danger {
  color: var(--cancelled);
  background: var(--surface);
  border-color: var(--hairline);
}
.hero-show__action--danger:hover { background: var(--cancelled-bg); border-color: var(--cancelled-border); }
/* button_to wraps each action in a form; keep it inline so the flex row
   doesn't break. */
.hero-show__action-form { display: inline-flex; margin: 0; }
/* Breadcrumb row — replaces the back link on catalog-detail headers. */
.hero-show__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: var(--text-sm);
}
.hero-show__crumb { color: var(--muted); text-decoration: none; }
.hero-show__crumb:hover { color: var(--ink); }
.hero-show__crumb--current { color: var(--ink); font-weight: 600; }
.hero-show__crumb-sep { display: inline-flex; color: var(--muted-2); }
/* Eyebrow pill — category/type marker above the title. */
.hero-show__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-show__eyebrow svg { color: var(--muted-2); }
/* Subtitle helper line under the title. */
.hero-show__subtitle {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
/* Rail fact card — stacked label/value rows with hairline separators. */
.hero-rail-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2px 20px;
}
.hero-rail-stat {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.hero-rail-stat:last-child { border-bottom: 0; }
.hero-rail-stat__lbl {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-rail-stat__val {
  margin-top: 6px;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.hero-rail-stat__unit { font-size: var(--text-sm); font-weight: 500; color: var(--muted); margin-left: 2px; }
/* Content card — body section with an icon + title head. */
.hero-content-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.hero-content-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hero-content-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.hero-content-card__body {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
}
.hero-show__body--one-col .hero-show__main { width: 100%; }
.hero-show__body--two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}
.hero-show__rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024px) {
  .hero-show__body--two-col {
    grid-template-columns: 1fr;
  }
}
/* Narrow PANE (container, not viewport — accounts for the 240px sidebar): the
   actions are flex-shrink:0, so beside a long title in a ~784px pane they crowd
   it. Wrap the actions under the identity block. The ≤640 viewport block below
   still owns the full mobile column treatment. */
@container (max-width: 760px) {
  .hero-show__header { flex-wrap: wrap; }
  .hero-show__identity { flex: 1 1 100%; }
  .hero-show__actions { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .hero-show__band { margin-top: -56px; }
  .hero-show__header {
    flex-direction: column;
    gap: 16px;
  }
  .hero-show__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-show__action { justify-content: center; }
}
/* ── empty_state ────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 16px;
}
.empty-state__icon {
  color: var(--text-muted);
  margin: 0 auto 12px;
  display: block;
}
.empty-state__message {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
/* When a description is present, the message reads as an emphasized title
   above the muted supporting line. Single-message callers are unaffected. */
.empty-state:has(.empty-state__description) .empty-state__message {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}
.empty-state__description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}
.empty-state__actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.empty-state__action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
}
.empty-state__action--primary {
  color: var(--accent);
  background: transparent;
  /* Inline link form when single action (matches conforming surfaces);
     becomes proper button when paired with a secondary (handled by
     `.empty-state__actions:has(.empty-state__action--secondary)`). */
}
.empty-state__action--primary:hover { text-decoration: underline; }
.empty-state__actions:has(.empty-state__action--secondary) .empty-state__action--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.empty-state__actions:has(.empty-state__action--secondary) .empty-state__action--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  text-decoration: none;
}
.empty-state__action--secondary {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.empty-state__action--secondary:hover { background: var(--surface-alt); }
/* ── loading_state ──────────────────────────────────────────────────── */
.loading-state {
  padding: 12px 0;
}
.loading-state__row {
  height: 48px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  animation: loading-state-pulse 1.6s ease-in-out infinite;
}
@keyframes loading-state-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-state__row { animation: none; opacity: 0.8; }
}
/* diveos_shell.css — layout shell + sidebar + side_drawer styles.
   docs/archive/UI-MIGRATION-PLAN.md T6. Loaded after patterns so .section-label
   inherited-then-overridden inside .diveos-sidebar wins via specificity. */
/*
 * diveos_shell.css — layout shell + sidebar + side drawer styles
 *
 * Loaded by application.css after tokens + patterns. Lives separately from
 * patterns.css because the shell is a singular structural component, not
 * a reusable pattern.
 *
 * Per docs/archive/UI-MIGRATION-PLAN.md T6 + UI-ARCHITECTURE.md §1 sidebar IA spec.
 */
/* ─── Body + shell ─────────────────────────────────────────────────── */
.diveos-body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* Inter OpenType features per the repo spec (cv11 single-storey a,
     ss01/ss03 alternates). Harmless on General Sans / Geist Mono. */
  font-feature-settings: "cv11", "ss01", "ss03";
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.diveos-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
/* ─── Mobile hamburger ─────────────────────────────────────────────── */
.diveos-hamburger {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  /* 44px minimum touch target per DESIGN.md a11y section. */
  width: 44px;
  height: 44px;
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.diveos-hamburger:hover { background: var(--surface-alt); }
/* ─── Sidebar ──────────────────────────────────────────────────────── */
.diveos-sidebar {
  display: flex;
  flex-direction: column;
  /* v4: gray-100 sidebar per the repo spec (was white --surface). */
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 24px 16px 16px;
}
.diveos-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 16px;
}
/* Primary CTA — clean .dv-btn--lg component (not utility soup). Layout-only
   here: full width + the gap before the nav. */
.diveos-sidebar__cta {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 32px;
}
/* Brand mark links to Today (logo-links-home). Quiet hover — tint the
   product mark, no background block in the brand zone. */
.diveos-sidebar__brand-link { color: inherit; }
.diveos-sidebar__brand-link:hover .diveos-sidebar__product { color: var(--accent-strong); }
.diveos-sidebar__product {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
.diveos-sidebar__tenant {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.diveos-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
/* Section labels inside the sidebar get tighter top margins than the
   global .section-label utility (which is tuned for in-content use). */
.diveos-sidebar__nav .section-label {
  margin: 18px 10px 6px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}
.diveos-sidebar__nav .section-label:first-child { margin-top: 0; }
.diveos-sidebar__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.diveos-sidebar__item {
  position: relative;
}
.diveos-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.diveos-sidebar__link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}
.diveos-sidebar__item--active .diveos-sidebar__link {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
/* Active state is the accent-soft fill + accent text (our treatment); no
   left-edge bar. ::before neutralized — kept out so it can't mis-position. */
.diveos-sidebar__item--active::before { content: none; }
.diveos-sidebar__label { line-height: 1.2; }
.diveos-sidebar__badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
/* ─── Owner footer ─────────────────────────────────────────────────── */
.diveos-sidebar__owner-trigger { position: relative; }
.diveos-sidebar__owner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.diveos-sidebar__owner:hover { background: var(--surface-alt); }
.diveos-sidebar__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.diveos-sidebar__owner-text { min-width: 0; flex: 1; }
.diveos-sidebar__owner-label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.diveos-sidebar__owner-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diveos-sidebar__owner-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  text-transform: capitalize;
}
/* Upward-opening account menu (footer sits at bottom of sidebar) */
.diveos-sidebar__owner-menu {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 8px;
  min-width: 200px;
  margin-bottom: 6px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 20;
}
.diveos-sidebar__owner-menu.hidden { display: none; }
.diveos-sidebar__owner-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.diveos-sidebar__owner-menu-item:hover { background: var(--bg); }
.diveos-sidebar__owner-menu-item--divided {
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
/* ─── Main pane ────────────────────────────────────────────────────── */
.diveos-main {
  background: var(--bg);
  outline: none;
  min-height: 100vh;
  /* Grid items default to min-width:auto, so a wide unwrappable child (mono
     trip title + action buttons) inflates the shell column past the viewport
     and forces horizontal scroll on phones. 0 lets the pane shrink-to-fit. */
  min-width: 0;
  /* Container context so the content gutter (clamp(…, 4cqi, …)) measures the
     PANE width (viewport minus sidebar), not the whole window. */
  container-type: inline-size;
}
.diveos-content {
  /* Width tier — defaults to wide; pattern partials narrow it via a modifier. */
  --page-max: var(--page-wide);
  max-width: var(--page-max);
  margin-inline: auto;   /* centre the content column within the main pane */
  /* --shell-pad-top is the single source of truth for the pane's top padding.
     Full-bleed headers (.dv-page-head / .dv-page-tools / .page-header /
     .hero-show__band) pull up by EXACTLY this via calc() so the band sits flush
     at the pane top on every breakpoint — no hardcoded -40px to drift out of
     sync (it previously left a 16px gap on mobile where the pad is 56px).
     Horizontal padding is the fluid --gutter; self-banding headers bleed to the
     content-box edge with margin-inline: calc(var(--gutter) * -1). */
  --shell-pad-top: 40px;
  padding: var(--shell-pad-top) var(--gutter) 64px;
  /* Full-bleed band helpers (used by .dv-page-band / .dv-full-bleed / kanban):
     the band background spans the whole pane (100cqw, measured on .diveos-main),
     while its INNER content re-pads to the tier column so it lines up with the
     body. cqw excludes the scrollbar (unlike vw) → no horizontal overflow. */
  --bleed-w:  100cqw;
  --bleed-mx: calc(50% - 50cqw);
  --bleed-pad: max(var(--gutter), calc(50cqw - var(--page-max) / 2 + var(--gutter)));
}
.diveos-content--narrow  { --page-max: var(--page-narrow); }
/* Prose cap — apply to paragraph/description runs so line length stays readable
   even on a wide page. Structured content (tables, cards, KV grids) never uses it. */
.dv-measure { max-width: var(--measure); }
/* Tighter caps for larger text — line length shrinks as size grows (Practical UI). */
.dv-measure--lg      { max-width: var(--measure-lg); }
.dv-measure--display { max-width: var(--measure-display); }
/* Full-bleed pages (content_for :full_bleed) — e.g. the POS booking wizard:
   the page owns the whole content pane as a fixed-height app-shell region
   (its own header/stepper, an internally-scrolling body, and a footer pinned
   to the viewport bottom) instead of the default padded, page-scrolling column. */
.diveos-main--bleed {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.diveos-content--bleed {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* ─── Side drawer (the layout-level Turbo Frame) ───────────────────── */
.side-drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: 560px;
  max-width: 90vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}
.side-drawer > * { min-height: 0; height: 100%; width: 100%; }
.side-drawer.side-drawer--open {
  transform: translateX(0);
  pointer-events: auto;
}
.side-drawer::-webkit-scrollbar { width: 8px; }
.side-drawer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* ─── Side-drawer scrim ─────────────────────────────────────────────── */
/* Dims the page behind ANY open side panel (Trip / Diver / Fleet / Gear /
   Team / Fast-create), matching the Bookings slideover's `.slideover-backdrop`
   look. Sits just below the drawer (z-index 40 vs the drawer's 40 — declared
   first so the later drawer paints above) and fades in/out. The side_panel
   controller toggles `.side-drawer-scrim--visible` in lock-step with the
   drawer's open class; clicking it closes the drawer via the controller's
   outside-click handler. */
.side-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(15, 27, 45, 0.30);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.side-drawer-scrim--visible {
  opacity: 1;
  pointer-events: auto;
}
/* ─── Mobile drawer scrim ──────────────────────────────────────────── */
/* Desktop never shows it; below 1024px it sits between the page and the
   open drawer so a tap outside dismisses instead of dead-ending. */
.diveos-scrim { display: none; }
/* ─── Responsive: mobile (< 1024px) ────────────────────────────────── */
@media (max-width: 1023px) {
  .diveos-shell { grid-template-columns: 1fr; }
  .diveos-hamburger { display: inline-flex; }
  .diveos-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    z-index: 50;
    height: 100vh;
  }
  .diveos-shell--menu-open .diveos-sidebar { transform: translateX(0); }
  .diveos-shell--menu-open .diveos-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 32, 0.45);
  }
  .diveos-content { --shell-pad-top: 56px; padding: var(--shell-pad-top) 16px 32px; }
}
/* ─── Responsive: phones (< 640px) ─────────────────────────────────── */
/* The info strip's N-up grid has a min-content width (~345px for the trip
   strip) that propagates up and forces horizontal page scroll on phones.
   Stack the cells; side dividers become bottom dividers. */
@media (max-width: 639px) {
  .info-strip { grid-template-columns: 1fr; }
  .info-strip__cell { border-right: 0; }
  .info-strip__cell:not(:last-child) { border-bottom: 1px solid var(--border); }
  /* Full-screen drawer on phones only. Tablet (640–1023) keeps the desktop
     560px overlay + scrim so the background shows and it's easy to tap off. */
  .side-drawer { width: 100vw; max-width: 100vw; }
}
/* ── Sidebar collapse (rail ⇄ 68px icon strip) ───────────────────────────
   Relocated here from components/package_builder.css: this is general shell/
   sidebar behaviour (the brand chevron toggle + collapsed rail), not package-
   builder-specific. Lives with the shell so the package-builder CSS can ship
   as its own PR without the sidebar depending on it. */
/* ─── 3. Sidebar collapse (extends the real .diveos-sidebar) ───────── */
/* The shell grid resolves the rail width from --sidebar-w. Collapse swaps
   that var on the shell so the grid column tracks the 68px rail. The width
   transition lives on the sidebar; the grid column follows because it reads
   the same var. */
.diveos-sidebar {
  /* add the animated width so collapse glides (the shell sets the column) */
  transition: width var(--t-slow) var(--ease-out-quart);
  overflow: hidden;
}
/* Animate the GRID TRACK so the rail glides. The column drives the sidebar
   width, so the transition must live on grid-template-columns — a transition
   on the sidebar's own width is clipped instantly by the resized track. */
.diveos-shell {
  transition: grid-template-columns var(--t-slow) var(--ease-out-quart);
}
.diveos-shell.is-rail-collapsed {
  grid-template-columns: 68px 1fr;
}
/* collapse toggle — ghost button styled like a quiet nav affordance.
   Lives in the brand header; the markup adds it next to the brand block. */
.diveos-sidebar__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.diveos-sidebar__collapse:hover { background: var(--surface-alt); color: var(--ink); }
/* ── collapsed state ──────────────────────────────────────────────── */
.diveos-shell.is-rail-collapsed .diveos-sidebar { width: 68px; padding: 24px 0 16px; }
/* brand: hide the text block, center the logo, drop the toggle below it */
.diveos-shell.is-rail-collapsed .diveos-sidebar__brand {
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.diveos-shell.is-rail-collapsed .diveos-sidebar__brand-link { justify-content: center; }
.diveos-shell.is-rail-collapsed .diveos-sidebar__brand-link > div { display: none; }
.diveos-shell.is-rail-collapsed .diveos-sidebar__collapse { margin-left: 0; }
/* CTA → icon-only 40px accent square */
.diveos-shell.is-rail-collapsed .diveos-sidebar__cta {
  width: 40px;
  height: 40px;
  margin: 0 auto 24px;
  padding: 0;
}
.diveos-shell.is-rail-collapsed .diveos-sidebar__cta i,
.diveos-shell.is-rail-collapsed .diveos-sidebar__cta svg { margin: 0; }
.diveos-shell.is-rail-collapsed .diveos-sidebar__cta .pkb-cta-label { display: none; }
/* nav: section labels → a hairline divider; items → icon-only */
.diveos-shell.is-rail-collapsed .diveos-sidebar__nav { padding: 0 10px; }
.diveos-shell.is-rail-collapsed .diveos-sidebar__nav .section-label {
  height: 1px;
  margin: 14px 8px 8px;
  padding: 0;
  background: var(--hairline);
  overflow: hidden;
  text-indent: -9999px;
}
.diveos-shell.is-rail-collapsed .diveos-sidebar__link {
  justify-content: center;
  padding: 9px 0;
}
.diveos-shell.is-rail-collapsed .diveos-sidebar__label,
.diveos-shell.is-rail-collapsed .diveos-sidebar__badge { display: none; }
/* active item: just the accent icon on accent-soft (no left bar in collapsed) */
.diveos-shell.is-rail-collapsed .diveos-sidebar__item--active .diveos-sidebar__link {
  background: var(--accent-soft);
}
/* owner footer → avatar only */
.diveos-shell.is-rail-collapsed .diveos-sidebar__owner {
  justify-content: center;
  padding: 8px 0;
}
.diveos-shell.is-rail-collapsed .diveos-sidebar__owner-text { display: none; }
/* respect reduced-motion for the width glide */
@media (prefers-reduced-motion: reduce) {
  .diveos-sidebar { transition: none; }
}
/* diveos_forms.css — form field substrate (.diveos-input, .diveos-label,
   .diveos-button, etc.). Consumed by the FormBuilder (T5) and the
   ejected shared/fields/* partials (T6). Phase 6 PR1 task T4. */
/* DiveOS form substrate — utility classes the ejected shared/fields/*
   partials (T6) and DiveosFormBuilder (T5) apply so 75+ forms inherit
   consistent styling without per-call class lists.
   Per docs/archive/UI-MIGRATION-PLAN.md PR1 task T4 + design-review D2 (error state)
   + D9 (focus rings + touch targets). */
/* Vertical rhythm between stacked fields — without this they collapse to
   margin:0 and read as a cramped wall (legacy-redesign QA finding). The
   label→input gap stays tight (6px); the field→field gap breathes (22px). */
.form-section__body > * + * { margin-top: 22px; }
.diveos-field + .diveos-field { margin-top: 22px; }
/* …but the adjacent-sibling rhythm above is for STACKED fields only. Inside a
   grid the container `gap` handles spacing, and this margin fires on DOM order
   regardless of layout — pushing every non-first cell down 22px and breaking
   horizontal alignment across columns (First Name vs Last Name sat 22px apart).
   Neutralize it for grid-laid fields. Form-alignment audit 2026-07. */
.grid > .diveos-field,
[class*="grid-cols"] > .diveos-field {
  margin-top: 0;
}
.diveos-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.diveos-label--required::after {
  content: " *";
  color: var(--error);
}
/* v4 input model per the repo spec: gray-50 bg, gray-300 border with a
   gray-400 hover step, accent-derived focus border + 10% focus ring. */
.diveos-input,
.diveos-select,
.diveos-textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
/* Compact field that lines up with a .dv-btn (2.25rem / 36px) — for the
   input+button rows in headers/toolbars where the default 42px field sits
   taller than the buttons beside it. */
.diveos-input--sm { height: 2.25rem; padding-top: 0; padding-bottom: 0; }
/* Field-height controls (46px) for filter / search rows — the standalone
   counterparts to `.dv-btn--field` and `.dv-input-group--field` (both 46px), so
   a LABELLED horizontal bar of selects + inputs + buttons (the landing search
   bar) lines up at one height without wrapping every control in an input-group.
   Same 46px scale the header `.dv-filter-bar` already uses. */
.diveos-input--field,
.diveos-select--field { height: 46px; padding-top: 0; padding-bottom: 0; }
/* Square icon button at field height — the search-bar +/- stepper (`.dv-btn--icon`
   is a 36px square; `--field` lifts it to 46px tall, this squares the width). */
.dv-btn--field.dv-btn--icon { width: 46px; }
/* A .diveos-input used as an inline ROW (leading icon + text) — e.g. a <details>
   summary acting as a field. The base .diveos-input sets `display:block`, and
   this stylesheet loads AFTER Tailwind, so a `flex` utility on the element loses
   to it and the icon stacks above the text. Express the row here so it wins. */
.diveos-input--row { display: flex; align-items: center; gap: 0.5rem; }
/* Suppress the native number-input spinner where a control supplies its OWN
   +/- stepper (the landing search bar's Divers field), so the browser arrows
   don't double the buttons. Scoped modifier — other number fields keep theirs. */
.diveos-input--no-spinner { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }
.diveos-input--no-spinner::-webkit-outer-spin-button,
.diveos-input--no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.diveos-input:hover,
.diveos-select:hover,
.diveos-textarea:hover {
  border-color: var(--input-border-hover);
}
.diveos-input:focus,
.diveos-select:focus,
.diveos-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.diveos-input:disabled,
.diveos-select:disabled,
.diveos-textarea:disabled {
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}
.diveos-input::-moz-placeholder, .diveos-textarea::-moz-placeholder {
  color: var(--input-placeholder);
}
.diveos-input::placeholder,
.diveos-textarea::placeholder {
  color: var(--input-placeholder);
}
.diveos-textarea {
  min-height: 96px;
  resize: vertical;
}
/* Error state — applied by ejected field partials (T6) when the field
   has validation errors. Design-review D2: red border + inline message
   below. The message itself uses .diveos-error. */
.diveos-input.is-invalid,
.diveos-select.is-invalid,
.diveos-textarea.is-invalid {
  border-color: var(--error);
}
.diveos-input.is-invalid:focus,
.diveos-select.is-invalid:focus,
.diveos-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 10%, transparent);
}
.diveos-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 6px;
}
.diveos-error {
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: 6px;
}
/* ── Input group — input + button(s) on one row, at one height ──────────────
   The default .diveos-input is padding-derived (~42px), sized for roomy stacked
   forms; .dv-btn is a fixed 36px, sized for tight action clusters. When the two
   share a horizontal row (a header action cluster, a filter/apply bar) they must
   be normalized to ONE height or they look misaligned. `.dv-input-group` is that
   row: it owns the shared height so the controls can't drift apart. Default =
   36px (matches .dv-btn); `.dv-input-group--field` = 46px (matches .dv-btn--field
   filter bars). Whenever a .diveos-input sits beside a .dv-btn, wrap them here —
   enforced by hallmark (dv_input_group signature). */
.dv-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dv-input-group > .diveos-input,
.dv-input-group > .diveos-select {
  width: auto;
  height: 36px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.dv-input-group--field > .diveos-input,
.dv-input-group--field > .diveos-select,
.dv-input-group--field > .dv-btn {
  height: 46px;
}
/* Checkbox / radio sized for comfortable click + WCAG AA touch on
   mobile. Native input + spacing — no custom-painted control. */
.diveos-checkbox,
.diveos-radio {
  width: 18px;
  height: 18px;
  margin-top: 3px; /* optical alignment to label cap-height when parent is flex-start */
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.diveos-checkbox-label,
.diveos-radio-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 44px;
}
/* ══════════════════════════════════════════════════════════════
   CANONICAL CHECKBOX COMPONENT  (.diveos-check)
   Painted square box + Lucide check icon. Native input visually
   hidden but fully accessible (focus, keyboard, screen readers).
   Aligns the box to the label's first line.
   ══════════════════════════════════════════════════════════════ */
.diveos-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.45;
}
.diveos-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.diveos-check__box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.diveos-check__box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 120ms ease, transform 120ms ease;
}
.diveos-check__input:checked + .diveos-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.diveos-check__input:checked + .diveos-check__box svg {
  opacity: 1;
  transform: scale(1);
}
.diveos-check__input:indeterminate + .diveos-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.diveos-check__input:indeterminate + .diveos-check__box::after {
  content: "";
  width: 9px;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
}
.diveos-check__input:focus-visible + .diveos-check__box {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.diveos-check:hover .diveos-check__input:not(:checked) + .diveos-check__box {
  border-color: var(--accent);
}
.diveos-check__input:disabled + .diveos-check__box {
  background: var(--surface-alt);
  border-color: var(--border);
}
.diveos-check__input:disabled ~ .diveos-check__text {
  color: var(--text-muted);
}
.diveos-check:has(.diveos-check__input:disabled) {
  cursor: not-allowed;
}
.diveos-check__text {
  display: block;
}
.diveos-check__text .t {
  font-weight: 500;
  color: var(--text-primary);
}
.diveos-check__text .d {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}
/* Buttons — primary/secondary/ghost/destructive. Used by the FormBuilder
   submit helper + everywhere a form needs an action.
   Matches the inline patterns the conforming surfaces ship today. */
.diveos-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
.diveos-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.diveos-button:disabled,
.diveos-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.diveos-button--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.diveos-button--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.diveos-button--secondary {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.diveos-button--secondary:hover {
  background: var(--surface-alt);
}
.diveos-button--ghost {
  color: var(--text-muted);
  background: transparent;
}
.diveos-button--ghost:hover {
  color: var(--text-primary);
}
/* Destructive — used for "Remove diver" etc. NOT for plain Cancel
   (Cancel uses ghost). Red text on neutral background; full-red bg
   reserved for confirmation modals. */
.diveos-button--destructive {
  color: #991B1B;
  background: var(--surface);
  border-color: var(--border);
}
.diveos-button--destructive:hover {
  background: #FEF2F2;
  border-color: #FECACA;
}
.diveos-button--sm { height: 32px; padding: 0 12px; font-size: var(--text-sm); }
.diveos-button--lg { height: 44px; padding: 0 20px; font-size: var(--text-sm); }
/* Action bar that sits below the last form-section. Right-aligned by
   default — primary button trails so the eye lands there last. Stacks
   full-width on narrow screens so taps stay reachable. */
.diveos-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.diveos-form-actions__leading {
  margin-right: auto;
}
@media (max-width: 640px) {
  .diveos-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .diveos-form-actions .diveos-button { width: 100%; }
  .diveos-form-actions__leading { margin-right: 0; }
}
/* Touch targets on mobile per DESIGN.md a11y section. Bump small
   buttons + inputs to 44px so they hit the WCAG AAA threshold without
   requiring callers to remember per-screen overrides. */
@media (max-width: 640px) {
  .diveos-button { min-height: 44px; height: auto; padding: 11px 18px; }
  .diveos-input,
  .diveos-select,
  .diveos-textarea {
    min-height: 44px;
    padding: 12px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diveos-input,
  .diveos-select,
  .diveos-textarea,
  .diveos-button {
    transition: none;
  }
}
/* Phase 8 PR5 T7 — fitting-room size pill picker. Sits above each
   slot dropdown in the fitting drawer. Tapping a pill calls the
   fitting-size-filter Stimulus controller to filter the dropdown to
   items in that size. --active styles the currently selected pill. */
.fitting-size-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 28px;
  padding: 2px 10px;
  font: 500 12px/1 var(--font-sans, system-ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}
.fitting-size-pill:hover {
  background: var(--canvas);
}
.fitting-size-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fitting-size-pill--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Tablet hit-target compliance: bump pill height to 36px on small
   viewports so the fitting room is usable on a 10" tablet without
   stylus-precision taps. */
@media (max-width: 640px) {
  .fitting-size-pill { min-height: 36px; padding: 4px 14px; font-size: var(--text-sm); }
}
/* ── select2 (super_select) → DiveOS field substrate ──────────────────────
   Bullet Train's theme super_select.css styles select2's chrome with the BT
   palette (base-300 border, primary-500 accent). select2 hides the native
   <select> and renders its OWN box, so .diveos-select on the hidden element
   never shows — the BT-looking box IS this chrome. Restyle it ONCE here to
   match .diveos-input; every super_select field (27 views) inherits. Loaded
   after the theme; !important beats super_select's !important rules. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  padding: 0 !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color 100ms ease, box-shadow 100ms ease !important;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
  border-color: var(--input-border-hover) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 12px !important;
  line-height: 38px !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}
.select2-container--default .select2-selection__placeholder {
  color: var(--input-placeholder) !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
.select2-container--default .select2-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
}
.select2-container--default .select2-results__option {
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  padding: 8px 12px !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--accent-soft, var(--surface-alt)) !important;
  color: var(--text-primary) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-sm) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--accent-soft, var(--surface-alt)) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  margin-top: 7px !important;
}
/* ── Bullet Train .button family → DiveOS buttons ─────────────────────────
   The arena theme's .button / .button-secondary / .button-alternative /
   .button-red classes (BT palette: primary-500, base-300/500) back the file-
   upload buttons (active_storage "Upload New Image"), the buttons-toggle
   field, and any BT-rendered action control. Restyle the family ONCE here so
   every instance matches .diveos-button, no per-view edits. Loaded after the
   theme; ties on specificity, wins on source order. */
.button,
.button-secondary,
.button-alternative {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
/* primary */
.button {
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.button:hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
/* secondary / alternative (outlined) — the file-upload button look */
.button-secondary,
.button-alternative {
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
}
.button-secondary:hover,
.button-alternative:hover {
  color: var(--text-primary);
  background: var(--surface-alt);
  border-color: var(--border);
}
/* danger */
.button.button-red,
.button-red {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
.button.button-red:hover,
.button-red:hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
/* color-swatch buttons (color picker `.button-color`). Neutral DS shell
   matching the .button-alternative look; the swatch fill comes from the
   inline background-color style. Selected state (the BT `ring-2`) reads
   through --accent so the active swatch picks up the DS accent ring. */
.button-color {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.button-color.ring-2,
.button-color:focus-visible {
  --tw-ring-color: var(--accent);
  outline: none;
}
/* ── File-upload widget chrome (file_field + active_storage_image) ─────────
   The ejected upload partials render a progress bar (`bg-primary-500`) and a
   thumbnail/progress panel (`bg-base-100`) straight from the BT palette.
   Retoken both centrally — the partials keep their markup, these win on
   source order. */
.file-field [data-fields--file-field-target="progressBar"] {
  background: var(--accent);
}
.file-field .bg-base-100 {
  background: var(--surface);
}
/* ────────────────────────────────────────────────────────────────────────
   Kanban board: a horizontally-scrolling lane of fixed-width columns.

   The board breaks out of the centered `.diveos-content` column (same bleed
   math as `.dv-page-band`) so it uses the full pane width — otherwise the
   columns hit the 48px inner padding and get sliced early, reading as a
   broken clip instead of a scrollable board. The first column stays aligned
   with the page content via padding-inline-start; columns scroll under the
   pane edges.

   Scroll-shadow (pure CSS, Lea Verou technique): the two `local` "cover"
   gradients move WITH the content and mask the pinned `scroll` shadow
   gradients — so a soft edge fade appears only when there's more to scroll
   in that direction, signalling "scroll for more" rather than a hard cut.
   ──────────────────────────────────────────────────────────────────────── */
.kanban-board-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  width: var(--bleed-w);                 /* full-bleed to pane; lanes scroll edge-to-edge */
  margin-inline: var(--bleed-mx);
  padding-inline: var(--bleed-pad);      /* first lane aligns to the tier column */
  scroll-padding-inline-start: var(--bleed-pad);

  background:
    linear-gradient(to right, var(--canvas), transparent 28px) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--canvas), transparent 28px) 100% 0 / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(17, 24, 39, 0.08), transparent) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, 0.08), transparent) 100% 0 / 16px 100% no-repeat scroll;
}
/* Kanban drag states - these classes are added dynamically by the Stimulus controller */
/* The dragged card keeps the normal card appearance — the browser renders the
   translucent drag ghost that follows the cursor, so the source needs no fade,
   lift, tilt, or accent edge (0.5 opacity previously read as disabled). */
.kanban-card.dragging {
  opacity: 1;
}
.kanban-cards.drag-over {
  background-color: var(--sky-100);
  border: 2px dashed var(--accent);
  border-radius: 0.5rem;
}
/* DiveOS — M1 Today Dashboard (T9)
   Visual system locked in DESIGN.md. Status palette + spacing scale + typography
   are project-wide; this file scopes them to `.dashboard` to avoid bleeding into
   other Bullet Train surfaces during the v1 fork. */
/* Fonts loaded by tokens.css — no import needed here. */
/* ════════════════════════════════════════════════════════════════════
   WL "Today (open)" benchmark — open-row layout (synced 2026-06-02)
   Mirrors White-label project/pages/index.html `.dv-open-row` family.
   Replaces the boxed-card trip row + KPI cards with the inline stat
   strip + full-bleed status-railed open rows. DM class names kept where
   they already existed (.status-pill); new structural primitives below.
   ════════════════════════════════════════════════════════════════════ */
/* Inline-text stat strip (replaces boxed KPI cards). WL §6. */
.stat-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 56px;
  margin: 0;
}
.stat-strip__item { display: flex; align-items: baseline; gap: 10px; }
.stat-strip__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--accent);
}
.stat-strip__num--briefing { color: var(--status-briefing-fg); }
.stat-strip__label { font-size: var(--text-sm); color: var(--muted); }
/* Section label — MORNING / AFTERNOON. WL §2 (no trip count). WL uses
   px-14 pt-8 pb-4 = 56px L/R, 32px top, 16px bottom. */
.day-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 56px 16px;
}
.day-section__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
/* Open-row grid — WL §5. rail | time | body | divers | chevron. */
.dv-open-row {
  display: grid;
  grid-template-columns: 16px 124px 1fr 168px 24px;
  gap: 28px;
  align-items: start;
  padding: 22px 56px 22px 40px;
  border-top: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-med) ease;
}
/* The last row closes the list with a bottom hairline. Each .dv-open-row now
   sits in its own [role=listitem] wrapper (#144), so :last-of-type on the <a>
   would match every row — target the last wrapper instead. */
[role="listitem"]:last-child > .dv-open-row { border-bottom: 1px solid var(--hairline); }
/* Kill Bullet Train's global a:hover underline on the whole clickable row. */
.dv-open-row:hover { background: var(--hover-warm); text-decoration: none; }
.dv-open-row:hover, .dv-open-row:hover * { text-decoration: none; }
/* Full-bleed band: extends a section's background to the .diveos-main edges
   (past the centered .diveos-content gutters), then re-insets its content to
   the column so it aligns with the body. Content-edge bleed: cancel the fluid
   --gutter to span the tier column, then re-pad by --gutter. Used for the white
   Today header band. */
.dv-full-bleed {
  width: var(--bleed-w);
  margin-inline: var(--bleed-mx);
  padding-inline: var(--bleed-pad);
}
.dv-open-row:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}
.dv-open-row__rail {
  width: 3px;
  height: 52px;
  background: var(--bar-pending);
  border-radius: 3px;
  margin-top: 8px;
  transition: background var(--t-med) ease;
}
.dv-open-row[data-status="briefing"]  .dv-open-row__rail { background: var(--bar-briefing); }
.dv-open-row[data-status="in_water"]   .dv-open-row__rail { background: var(--bar-inwater); }
.dv-open-row[data-status="confirmed"] .dv-open-row__rail { background: var(--bar-confirmed); }
.dv-open-row[data-status="cancelled"] .dv-open-row__rail { background: var(--bar-cancelled); }
.dv-open-row[data-status="briefing"]:hover  .dv-open-row__rail { background: var(--status-briefing-fg); }
.dv-open-row[data-status="in_water"]:hover   .dv-open-row__rail { background: var(--status-in-water-fg); }
.dv-open-row[data-status="confirmed"]:hover .dv-open-row__rail { background: var(--status-confirmed-fg); }
.dv-open-row[data-status="cancelled"]:hover .dv-open-row__rail { background: var(--status-cancelled-fg); }
/* Time column */
.dv-open-row__time {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dv-open-row__time-sep { color: var(--muted-2); margin: 0 1px; }
.dv-open-row__time-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Body: title + route + guide/vessel */
.dv-open-row__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dv-open-row__stops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.dv-open-row__stops .sep { color: var(--muted-2); }
.dv-open-row__crew {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.dv-open-row__crew b { font-weight: 600; color: var(--ink); }
.dv-open-row__vessel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-left: 14px;
  border-left: 1px solid var(--hairline);
}
/* Divers count column */
.dv-open-row__count {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dv-open-row__count--confirmed { color: var(--status-confirmed-fg); }
.dv-open-row__count--briefing  { color: var(--status-briefing-fg); }
.dv-open-row__count-max { color: var(--muted-2); font-size: var(--text-md); font-weight: 400; }
.dv-open-row__count-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* Progress underline (track + status-colored fill). DM had no equivalent
   primitive — the old row used an inline Tailwind bar. GAP-001 flagged. */
.progress-underline {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.progress-underline__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--t-med) ease;
}
.progress-underline__fill--confirmed { background: var(--status-confirmed-fg); }
.progress-underline__fill--briefing  { background: var(--status-briefing-fg); }
.progress-underline__fill--in_water  { background: var(--status-in-water-fg); }
.progress-underline__fill--cancelled { background: var(--status-cancelled-fg); }
/* Chevron — revealed on row hover */
.dv-open-row__chev {
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--muted-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) ease, transform var(--t-med) var(--ease-out-quart);
}
.dv-open-row:hover .dv-open-row__chev { opacity: 1; transform: translateX(0); }
/* Cancelled-state row styling (WL page-local <style>, promoted here) */
.dv-open-row[data-status="cancelled"] .dv-open-row__title,
.dv-open-row[data-status="cancelled"] .dv-open-row__time { color: var(--muted); }
.dv-open-row[data-status="cancelled"] .dv-open-row__stops {
  text-decoration: line-through;
  text-decoration-color: var(--hairline);
}
@media (max-width: 720px) {
  .dv-open-row {
    grid-template-columns: 12px 88px 1fr;
    gap: 16px;
    padding: 18px 16px;
  }
  .dv-open-row__count-col { display: none; }
  .dv-open-row__chev { display: none; }
  .stat-strip { gap: 10px 28px; }
  .day-section { padding: 24px 16px 12px; }
}
.dashboard {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 96px;
}
@media (min-width: 768px) {
  .dashboard { padding: 32px 24px 96px; }
}
/* Offline banner — sticky at top */
.dashboard__offline-banner {
  position: sticky;
  top: 0;
  margin: -24px -16px 16px;
  padding: 8px 16px;
  background: #FEF3C7;
  color: #92400E;
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 10;
}
/* T-M2 Service-Due dashboard widget. Briefing palette (amber) per
   DESIGN.md — recoverable, not destructive. Sits between header + trips. */
.dashboard__service-due {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FBBF24;
  border-radius: var(--radius-md);
}
.dashboard__service-due-icon { flex-shrink: 0; padding-top: 1px; }
.dashboard__service-due-body { flex: 1; }
.dashboard__service-due-label {
  margin: 0 0 2px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dashboard__service-due-meta {
  margin: 0;
  font-size: var(--text-sm);
}
.dashboard__service-due-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}
.dashboard__service-due-link:hover { text-decoration: none; }
/* Header */
.dashboard__header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.dashboard__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.dashboard__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.dashboard__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
@media (min-width: 768px) {
  .dashboard__title { font-size: var(--text-3xl); }
}
.dashboard__summary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}
.dashboard__summary-stat {
  font-variant-numeric: tabular-nums;
}
.dashboard__summary-sep { color: var(--text-muted); margin: 0 6px; }
/* Trip list */
.dashboard__trips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Trip row */
.trip-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.trip-row__link {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 88px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .trip-row__link { grid-template-columns: 80px 1fr auto; }
}
/* QA-002: at narrow viewports the BT account sidebar leaves ~300px for the
   dashboard column; the auto-width meta column was eating into the body
   (site + boat + guide) and hiding it via overflow:hidden. Hide the chevron
   (the whole row is already a link — chevron is redundant) and tighten the
   capacity chip to give the body room. */
@media (max-width: 640px) {
  .trip-row__chevron { display: none; }
  .trip-row__meta { gap: 6px; }
  .trip-row__capacity { padding: 2px 6px; font-size: var(--text-xs); }
}
.trip-row__link:hover { background: var(--surface-alt); }
.trip-row__link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.trip-row__time {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .trip-row__time { font-size: var(--text-3xl); }
}
.trip-row__body { min-width: 0; }
.trip-row__primary {
  font-size: var(--text-md);
  font-weight: 500;
  margin: 0 0 2px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trip-row__secondary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trip-row__sep { color: var(--text-muted); margin: 0 6px; }
.trip-row__missing { color: var(--text-muted); font-style: italic; }
/* OBS-002: +N badge for multi-site / multi-guide trips. Small, neutral,
   tucked inline. font-variant-numeric: tabular-nums keeps "+12" and "+1"
   aligned on the same row. */
.trip-row__extra {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}
.trip-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.trip-row__capacity {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  padding: 2px 8px;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
}
.trip-row__chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
/* Row state modifiers — kept light per DESIGN.md visual restraint. The
   status pill chip carries the meaning. --now adds a slim accent edge
   indicator on the left; no full-row background tint (that competed
   with the status pill colors and made the page feel busy). */
.trip-row--now {
  border-left: 3px solid var(--accent);
}
.trip-row--completed { opacity: 0.65; }
.trip-row--cancelled { opacity: 0.65; }
.trip-row--cancelled .trip-row__time {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
/* Signature pulse — fires when a Turbo Stream replaces the row */
@keyframes dashboard-pulse {
  0%   { background-color: var(--accent-tint); }
  100% { background-color: var(--surface); }
}
.trip-row--pulse { animation: dashboard-pulse 200ms cubic-bezier(0, 0, 0.2, 1); }
/* Status pills — MOVED to the os-ds gem (os_ds/patterns.css, "Status pill").
   The gem now owns the whole component: the .status-pill base, .status-icon,
   the --sm/--square modifiers, both dot spellings, the seven colour variants,
   and the button.status-pill interactive states. Do NOT redefine any
   `.status-pill*` rule here — a local copy silently overrides the gem and the
   two systems drift apart. The app keeps only the Ruby side: status nicknames,
   labels, and the domain->variant mapping (app/helpers/status_palette_helper.rb). */
/* Empty state */
.dashboard__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 96px 16px 64px;
  color: var(--text-secondary);
}
.dashboard__empty-art {
  color: var(--gray-300);
  width: 240px;
  height: 160px;
  margin-bottom: 32px;
  opacity: 0.7;
}
.dashboard__empty-art svg { width: 100%; height: 100%; }
.dashboard__empty-line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.dashboard__empty-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 360px;
}
.dashboard__empty-photo {
  width: 100%;
  max-width: 480px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.dashboard__empty-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.dashboard__empty-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
  transition: background-color 150ms ease;
}
.dashboard__empty-cta:hover { background: var(--accent-strong); }
.dashboard__empty-cta:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
/* Skeleton loader */
@keyframes skeleton-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { opacity: 0.5; }
}
.trip-row--skeleton .trip-row__time,
.trip-row--skeleton .trip-row__body,
.trip-row--skeleton .trip-row__meta {
  pointer-events: none;
}
.skeleton-bar {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-bar--time      { height: 28px; width: 64px; }
.skeleton-bar--primary   { height: 16px; width: 70%; margin-bottom: 6px; }
.skeleton-bar--secondary { height: 14px; width: 50%; }
.skeleton-bar--chip      { height: 20px; width: 80px; }
/* Partial-state warning icon — accompanies "— site TBD" / "— guide unassigned" */
.trip-row__missing-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: var(--status-briefing-fg, #92400E);
  margin-right: 2px;
}
.trip-row__missing-text { /* hook for emphasis if needed */ }
/* Error state — design spec D4 */
.dashboard__error {
  margin: 24px auto;
  padding: 32px 24px;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  text-align: center;
}
.dashboard__error-line {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 16px;
}
.dashboard__error-actions { margin-bottom: 16px; }
.dashboard__error-retry {
  display: inline-block;
  padding: 8px 20px;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}
.dashboard__error-retry:hover { opacity: 0.9; }
.dashboard__error-details {
  margin-top: 16px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: left;
}
.dashboard__error-details summary { cursor: pointer; }
.dashboard__error-details pre {
  margin-top: 8px;
  padding: 8px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-x: auto;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trip-row--pulse { animation: none; }
  .skeleton-bar { animation: none; }
  .trip-row, .dashboard__empty-cta { transition-duration: 1ms !important; }
}
/* Phase 5 — Trip workflow split layout + stepper + timeline.
   Fonts loaded by tokens.css — no import needed here. */
/* ─── Split layout ──────────────────────────────────────────── */
.dv-trip-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
@media (max-width: 1023px) {
  .dv-trip-split { grid-template-columns: 1fr; }
  .dv-trip-split__rail { order: -1; }
}
/* ─── Trip header ───────────────────────────────────────────── */
.dv-trip-header { margin-bottom: 24px; }
.dv-trip-header__breadcrumb {
  font-size: var(--text-sm);
  color: var(--text-muted, #6B7280);
  margin-bottom: 8px;
}
.dv-trip-header__crumb-link {
  color: var(--accent, #0369A1);
  text-decoration: none;
}
.dv-trip-header__crumb-link:hover { text-decoration: underline; }
.dv-trip-header__crumb-current { color: var(--text-primary, #111827); }
.dv-trip-header__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  color: var(--text-primary, #111827);
  margin: 0 0 8px;
}
.dv-trip-header__time {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--text-muted, #6B7280);
  margin-left: 12px;
}
.dv-trip-header__meta {
  font-size: var(--text-sm);
  color: var(--text-muted, #6B7280);
}
/* ─── Tab bar ───────────────────────────────────────────────── */
.dv-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border, #E5E7EB);
  margin-bottom: 24px;
}
.dv-tab {
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted, #6B7280);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.dv-tab:hover { color: var(--text-primary, #111827); }
.dv-tab--active,
.dv-tab[aria-selected="true"] {
  color: var(--accent, #0369A1);
  border-bottom-color: var(--accent, #0369A1);
}
.dv-tab__count {
  font-size: var(--text-xs);
  color: var(--text-muted, #9CA3AF);
  margin-left: 4px;
}
.dv-tab--active .dv-tab__count { color: var(--accent, #0369A1); }
/* ─── Stepper ───────────────────────────────────────────────── */
.dv-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 16px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  margin-bottom: 16px;
}
.dv-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dv-stepper__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--surface-alt, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
  border: 1.5px solid var(--border, #E5E7EB);
  transition: all 200ms ease-out;
}
.dv-stepper__step--done .dv-stepper__circle {
  background: #15803D;
  color: #FFFFFF;
  border-color: #15803D;
}
.dv-stepper__step--current .dv-stepper__circle {
  background: var(--accent, #0369A1);
  color: #FFFFFF;
  border-color: var(--accent, #0369A1);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.15);
}
.dv-stepper__label {
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #9CA3AF);
  text-align: center;
}
.dv-stepper__step--done .dv-stepper__label { color: #15803D; }
.dv-stepper__step--current .dv-stepper__label { color: var(--accent, #0369A1); font-weight: 600; }
/* ─── Next Action card ──────────────────────────────────────── */
.dv-next-action {
  padding: 16px;
  background: rgba(3, 105, 161, 0.04);
  border: 1px solid rgba(3, 105, 161, 0.15);
  border-radius: 10px;
  margin-bottom: 16px;
}
.dv-next-action__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary, #111827);
  margin-bottom: 4px;
}
.dv-next-action__hint {
  font-size: var(--text-sm);
  color: var(--text-muted, #6B7280);
  margin: 0 0 12px;
}
.dv-next-action__btn {
  display: inline-flex;
  padding: 8px 16px;
  background: var(--accent, #0369A1);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.dv-next-action__btn:hover { background: var(--accent-strong); }
/* (The boxed .dv-timeline operation-timeline block retired — the trip
   page's timeline moved to shared/patterns/rail_card + timeline, and the
   class names collided with the drawer stop timeline in account/dives.css.) */
/* ─── Guide row ─────────────────────────────────────────────── */
.dv-guide-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.dv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  border: 1px solid;
}
.dv-badge--lead { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
.dv-badge--assistant { color: var(--inwater); background: var(--inwater-bg); border-color: var(--inwater-border); }
/* Non-status modifiers: count chip (accent) + neutral tag. Not uppercase/tracked
   like the base — these are inline counts/labels, so they reset those props. */
.dv-badge--count { color: var(--accent); background: var(--accent-soft); border-color: transparent; text-transform: none; letter-spacing: 0; }
.dv-badge--neutral { color: var(--ink); background: var(--surface-alt); border-color: transparent; text-transform: none; letter-spacing: 0; }
/* Muted entity-TYPE tag — stays uppercase/tracked (unlike --neutral), muted on
   a quiet surface fill. For role/type labels (Instructor, Divemaster). */
.dv-badge--muted { color: var(--muted); background: var(--surface-alt); border-color: transparent; }
/* Status variants — quiet status badges (same triplets as the status pills).
   Promoted from .bk-detail scope so .dv-badge is a complete GLOBAL component:
   the showcase + any surface can render a status badge, and hand-rolled
   lookalikes can migrate to it. The .bk-detail copies (bookings.css) are now
   redundant but harmless (identical values, just higher specificity). */
/* Variant names match the status enum KEYS exactly (in_water, not inwater) so a
   surface can map programmatically: dv-badge--#{presentation[:key]}. */
.dv-badge--confirmed { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
.dv-badge--pending   { color: var(--pending);   background: var(--pending-bg);   border-color: var(--pending-border); }
.dv-badge--briefing  { color: var(--briefing);  background: var(--briefing-bg);  border-color: var(--briefing-border); }
.dv-badge--in_water  { color: var(--inwater);   background: var(--inwater-bg);   border-color: var(--inwater-border); }
.dv-badge--returning { color: var(--status-returning-fg); background: var(--status-returning-bg); border-color: var(--status-returning-border); }
.dv-badge--completed { color: var(--status-completed-fg); background: var(--status-completed-bg); border-color: var(--status-completed-border); }
.dv-badge--cancelled { color: var(--cancelled); background: var(--cancelled-bg); border-color: var(--cancelled-border); }
/* Shape + size + leading-dot modifiers. */
.dv-badge--square { border-radius: var(--radius-sm); }
.dv-badge--sm { font-size: var(--text-2xs); padding: 1px 6px; }
/* Value chip size — sentence-case data values (gear sizes, tag lists), not a
   10px uppercase status label. Pairs with --neutral. */
.dv-badge--lg {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 4px 10px;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
}
/* Removable badge: inline delete affordance with a 44×44 hit target (WCAG
   AAA touch size) that overhangs the chip via negative margins so the chip
   keeps its visual density. Hosts a Lucide x icon. */
.dv-badge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -14px -16px -14px -8px;
  border-radius: var(--radius-pill);
  color: var(--muted-2);
}
.dv-badge__remove:hover { color: var(--cancelled); }
.dv-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Trip Plan stops timeline (.dv-stops) — the reorderable dive rows live in
   their own .dv-stops__rows scope (dives-reorder walks siblings, so the
   Board/Return bookends must sit outside it). That makes the last dive row the
   :last-child of .dv-stops__rows, where timeline.css hides the connector line —
   but here it still needs to reach down to the Return bookend below. Re-show it. */
.dv-stops__rows .dv-stops__row:last-child .dv-stops__line { display: block; }
/* v4 Plan inline-edit units (dive_stops_controller): the display wrapper
   flattens its children (grip · title · actions) into the .dv-stops__card--stop
   flex row via display:contents, then collapses when the inline edit form is
   revealed. */
.dv-stops__display { display: contents; }
.dv-stops__display[hidden] { display: none; }
/* End "Add stop" cap — the card-lane cell (grid col 3) holding the button + its
   hidden inline create form. */
.dv-stops__endwrap { min-width: 0; }
/* Modal component — native <dialog>.arena-modal (backdrop, centered card,
   header/body/footer). Used by shared/_modal and the invoice record-payment
   dialog. Without this import the dialog renders as an unstyled white box with
   no backdrop (the panel is opacity:0 until [data-state="open"], the card
   chrome and dim backdrop all live here). */
/* Modal Component Styles
 * Built on native <dialog> element.
 * Visual design from ArenaDiveClub, accessibility from Primer.
 */
/* Reset native dialog defaults.
 * IMPORTANT: Do NOT set `display` here — the browser default
 * `dialog:not([open]) { display: none }` must remain in effect
 * so the closed dialog doesn't create an invisible overlay
 * that blocks clicks and drag events on the page content. */
dialog.arena-modal {
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
/* When open (via showModal), use flex to center the panel.
 * The dialog enters the top layer with position:fixed + inset:0
 * from the browser UA styles, so width/height:100% fills the viewport. */
dialog.arena-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}
/* Backdrop - ArenaDiveClub: bg-slate-900/60 backdrop-blur-sm */
dialog.arena-modal::backdrop {
  background-color: rgb(15 23 42 / 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
dialog.arena-modal[data-state="open"]::backdrop {
  opacity: 1;
}
dialog.arena-modal[data-state="closing"]::backdrop {
  opacity: 0;
  transition: opacity 150ms ease-in;
}
/* Panel - ArenaDiveClub: bg-white rounded-2xl shadow-2xl max-h-[90vh] */
dialog.arena-modal [data-modal-panel] {
  background-color: white;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  /* Entrance animation */
  opacity: 0;
  transform: scale(0.95) translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
dialog.arena-modal[data-state="open"] [data-modal-panel] {
  opacity: 1;
  transform: scale(1) translateY(0);
}
dialog.arena-modal[data-state="closing"] [data-modal-panel] {
  opacity: 0;
  transform: scale(0.95) translateY(8px);
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}
/* Header - ArenaDiveClub: px-6 py-4 border-b border-slate-100 bg-slate-50 */
dialog.arena-modal [data-modal-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  background-color: #f8fafc;
  flex-shrink: 0;
}
/* Scrollable body */
dialog.arena-modal [data-modal-body] {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  color: #1f2937; /* gray-800 */
}
.dark dialog.arena-modal [data-modal-body] {
  color: #d1d5db; /* base-300 equivalent */
}
/* Footer - ArenaDiveClub: px-6 py-4 bg-slate-50 border-t border-slate-100 */
dialog.arena-modal [data-modal-footer] {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #f1f5f9;
  background-color: #f8fafc;
  flex-shrink: 0;
}
/* Dark mode */
.dark dialog.arena-modal [data-modal-panel] {
  background-color: #1e293b;
}
.dark dialog.arena-modal::backdrop {
  background-color: rgb(0 0 0 / 0.7);
}
.dark dialog.arena-modal [data-modal-header] {
  background-color: #1b2636;
  border-bottom-color: #374151;
}
.dark dialog.arena-modal [data-modal-footer] {
  background-color: #1b2636;
  border-top-color: #374151;
}
/* Desktop (>1024px): scale up panel widths — default sizes are too narrow on large screens */
@media (min-width: 1025px) {
  dialog.arena-modal [data-modal-panel].max-w-sm  { max-width: 28rem; }   /* keep intentionally small */
  dialog.arena-modal [data-modal-panel].max-w-md  { max-width: 36rem; }   /* 28→36rem */
  dialog.arena-modal [data-modal-panel].max-w-lg  { max-width: 42rem; }   /* 32→42rem */
  dialog.arena-modal [data-modal-panel].max-w-xl  { max-width: 52rem; }   /* 36→52rem */
  dialog.arena-modal [data-modal-panel].max-w-2xl { max-width: min(80vw, 64rem); } /* 42→64rem, capped */
}
/* Tablet (641px–1024px): moderate size bump + reduced max-height */
@media (min-width: 641px) and (max-width: 1024px) {
  dialog.arena-modal[open] {
    padding: 1rem;
  }

  dialog.arena-modal [data-modal-panel] {
    max-height: 88vh;
  }

  dialog.arena-modal [data-modal-panel].max-w-lg  { max-width: 36rem; }   /* 32→36rem */
  dialog.arena-modal [data-modal-panel].max-w-xl  { max-width: 44rem; }   /* 36→44rem */
  dialog.arena-modal [data-modal-panel].max-w-2xl { max-width: min(90vw, 52rem); }
}
/* Mobile (≤640px): bottom sheet — slides up from bottom of screen */
@media (max-width: 640px) {
  dialog.arena-modal[open] {
    padding: 0;
    align-items: flex-end;
  }

  dialog.arena-modal [data-modal-panel] {
    max-height: 90dvh;
    border-radius: 1rem 1rem 0 0;
    width: 100%;
    /* Override entrance: slide up instead of scale */
    transform: translateY(1.5rem);
  }

  dialog.arena-modal[data-state="open"] [data-modal-panel] {
    transform: translateY(0);
  }

  dialog.arena-modal[data-state="closing"] [data-modal-panel] {
    transform: translateY(1.5rem);
  }

  /* Drag-handle indicator */
  dialog.arena-modal [data-modal-header] {
    position: relative;
    padding-top: 1.25rem;
  }

  dialog.arena-modal [data-modal-header]::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 0.25rem;
    background-color: #cbd5e1;
    border-radius: 9999px;
  }

  .dark dialog.arena-modal [data-modal-header]::before {
    background-color: #4b5563;
  }

  /* Respect notch / home-bar on iOS */
  dialog.arena-modal [data-modal-body] {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  dialog.arena-modal::backdrop,
  dialog.arena-modal [data-modal-panel] {
    transition: none;
  }
}
/* ─── Payment dialog (native <dialog>, separate from .arena-modal) ───
   Browsers position <dialog> via `margin:auto`. Override on mobile
   so the panel snaps to the bottom of the viewport (bottom sheet).
   Mirrors the .arena-modal mobile pattern but without the JS state
   transitions, since payment-dialog uses native showModal/close. */
@media (max-width: 640px) {
  dialog.payment-dialog {
    margin: auto auto 0;
    max-width: 100%;
    width: 100%;
    border-radius: 1rem 1rem 0 0;
  }
}
/* DiveOS component library (ported from design-system-theming / WL).
   .dv-btn family, the unified list header (.dv-page-head/.dv-page-tools/
   .dv-scope-tab/.dv-filter-btn), and the boxed stat-card grid. Token-driven. */
/* ─────────────────────────────────────────────────────────────────────
   Shared component layer — button primitives.

   Consolidates the primary-action button that was previously repeated as an
   identical inline utility string across seven index/header views:

     inline-flex items-center gap-1.5 h-9 px-3.5 text-sm font-medium
     text-white bg-accent rounded-btn hover:bg-accent-strong
     transition-colors no-underline

   (New Trip · Trip · Add diver · Add · Add vessel · New booking).

   PARITY NOTE — these values are matched BYTE-FOR-BYTE to the Tailwind output
   of the inline string above, NOT to WL's `.dv-btn` spec. WL's `.dv-btn` uses
   16px horizontal padding + 13px font; DM's shipped buttons use px-3.5 (14px) +
   text-sm (14px). To guarantee ZERO visual change we keep DM's exact metrics
   under the WL class name. If/when the two are unified, change here once.

   Tailwind → CSS mapping used:
     inline-flex      → display:inline-flex
     items-center     → align-items:center
     gap-1.5          → gap:0.375rem (6px)
     h-9              → height:2.25rem (36px)
     px-3.5           → padding-left/right:0.875rem (14px)
     text-sm          → font-size:0.875rem; line-height:1.25rem
     font-medium      → font-weight:500
     rounded-btn      → border-radius:6px (var(--radius-btn) / borderRadius.btn)
     transition-colors→ transition: color/bg/border 150ms cubic-bezier(.4,0,.2,1)
     no-underline     → text-decoration-line:none

   Token-driven; consumes the semantic aliases from tokens.css. @imported from
   application.css right after components/header_band.css.
   ───────────────────────────────────────────────────────────────────── */
/* ── Base button ──────────────────────────────────────────────────────
   Layout + typography shared by every variant. Color/background come from
   the modifier so the base alone is never used directly. */
.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 6px;
  text-decoration-line: none;
  cursor: pointer;
  white-space: nowrap;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* Keyboard focus ring — focus-visible only, so mouse clicks don't ring. */
.dv-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Pressed feedback — shared across every variant. */
.dv-btn:active {
  transform: translateY(1px);
}
.dv-btn:disabled,
.dv-btn[disabled] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
/* aria-disabled twin — same dimmed look, but the button stays focusable so
   assistive tech can reach it and hear why it's inert (turnaround bulk bars
   disable until a selection exists; the Stimulus guard blocks the submit). */
.dv-btn[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
/* ── Primary (accent fill) ────────────────────────────────────────────
   Replaces: bg-accent text-white hover:bg-accent-strong. */
/* An <a class="dv-btn"> must not inherit link-hover styling (underline +
   link color) from global `a:hover` rules — those out-specify the variant's
   base `color` on hover. Lock decoration off on every interactive state, and
   re-assert each variant's text color on :hover below. */
.dv-btn:hover,
.dv-btn:focus,
.dv-btn:focus-visible,
.dv-btn:active { text-decoration-line: none; }
.dv-btn--primary {
  color: #fff;
  background-color: var(--accent);
}
.dv-btn--primary:hover {
  color: #fff;
  background-color: var(--accent-strong);
}
/* ── Large size ───────────────────────────────────────────────────────
   Taller, heavier weight. For prominent full-width CTAs (e.g. the sidebar
   "New Dive Plan"). Pair with a layout class for width/block behaviour. */
.dv-btn--lg {
  height: 2.625rem;        /* 42px */
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;     /* 14px */
  font-weight: 600;
}
/* ── Field-height size ────────────────────────────────────────────────
   46px tall — the canonical form-control height (matches .dv-field /
   .diveos-input on a filter row). Use for submit/clear buttons that sit
   inline with selects + date pickers so every control aligns on one
   baseline. Height-only; weight + 14px font stay the base size. */
.dv-btn--field {
  height: 46px;
}
/* ── Touch size — 48pt minimum target ─────────────────────────────────
   Practical UI Ch.7 + Fitts's Law: primary / touch-facing actions should be
   at least 48pt tall so they're fast and easy to hit. The base .dv-btn (36px)
   is right for dense DESKTOP admin rows; reach for .dv-btn--touch on the
   PRIMARY CTA of public + mobile flows (booking, waiver, checkout). */
.dv-btn--touch {
  height: 48px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-weight: 600;
}
/* ── Secondary (surface + hairline outline) ───────────────────────────
   Outline button: surface fill, hairline border, ink text, hover warms to
   canvas. WL `.dv-btn--secondary`. Used for "View public" / "Copy" on the
   booking-detail page.

   NOTE: the booking-detail "View public" button previously carried its own
   inline string (text-[13px], rounded-md). It is now unified to the canonical
   `.dv-btn` metrics (14px font, 6px radius). The radius is identical (rounded-md
   and rounded-btn both compute to 6px); only the font shifts 13px → 14px. This
   1px change is accepted in favour of a single shared button size (consistency
   over preserving a one-off). */
.dv-btn--secondary {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.dv-btn--secondary:hover {
  color: var(--ink);
  background-color: var(--canvas);
}
/* ── Ghost (chromeless) ───────────────────────────────────────────────
   No fill, no border — an accent-text action that reads as a button but sits
   flat in a tinted container (callout trailing action, wizard "Back"). Hover
   tints with the accent-soft wash. Was referenced (callout, wizard footer)
   before it existed, so those rendered as bare links — now a real variant. */
.dv-btn--ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--accent);
}
.dv-btn--ghost:hover {
  color: var(--accent-strong);
  background-color: var(--accent-soft);
}
/* ── View toggle (segmented control) ──────────────────────────────────
   A small inset segmented control for switching a surface between views
   (Bookings: Kanban / Table / Calendar). Options are <a> links, so they reset
   BT's global a:hover underline. Active = raised surface chip + accent text.
   Replaces the per-page utility-soup version (raw text-[12px], hover underline,
   no shared identity). */
.dv-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.dv-view-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.dv-view-toggle__opt:hover { color: var(--ink); background: var(--surface-alt); text-decoration: none; }
.dv-view-toggle__opt--active,
.dv-view-toggle__opt--active:hover {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
/* ── Danger (outlined cancelled) ──────────────────────────────────────
   Transparent fill, cancelled-tinted border + text, hover fills with the
   cancelled-bg wash. WL `.dv-btn--danger`. Used for "Cancel booking".

   NOTE: the inline original used bg-surface (opaque) rather than transparent.
   Over the page's surface background these render identically; transparent is
   the WL-canonical token treatment and is adopted here. */
.dv-btn--danger {
  background-color: transparent;
  border: 1px solid var(--cancelled-border);
  color: var(--cancelled);
}
.dv-btn--danger:hover {
  color: var(--cancelled);
  background-color: var(--cancelled-bg);
}
/* ── Icon-only (square) ───────────────────────────────────────────────
   Square button, no horizontal padding, centred glyph. WL `.dv-btn--icon`.
   Used for the Ledger date-navigation arrows.

   NOTE: the Ledger arrows were previously `.ledger-nav-arrow` — a 32px square
   with a hairline border and muted-ink glyph. The shared `.dv-btn--icon` is a
   36px square (matching the canonical `.dv-btn` height) with a muted glyph.
   To preserve the Ledger's 32px sizing AND its hairline outline, the arrows
   use `.dv-btn dv-btn--secondary dv-btn--icon dv-btn--sm` (secondary supplies
   the surface + hairline + ink, sm drops it to 32px). This keeps the existing
   look while consuming only shared classes. */
.dv-btn--icon {
  width: 2.25rem;       /* 36px — square, matches base height */
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  color: var(--muted);
}
.dv-btn--icon:hover {
  background-color: var(--state-hover);
}
/* ── Small size modifier (h-8) ────────────────────────────────────────
   Denser button for inline/contextual actions. WL `.dv-btn--sm`:
   height 32px, padding 0 12px, font 12px. Used for the booking-detail
   "Assign" (primary sm) and "Copy" (secondary sm) buttons, and — combined
   with `--icon` — the Ledger nav arrows (32px square). */
.dv-btn--sm {
  height: 2rem;         /* 32px / h-8 */
  padding-left: 0.75rem;  /* 12px / px-3 */
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
.dv-btn--sm.dv-btn--icon {
  width: 2rem;          /* 32px square */
  padding-left: 0;
  padding-right: 0;
}
/* Mini button — for an inline action that sits BESIDE a status badge and must
   align to its height, not the 32px --sm (e.g. waiver roster "Send link" next
   to the "Not signed" pill). 22px tall ≈ the .dv-badge--square height. */
.dv-btn--xs {
  height: 1.375rem;       /* 22px */
  padding-left: 0.5rem;   /* 8px */
  padding-right: 0.5rem;
  font-size: var(--text-2xs);
  gap: 4px;
}
.dv-btn--xs.dv-btn--icon { width: 1.375rem; padding-left: 0; padding-right: 0; }
/* ── Confirmed (green secondary) ──────────────────────────────────────
   Exactly the --secondary button (surface fill, 1px outline, base type), only
   recoloured to the confirmed hue: green-700 border + text. Hover fills with
   the confirmed-bg wash. Used for positive transactions — check a diver in,
   mark a diver back aboard (Trip Run v4). */
.dv-btn--confirmed {
  background-color: var(--surface);
  border: 1px solid var(--confirmed);
  color: var(--confirmed);
}
.dv-btn--confirmed:hover {
  color: var(--confirmed);
  background-color: var(--confirmed-bg);
}
/* Canonical text-link treatment (DS link).
   Single source for the accent text-link / "View all" styling that was
   previously duplicated as utility-class soup across kanban / roster / show
   surfaces. Token-clean: accent family only, no raw palette, no dark:. */
.dv-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.dv-link:hover {
  color: var(--accent-strong);
}
.dv-link .lucide,
.dv-link svg {
  flex-shrink: 0;
}
/* Count suffix — the "View all 12" number stays in the accent flow. */
.dv-link__count {
  font-variant-numeric: tabular-nums;
}
/* ─────────────────────────────────────────────────────────────────────
   Shared component layer — header band + toolbar primitives.

   Consolidates two patterns that were previously repeated as inline class
   strings / duplicated page-scoped CSS across the app:

   1. `.dv-page-band` — the full-bleed white header band that sits at the top
      of (and between sections of) every index/detail page. Previously every
      band was written inline as
        `bg-surface border-b border-hairline dv-full-bleed …`
      on the wrapper div. This sheet folds the three shared invariants
      (surface background, bottom hairline, full-bleed horizontal breakout)
      into one named class.

      IMPORTANT — parity note: the *vertical* padding of each band is NOT
      uniform across pages (head bands use `-mt-10 pt-8 pb-6`, stat strips use
      `py-[22px]` on Today but `py-[18px]` on Dives, toolbars use `py-2` or
      `py-3`, and the bookings tab nav supplies its own padding via
      `.page-tabs`). To guarantee ZERO visual change, `.dv-page-band` owns ONLY
      the shared invariants; callers KEEP their existing per-band padding /
      margin Tailwind utilities. No `--head` / `--stats` padding modifiers are
      defined because that would force a single padding value and shift pixels
      on pages that use a different one.

   2. `.dv-toolbar`, `.dv-divider`, `.chip` (+ `.is-on` / `.count`) — toolbar
      filter primitives that were duplicated byte-for-byte in
      `account/divers.css` and `account/team.css`. Promoted here so both pages
      (and any future page) consume one canonical definition.

   Token-driven; consumes the semantic aliases from tokens.css. Loaded after
   patterns.css (see application.css). The full-bleed breakout reuses the EXACT
   same calc as `.dv-full-bleed` in dashboard.css — keep them in sync.
   ───────────────────────────────────────────────────────────────────── */
/* ── Page band (full-bleed white header band) ─────────────────────────
   Shared invariants only. Callers add their own vertical padding/margin
   utilities (e.g. `-mt-10 pt-8 pb-6`, `py-[18px]`, `py-[22px]`, `py-2`,
   `py-3`) to preserve each band's exact rhythm.

   The horizontal breakout duplicates `.dv-full-bleed` (dashboard.css): it
   extends the band to the .diveos-main edges, then re-insets its content to
   the centered column. Because this is baked in, callers no longer need to
   add `dv-full-bleed` alongside `.dv-page-band`. */
.dv-page-band {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  width: var(--bleed-w);                 /* full-bleed background to the pane edges */
  margin-inline: var(--bleed-mx);
  padding-inline: var(--bleed-pad);      /* inner content aligns to the tier column */
}
/* ── Page-band tab nav (band 2) ───────────────────────────────────────
   The second .dv-page-band on a detail page: a full-bleed sticky tab row.
   Promoted (unscoped) from account/bookings.css so every detail header
   (booking, dive trip, …) shares ONE tab component. `.dv-tabnav` pins the
   band under band 1; `.page-tabs`/`.page-tab`/`.page-tab-count` style the
   underline tabs + badge counts. */
.dv-tabnav { position: sticky; top: 0; z-index: 20; }
.page-tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  /* Narrow screens: scroll the tab row horizontally rather than wrap/clip
     ("Run →" onto two lines, "Return" off the edge). No-op when they fit. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 12px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast, 0.15s) ease;
}
.page-tab:hover { color: var(--ink); }
.page-tab.is-active,
.page-tab[aria-selected="true"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.page-tab-count {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--muted-2);
}
.page-tab.is-active .page-tab-count,
.page-tab[aria-selected="true"] .page-tab-count {
  color: var(--accent);
  border-color: var(--accent-border);
}
/* A thin separator between in-page tabs and a nav-away tab (e.g. Run opens
   the run flow on its own surface). */
.page-tab-div {
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--hairline);
  flex-shrink: 0;
}
/* ── Toolbar (filter chips + search) ──────────────────────────────────
   Promoted from account/divers.css + account/team.css (identical copies). */
/* ── Page-band typography — canonical h1, h2, sub-copy ───────────────
   Every page header h1 inside .dv-page-band inherits the WL-exact style
   automatically. Views just write <h1>Title</h1> — no Tailwind utilities
   needed on the element. Same for the muted sub-copy <p>. */
.dv-page-band h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.dv-page-band h1 + p,
.dv-page-band .page-sub-copy {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 4px;
}
.dv-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Vertical separator between chip groups inside a toolbar. */
.dv-toolbar .dv-divider {
  width: 1px;
  height: 22px;
  background: var(--hairline);
  margin: 0 4px;
  flex-shrink: 0;
}
/* ── Chip (filter pill) ───────────────────────────────────────────────
   Promoted from account/divers.css + account/team.css (identical copies). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.chip:hover { background: var(--canvas); }
.chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
.chip .count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-left: 2px;
}
.chip.is-on .count { color: var(--accent); }
/* ─────────────────────────────────────────────────────────────────────
   Shared index-page primitives — page header, search box, table wrap.

   Previously duplicated byte-for-byte in account/divers.css and
   account/team.css (and consumed by account/gear.css + account/fleet.css).
   Promoted here so the canonical definition lives in one place and the next
   `thead th`-style correction only has to happen once. Loaded before all
   account/* page sheets, so page-scoped variants (e.g. team grouped-row
   rules) still cascade on top. ZERO visual change vs the duplicated copies.
   ───────────────────────────────────────────────────────────────────── */
/* ── Search box ───────────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
}
.search-wrap svg,
.search-wrap [data-lucide] {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--muted-2);
  pointer-events: none;
}
.search-wrap input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--ink);
}
.search-wrap input::-moz-placeholder { color: var(--muted-2); }
.search-wrap input::placeholder { color: var(--muted-2); }
.search-wrap input:focus {
  outline: none;
  border-color: var(--hairline-strong);
}
/* ── Table wrap ───────────────────────────────────────────────────── */
.dv-table-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  /* BL-1a — clip vertically (keeps the rounded-corner mask), scroll horizontally
     at every breakpoint so no table clips/squeezes on narrow viewports. The
     border-radius still clips because overflow is non-visible on both axes. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* 14px body-cell floor. Set on the WRAPPER so it's INHERITED by cells — any cell
   that declares its own size (.dv-table__sub → 12px, Tailwind text-xs, thead th)
   overrides inheritance regardless of specificity, but a bare/super-scaffolded
   <td> with no sizing class inherits 14px instead of leaking to the 16px root.
   Complements the .dv-table__* classes (components/table.css); this catches the
   tables that don't use them (BT super-scaffold, box.table, hand-rolled cells). */
.dv-table-wrap,
.box-table { font-size: var(--text-sm); }
.dv-table-wrap table {
  min-width: 100%;
  border-collapse: collapse;
}
.dv-table-wrap thead tr {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.dv-table-wrap thead th {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);  /* WL table-header color (#4B5563); was --muted (gray-500), one step too light */
}
.dv-table-wrap tbody tr { border-bottom: 1px solid var(--hairline-2); }
.dv-table-wrap tbody tr:last-child { border-bottom: none; }
.dv-table-wrap tbody tr:hover { background: var(--sky-50); }
/* Row/cell links (often dv_link_to names) shouldn't underline on hover inside
   a table — the row hover tint is the affordance; underline reads as noise. */
.dv-table-wrap td a:hover,
.box-table td a:hover { text-decoration: none; }
/* Default cell rhythm — list-table rows are 1rem (16px = --space-4) top+bottom.
   This OVERRIDES per-cell py-* utilities (specificity 0,1,1 > a plain .py-3),
   so the row height is uniform across every list table from the component, not
   from scattered per-cell classes. Dense embedded sub-tables opt out with
   .dv-table--compact (8px). */
.dv-table-wrap td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.dv-table-wrap.dv-table--compact td,
.dv-table--compact .dv-table-wrap td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.dv-table-wrap td:first-child,
.dv-table-wrap th:first-child { padding-left: 16px; }
.dv-table-wrap td:last-child,
.dv-table-wrap th:last-child { padding-right: 16px; }
/* The Bullet Train bulk-actions theme ($ThemeStylesheet) leaks
   `.bulk-actions:not(.selectable) th:nth-child(2) { padding-left: 2rem }` — its
   sticky "identity column" inset — onto OUR .dv-table-wrap headers (BT wraps
   index tables in .bulk-actions). That over-pads the 2nd-column header so its
   label no longer sits above its data column (esp. visible on reorderable
   tables where col 2 is the Name). Reset it to the canonical px-3 (12px) gutter
   so headers align with their cells. The leak is (0,3,1) (.bulk-actions +
   :not(.selectable) + th + :nth-child), so we match the .bulk-actions ancestor
   too — (0,3,2) — to win without !important. */
.bulk-actions .dv-table-wrap thead th:nth-child(2) { padding-left: var(--space-3); }
/* The SAME BT leak also lands on the BODY cell:
   `.bulk-actions:not(.selectable) td:nth-child(2) { padding-left: 1.25rem }` (20px)
   over-pads the 2nd-column <td> so the row content (e.g. the Name/Slug link) sits
   8px to the right of its header label (which we pin to 12px above). Reset the td
   to the canonical px-3 (12px) gutter so header text sits directly above row text.
   Leak is (0,3,1); we match the .bulk-actions ancestor + .dv-table-wrap to win
   at (0,3,2) without !important. */
.bulk-actions .dv-table-wrap tbody td:nth-child(2) { padding-left: var(--space-3); }
/* Reorderable tables (drag-handle first column). The leading handle cell is a
   narrow grip, not real content — the first-child 16px inset would push the
   whole table in past the canonical 12px (px-3) gutter and, on the header,
   misalign the labels against their data columns. Pin both the handle <td> and
   its matching leading <th> to 12px so the table's left content lines up at the
   canonical gutter, header above row. */
.dv-table-wrap:has(tbody [data-sortable-target="handle"]) th:first-child,
.dv-table-wrap:has(tbody [data-sortable-target="handle"]) td:first-child { padding-left: var(--space-3); }
/* ── Box table ────────────────────────────────────────────────────────
   The shared themes/light/_box partial already supplies a bordered
   surface card. So `box.table` tables get the canonical .dv-table-wrap
   LOOK (canvas header band, uppercase 10px th, 12px td rhythm, hairline
   rows, hover surface-alt) WITHOUT a second outer border/radius. Mirrors
   the thead/td/hover rules above; intentionally omits the .dv-table-wrap
   outer border + radius (the box owns that chrome). */
/* BL-1a — box.table wrappers scroll horizontally too (the responsive_tables.css
   layer that used to supply this was deleted as dead card-stack CSS). */
.box-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.box-table table { min-width: 100%; border-collapse: collapse; }
.box-table thead tr {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.box-table thead th {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.box-table tbody tr { border-bottom: 1px solid var(--hairline-2); }
.box-table tbody tr:last-child { border-bottom: none; }
.box-table tbody tr:hover { background: var(--sky-50); }
.box-table td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.box-table td:first-child,
.box-table th:first-child { padding-left: 16px; }
.box-table td:last-child,
.box-table th:last-child { padding-right: 16px; }
/* ════════════════════════════════════════════════════════════════════════
   Unified list/index page header (WL handoff — "header-applied-boards").
   ONE general header: row 1 .dv-page-head (title + actions) · row 2
   .dv-page-tools (scope tabs + facet chips + trailing). Replaces the old
   multi-band .dv-page-band stack. Reuses .dv-btn*, .search-wrap, .chip.
   Scope tabs = mutually-exclusive segmentation (one .is-on); chips = facets.
   ════════════════════════════════════════════════════════════════════════ */
/* Row 1 — title bar. White, full-bleed to the pane edges (same calc as
   .dv-full-bleed / .dv-page-band — keep in sync), bleeding up through
   .diveos-content's 40px top padding so the white starts at the pane top. */
.dv-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  margin-top: calc(-1 * var(--shell-pad-top, 40px));
  width: var(--bleed-w);
  margin-inline: var(--bleed-mx);
  padding: 32px var(--bleed-pad) 18px;
}
/* Mobile (<1023px): the fixed hamburger (top-left, 12px inset, 44px tall →
   bottom edge ~56px) sits over the band's top-left content. The breadcrumb is
   the first thing in the band (y≈32) and clipped under it ("Catalog" → "…g").
   Push the whole header content clear of the button so breadcrumb AND title
   (on no-breadcrumb pages) start below it. Desktop has no hamburger. */
@media (max-width: 1023px) {
  /* List header (row 1): the fixed hamburger (left 12–56px) sits in a 64px left
     gutter BESIDE the title — hamburger + title read as one compact row, rather
     than a 72px vertical band that pushed the title below the button. */
  .dv-page-head { padding-top: 16px; padding-left: 64px; }

  /* Detail headers carry a breadcrumb as their first line, so they keep the
     72px top clearance (breadcrumb + title stack under the button). */
  .dv-page-band { padding-top: 72px; }
  .dv-page-band ~ .dv-page-band { padding-top: var(--space-2, 8px); }
  nav.dv-page-band { padding-top: var(--space-3, 12px); padding-left: 64px; }

  /* Page tools (row 2). No permanent hamburger indent: at the page top the row
     sits BELOW the header, clear of the button. The `page-tools` controller
     adds `--pinned` (a 64px gutter) only while the row is STUCK at the top, and
     `--hidden` to slide it out of view on scroll-down (revealed on scroll-up).
     Transform-based so hiding never reflows the page. */
  .dv-page-tools {
    transition: transform .24s var(--ease-out-quart, ease), padding-left .12s ease;
  }
  .dv-page-tools.dv-page-tools--hidden { transform: translateY(-110%); }
  .diveos-main .dv-page-tools.dv-page-tools--pinned { padding-left: 64px; }
}
.dv-page-head h1,
h1.dv-page-head__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.dv-page-head__sub { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; }
.dv-page-head__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Optional breadcrumb inside the head band (Settings/catalogue pages). It sits
   at the top of the title block, above the <h1>. The breadcrumb component is
   margin-free, so the band owns this gap — keeps the breadcrumb IN the header
   band (no stray wrapper div per page). */
.dv-page-head .dv-breadcrumb { margin-bottom: 10px; }
/* Below the two-column comfort width the actions (search · view toggle · CTA)
   can't fit beside the title and — being flex-shrink:0 — bleed off the right
   edge. Wrap them under the title as a full-width row: the search grows to fill,
   the toggle + CTA wrap beneath it. Desktop keeps the title/actions on one line.

   CONTAINER query (not viewport): the header lives in the .diveos-main pane, so
   it must react to the PANE width (viewport minus the 240px sidebar), not the
   window. A viewport query left a dead band — e.g. at a 1024px window the pane
   is only ~784px, narrow enough to crush the sub/description and bleed the
   actions off the edge, yet a `max-width: 880px` window query never fired. The
   container query fires at pane ≤880 in every sidebar state (shown/collapsed). */
@container (max-width: 880px) {
  .dv-page-head { flex-wrap: wrap; row-gap: 16px; }
  .dv-page-head > :first-child { flex: 1 1 100%; }
  .dv-page-head__actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  /* A search input grows to fill the row (it already carries flex-grow); a lone
     CTA button stays its natural width — never stretch a button full-bleed. */
  .dv-page-head__actions > .relative:first-child,
  .dv-page-head__actions > form:first-child { flex: 1 1 240px; max-width: none; }
  .dv-page-head__actions > .relative:first-child .max-w-sm,
  .dv-page-head__actions .search-wrap { max-width: none; }
}
/* Collapsible search wrapper. Desktop/tablet: the field shows inline (grows to
   its max-w-sm) and the toggle button is hidden; the phone rules below flip it. */
.dv-hsearch { display: flex; align-items: center; flex-grow: 1; min-width: 0; }
.dv-hsearch__field { flex-grow: 1; min-width: 0; }
/* Clear the leading search icon. `.diveos-input`'s padding shorthand overrides
   a utility `pl-8`, so pad the field input here (higher specificity). */
.dv-hsearch__field input { padding-left: 2rem; }
.dv-hsearch__toggle { display: none; }
/* PHONES ONLY (≤640): compact single row — title + icon actions. The subtitle
   is dropped and each action button collapses to its icon (the bare-text label
   is zeroed via font-size:0; the Lucide SVG keeps its explicit width/height, so
   the glyph survives). Scoped to phones on purpose: the hamburger appears at
   ≤1023, but the TABLET range (641–1023) has room for the full header, so it
   keeps its subtitle + full-text actions (via the container-query stack above).
   Wide controls (search, view toggle) still wrap. */
@media (max-width: 640px) {
  .dv-page-head { flex-wrap: wrap; align-items: center; row-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; }
  .dv-page-head > :first-child { flex: 1 1 auto; min-width: 0; }
  .dv-page-head__sub { display: none; }
  .dv-page-head__actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }
  /* Collapsible search: flatten any wrapper (search form / filter div) around
     the .dv-hsearch so it participates in the actions flex directly, then show a
     40px search-icon button and hide the field until the search-collapse
     controller opens it. When open, the actions take a full row so the field
     can breathe. Generic `:has(.dv-hsearch)` — not tied to any one controller. */
  .dv-page-head__actions form:has(.dv-hsearch),
  .dv-page-head__actions > div:has(.dv-hsearch) { display: contents; }
  .dv-hsearch { flex: 0 0 auto; }
  .dv-hsearch__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--muted); cursor: pointer;
  }
  .dv-hsearch__field { display: none; }
  .dv-hsearch.is-open { flex: 1 1 100%; }
  .dv-hsearch.is-open .dv-hsearch__toggle { display: none; }
  .dv-hsearch.is-open .dv-hsearch__field { display: block; }
  .dv-page-head__actions:has(.dv-hsearch.is-open) { flex: 1 1 100%; justify-content: flex-start; }
  /* Fallback for pages whose header search isn't the collapsible .dv-hsearch yet
     (e.g. Leads): give the search form its own full-width row so it doesn't
     overflow — the pre-collapse behaviour. */
  .dv-page-head__actions:has(input):not(:has(.dv-hsearch)) { flex: 1 1 100%; justify-content: flex-start; }
  .dv-page-head__actions > form:has(input) { flex: 1 1 100%; min-width: 0; }
  .dv-page-head__actions input { min-width: 0; }
  .dv-page-head__actions .dv-btn {
    gap: 0;
    width: 40px;
    min-width: 40px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    font-size: 0;
  }
  .dv-page-head__actions .dv-btn .lucide,
  .dv-page-head__actions .dv-btn > svg { width: 18px; height: 18px; font-size: initial; }
  /* The view toggle collapses to icon-only segments (each option carries a
     Lucide icon). */
  .dv-page-head__actions .segmented__option span { display: none; }
  .dv-page-head__actions .segmented__option { padding-left: 11px; padding-right: 11px; }
}
/* Row 2 — scope / tools bar. White, full-bleed (matches row 1).
   Sticky: the scope/tools row pins to the top on scroll (the title row above
   scrolls away under it), so the filters stay reachable down a long list. */
.dv-page-tools {
  display: flex;
  align-items: center;
  /* Wrap as a unit below ~1440px: the anchor-stat + scope-tabs + trailing note
     can exceed the pane width (Ledger has 6 money tabs). Without this the row
     stays one line and the scope-tabs wrap internally, leaving a stray tab on
     line 2 while the note floats top-right. row-gap keeps wrapped rows legible. */
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  width: var(--bleed-w);
  margin-inline: var(--bleed-mx);
  padding: 12px var(--bleed-pad);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Body gap — consistent 2rem between a page header and the content below,
   ACROSS ALL ARCHETYPES (#75). The list header is two full-bleed rows:
   row-1 `.dv-page-head`, optional row-2 `.dv-page-tools`; content follows
   whichever is last, the two header rows stay flush. Show/edit/form pages use
   `.page-header` (form/settings header) or a bare `.dv-page-band` (e.g.
   booking show) — those got no top gap before, so the first body element
   stacked flush against the header. The selectors below give every archetype
   the same 2rem gap. padding-top: 0 neutralises `pt-*` on content wrappers so
   the gap is exactly 2rem everywhere.

   Note: `.hero-show__band` (entity show pages) owns its own margin-bottom:2rem
   in patterns.css, so it is intentionally NOT matched here.

   We key the show/edit/form gap on `.page-header` (the form/settings header,
   which is `.dv-page-band.page-header`), NOT on a bare `.dv-page-band`. A bare
   band (e.g. booking show) is followed by a control-row WRAPPER — the
   `tab-panel` controller div that holds the band-2 tab nav — and that wrapper
   must stay flush; its internal nav→panel spacing lives in bookings.css. So a
   bare-`.dv-page-band` selector wrongly pushed the tab nav down 2rem (#75
   regression) and is deliberately absent.

   The `.dv-page-head` row excludes `form:has(> .dv-page-tools)` because a list's
   filter bar is often wrapped in a search `<form>` (e.g. Team) — without the
   exclusion the form (and the sticky tools bar inside it) gets a stray 2rem gap
   instead of sitting flush under the title. */
.dv-page-tools + :not(.dv-page-tools):not(:has(.dv-page-tools)),
.dv-page-head + :not(.dv-page-tools):not(.dv-page-head):not(:has(.dv-page-tools)),
.page-header + :not(.dv-page-tools):not(.dv-page-head):not(.dv-page-band):not(:has(.dv-page-tools)) { margin-top: 2rem; padding-top: 0; }
.dv-spacer { flex: 1 1 auto; }
.dv-vrule { width: 1px; height: 22px; background: var(--hairline); flex-shrink: 0; }
/* Tools select — token-clean native <select> for .dv-page-tools filter rows.
   Native control kept (submit/keyboard); appearance stripped and a Lucide
   chevron overlaid. Matches .search-wrap height/typography. */
.dv-tools-select { position: relative; display: inline-flex; align-items: center; }
.dv-tools-select select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  height: 32px;
  min-width: 10rem;
  padding: 0 30px 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--ink);
  cursor: pointer;
}
.dv-tools-select select:hover { border-color: var(--hairline-strong); }
.dv-tools-select select:focus { outline: none; border-color: var(--hairline-strong); }
.dv-tools-select__chev {
  position: absolute;
  right: 10px;
  color: var(--muted-2);
  pointer-events: none;
}
.dv-page-tools__note {
  font-size: var(--text-xs);
  color: var(--muted-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}
.dv-toolbtn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer; text-decoration: none;
}
.dv-toolbtn:hover { background: var(--canvas); color: var(--ink); }
/* Scope tabs — count/amount-forward, mutually-exclusive (one .is-on) */
.dv-scope-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
/* Ledger tools row (the only one with an anchor-stat + trailing note) restacks
   below ~1400px instead of leaving orphan rows: the scope-tabs take their own
   full-width line, and the "N transactions" note pulls UP next to "Today net"
   on the first row (spacer hidden). Wide layout is unchanged (one line, note
   pushed right by the spacer). Scoped via :has() so other tools rows (divers /
   team facet bars) are untouched. */
@media (max-width: 1400px) {
  .dv-page-tools:has(.dv-anchor-stat) > .dv-scope-tabs { flex: 0 0 100%; order: 3; }
  .dv-page-tools:has(.dv-anchor-stat) > .dv-spacer { display: none; }
  .dv-page-tools:has(.dv-anchor-stat) > .dv-page-tools__note { order: 1; }
}
.dv-scope-tab {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  cursor: pointer; font: inherit; text-decoration: none; white-space: nowrap;
}
.dv-scope-tab:hover { background: var(--canvas); }
.dv-scope-tab__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-md); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.dv-scope-tab__l { font-size: var(--text-sm); color: var(--muted); }
.dv-scope-tab.is-on { background: var(--accent-soft); border-color: var(--accent-border, rgba(3,105,161,0.18)); }
.dv-scope-tab.is-on .dv-scope-tab__n,
.dv-scope-tab.is-on .dv-scope-tab__l { color: var(--accent); }
.dv-scope-tab__n--neg  { color: var(--error, #c13028); }
.dv-scope-tab__n--zero { color: var(--muted-2); }
/* Scope-filter hide utility — toggled by the `scope-filter` Stimulus
   controller to show/hide items by the active tab's data-scope. !important
   beats element display rules (grid/flex items) so any item type hides. */
.dv-hide { display: none !important; }
/* #107 — search-filter and cert-filter own their own hide classes so they
   compose with scope-filter (.dv-hide) instead of clobbering one shared class.
   A row is visible only when NONE of the three filters wants it hidden. */
.search-hide, .cert-hide { display: none !important; }
/* Filter control — row-2 of .dv-page-tools (date pickers, toggles, facets).
   Fixed 32px so controls align with each other + the scope tabs by construction.
   Use --pill for toggles/facets; .is-on is the accent-soft active state.
   (Canonical in WL design-system tokens.css#filter-control.) */
.dv-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  font-size: var(--text-xs); font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.dv-filter-btn:hover { border-color: var(--hairline-strong); }
.dv-filter-btn svg, .dv-filter-btn [data-lucide] { color: var(--muted-2); flex-shrink: 0; }
.dv-filter-btn__chev { margin-left: 2px; }
.dv-filter-btn--pill { border-radius: 999px; color: var(--muted); }
.dv-filter-btn--pill:hover { color: var(--ink); }
.dv-filter-btn.is-on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.dv-filter-btn.is-on svg, .dv-filter-btn.is-on [data-lucide] { color: var(--accent); }
/* ── Filter bar (full-control row) ────────────────────────────────────
   A wrapping row of full-size form controls (search input, dv-select
   triggers, date pickers, a checkbox toggle, submit + clear buttons).
   Every direct control is normalised to the canonical 46px field height
   so the row aligns on one baseline by construction — no per-control
   height utilities. Pair the buttons with `.dv-btn--field` (also 46px).
   Token-only. */
.dv-filter-bar .diveos-input,
.dv-filter-bar .diveos-select { height: 46px; }
/* Checkbox toggle styled as a bordered control so it reads as a peer of the
   inputs in the row (box + label inside a 46px hairline pill). */
.dv-filter-bar .diveos-check {
  height: 46px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) ease;
}
.dv-filter-bar .diveos-check:hover { background: var(--canvas); }
/* Ledger title-level date nav (.dv-pager) + today tag */
.dv-pager { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.dv-pager__step {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--muted); text-decoration: none;
}
.dv-pager__step:hover { background: var(--canvas); color: var(--ink); }
.dv-pager__date {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  background: transparent; border: none; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--accent); cursor: default;
}
.dv-today-tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border, rgba(3,105,161,0.18));
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
  cursor: pointer; text-decoration: none;
}
/* Ledger anchor stat (leads the scope row) */
.dv-anchor-stat { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.dv-anchor-stat__label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
/* Money anchor (Ledger "Today net") — Geist Mono tabular per the numerics rule,
   and sign-driven color: ink at zero, green only when positive, rose when
   negative (was hardcoded green, so $0.00 read as a gain). */
.dv-anchor-stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.dv-anchor-stat__value--pos { color: var(--confirmed); }
.dv-anchor-stat__value--neg { color: var(--error, #c13028); }
/* table.css — list/index cell TYPOGRAPHY (.dv-table__primary/sub/meta/th/figure).
   MUST load after header_band.css (owns the .dv-table-wrap chrome) so the cell
   type classes win where the two overlap. Without this import the .dv-table__*
   classes don't exist and cells fall back to the 16px root (bookings, team, …). */
/* ─────────────────────────────────────────────────────────────────────
   .dv-table — list/index table TYPOGRAPHY component (maturity ladder ①②③).

   Promotes the cell typography that every account/* list table was
   re-inventing with bespoke utilities (text-[13.5px], text-[12px] mt-0.5,
   font-mono, mixed medium/semibold, 13/13.5/14.5px sizes). This sheet owns
   the *cell content* vocabulary; the surrounding chrome (outer border,
   radius, canvas header band, hairline rows, hover, py-3 rhythm,
   first/last-child padding) STILL lives in header_band.css under
   `.dv-table-wrap` / `.box-table` and is NOT moved or duplicated here.
   The two COEXIST: a table renders inside `.dv-table-wrap` for chrome and
   uses `.dv-table__*` classes on its cells for typography.

   Canonical type scale (anchored on bookings/divers — the closest pair):
     .dv-table__primary  13.5px / 500 / --ink   (link → hover accent, no underline)
     .dv-table__sub      12px   / --muted        (+2px top INSIDE the stack)
     .dv-table__stack    flex column owning the 2px primary→sub gap
     .dv-table__meta     13px   / --muted        (--mono → mono tabular-nums)
     .dv-table__th       11px uppercase tracking / --muted header cell

   Token-only (var(--token)); no raw hex, no raw Tailwind palette.
   Loaded after header_band.css (see application.css).
   ───────────────────────────────────────────────────────────────────── */
/* ── Optional element hook ────────────────────────────────────────────
   `.dv-table` may be added to a <table> for scoping, but the cell classes
   work standalone so existing `.dv-table-wrap table` markup adopts them
   incrementally with zero structural change. */
.dv-table { width: 100%; border-collapse: collapse; }
/* ── Primary cell text (the row's headline: name, ID, title) ──────────── */
.dv-table__primary {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
/* A link inside the primary slot: inherits the headline type, lifts to the
   accent on hover, never underlines (the row-hover tint is the affordance). */
.dv-table__primary a,
a.dv-table__primary {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.dv-table__primary a:hover,
a.dv-table__primary:hover {
  color: var(--accent);
  text-decoration: none;
}
/* ── Sub text (secondary line under the primary: email, brand, serial) ─── */
.dv-table__sub {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--muted);
}
/* ── Stack (primary + sub) — owns the 2px gap so cells stop using mt-0.5 ── */
.dv-table__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dv-table__stack .dv-table__sub { margin-top: 2px; }
/* ── Meta cell (neutral data: dates, counts, specialties, condition) ───── */
.dv-table__meta {
  font-size: var(--text-sm);
  color: var(--muted);
}
.dv-table__meta--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* ── Figure cell (prominent commercial numeric: price, total, commission) ──
   Like __meta--mono but INK, not muted — a price is primary data, not neutral
   meta. Mono + tabular so a column of figures aligns. */
.dv-table__figure {
  font-size: var(--text-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* ── Header cell — matches the existing .dv-table-wrap thead th treatment
   so promoting a header to this class doesn't shift pixels. ─────────────── */
.dv-table__th {
  /* Component owns the header band height — mirrors how `.dv-table-wrap td`
     owns body-row rhythm (header_band.css), so a surface never has to remember
     a py-* utility on every <th>. ~14px ≈ divers/index's py-3.5, one step
     tighter than the 16px body row. */
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
/* ── Row interaction states (consistent with header_band.css's
   `.dv-table-wrap tbody tr:hover { background: var(--surface-alt) }`). ──── */
.dv-table tbody tr.is-interactive { cursor: pointer; }
.dv-table tbody tr.is-interactive:hover,
.dv-table tbody tr.is-interactive:focus-within { background: var(--hover-warm); }
.dv-table tbody tr.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.dv-table tbody tr.is-selected:hover { background: var(--accent-soft); }
/* ════════════════════════════ Variants ════════════════════════════════ */
/* --avatar — first cell pairs an avatar with the primary/sub stack. The
   avatar partial owns its own size; this just sets the flex pairing + gap. */
.dv-table--avatar td:first-child .dv-table__cell,
.dv-table__avatar-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* --compact — tighter vertical rhythm for dense lists (overrides the gated
   py-3 baseline on cells that don't set their own padding). */
.dv-table--compact td:not([class*="py-"]) {
  padding-top: var(--space-2, 8px);
  padding-bottom: var(--space-2, 8px);
}
.dv-table--compact .dv-table__primary { font-size: var(--text-sm); }
/* --numeric — right-align numeric columns and tabularise their figures so
   digits line up column-wise (amounts, pax, counts). */
.dv-table--numeric td.dv-table__num,
.dv-table--numeric th.dv-table__num,
.dv-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dv-table--numeric td.dv-table__num { font-family: var(--font-mono); }
/* ════════════════════ __actions — right-pinned action column ═══════════════
   Keeps the row's actions (edit/delete/overflow) visible without scrolling to
   the end of a wide table. The cell sticks to the right edge of the scroll
   container; a gradient bleed on its left signals that body content passes
   UNDER it (shown only when the table actually overflows — the
   `dv-table-scroll` Stimulus controller toggles `.is-scrollable`, so a table
   that fits shows no fade over real content). Add `.dv-table__actions` to BOTH
   the actions `<th>` and each row's actions `<td>`.

   --dv-pin-bg is the opaque backing the pinned cell paints (so scrolled cells
   don't bleed through it) AND the solid end of the gradient — it tracks the
   row background (surface → hover sky-50 → selected accent-soft) so the pin and
   its fade always match the row underneath. Token-only; light-only. */
.dv-table-wrap { --dv-pin-bg: var(--surface); }
.dv-table-wrap thead th.dv-table__actions { --dv-pin-bg: var(--canvas); }
.dv-table-wrap tbody tr:hover { --dv-pin-bg: var(--sky-50); }
.dv-table-wrap tbody tr.is-selected { --dv-pin-bg: var(--accent-soft); }
.dv-table__actions {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--dv-pin-bg);
}
/* Transparency bleed: the scrolling body content fades out just before the
   pinned actions instead of hard-cutting under them. The ::before sits to the
   LEFT of the (opaque) cell so the fade falls over the CONTENT, never over the
   action icons themselves; its solid end tracks --dv-pin-bg so it matches the
   row (surface / hover / selected). Shown only when the wrap overflows. */
.dv-table__actions::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28px;
  transform: translateX(-100%);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--dv-pin-bg));
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.dv-table-wrap.is-scrollable .dv-table__actions::before { opacity: 1 !important; }
/* Touch / tablet have no hover, so the desktop hover-reveal pattern
   (`opacity-0 group-hover:opacity-100` on the action group) leaves row actions
   permanently invisible. Force them visible on ANY touch device (hover: none,
   any width) and across the whole tablet range (≤1024px — portrait 768 +
   landscape 1024). Mouse desktop (>1024) keeps the hover-reveal declutter. */
@media (hover: none), (max-width: 1024px) {
  .dv-table__actions > * { opacity: 1 !important; }
}
/* ════════════════════ --stack — card-stack below 640px ═════════════════════
   BL-1b. Opt-in modifier on the `.dv-table-wrap` for NARROW ENTITY tables
   (bookings, divers, roster, renters, invoices). Below the sm boundary each
   <tr> collapses into a bordered card and each <td> becomes a label→value row,
   the label sourced from `data-label` on the cell. Wide financial grids DO NOT
   get this — they scroll (BL-1a) instead. Token-only; light-only. */
@media (max-width: 639px) {
  /* Drop the desktop table FRAME in card-stack. `.dv-table-wrap` (header_band.css)
     carries its own surface/border/radius so a desktop table reads as one framed
     card; but here each row is already its own bordered card, so that frame draws
     a redundant outer box around the stack and its white fill shows through the
     inter-card gaps. Make the wrap a transparent, borderless container so the
     cards float on the page canvas. */
  .dv-table-wrap--stack {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  /* Cards fill the wrap: drop the desktop min-width AND become a block that
     stretches to 100% (a bare table would shrink to its content width, leaving
     the cards narrower than the container). */
  .dv-table-wrap--stack table { min-width: 0; width: 100%; display: block; }
  .dv-table-wrap--stack tbody { display: block; }
  .dv-table-wrap--stack thead { display: none; }

  .dv-table-wrap--stack tbody tr {
    display: block;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
  }
  .dv-table-wrap--stack tbody tr + tr { margin-top: var(--space-3, 12px); }

  /* Cell → label/value row. data-label drives the field name on the left.
     Undo any desktop truncation/nowrap so long values (dive lists, notes) wrap
     instead of clipping; the value column may shrink and wrap under its label. */
  .dv-table-wrap--stack tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: var(--space-1, 4px) 0;
    border: 0;
    text-align: right;
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    /* Every cell aligns to the CARD's own inner padding. Kill the desktop
       per-cell horizontal padding that otherwise indents the title/status
       inconsistently: header_band's `td:first-child`/`:last-child` (16px) and
       `.bulk-actions … td:nth-child(2)` (12px), plus Tailwind px-3/pl-0/pr-3 —
       all out-specify the shorthand above, so force them off. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Truly-empty cells (no value, e.g. an unset Stay glyph) are tagged by the
     dv-table-scroll controller and dropped so the card has no bare label rows. */
  .dv-table-wrap--stack tbody td.dv-td-empty { display: none; }
  .dv-table-wrap--stack tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* A cell with no data-label (or explicitly blank) drops the label column. */
  .dv-table-wrap--stack tbody td:not([data-label])::before,
  .dv-table-wrap--stack tbody td[data-label=""]::before { content: none; }

  /* A leading drag-handle column (sortable catalog tables) is meaningless in the
     card stack and would render as an empty bordered stub above the name. Hide
     it and let the NEXT cell become the card header. */
  .dv-table-wrap--stack tbody td.cursor-grab,
  .dv-table-wrap--stack tbody td:has([data-sortable-target="handle"]) { display: none; }

  /* Card header = the first CONTENT cell (the name/title): the literal first
     cell, OR the cell right after a hidden drag handle. Bold accent title, no
     label row, status pill kept on the right. */
  .dv-table-wrap--stack tbody td:first-child,
  .dv-table-wrap--stack tbody td.cursor-grab + td,
  .dv-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td {
    padding-top: 0;
    padding-bottom: var(--space-2, 8px);
    margin-bottom: var(--space-1, 4px);
    border-bottom: 1px solid var(--hairline);
    align-items: center;
    /* The title is a heading, not a value — left-align it (the generic cell rule
       right-aligns values, which would shove an avatar-cell name to the right). */
    text-align: left;
  }
  .dv-table-wrap--stack tbody td:first-child::before,
  .dv-table-wrap--stack tbody td.cursor-grab + td::before,
  .dv-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td::before { content: none; }
  .dv-table-wrap--stack tbody td:first-child .dv-table__primary,
  .dv-table-wrap--stack tbody td.cursor-grab + td .dv-table__primary,
  .dv-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td .dv-table__primary {
    font-weight: 600;
    color: var(--accent);
  }
  .dv-table-wrap--stack tbody td:first-child .dv-table__primary a,
  .dv-table-wrap--stack tbody td.cursor-grab + td .dv-table__primary a,
  .dv-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td .dv-table__primary a { color: var(--accent); }

  /* Cards stack vertically — no horizontal scroll — so the sticky pin is
     meaningless. Return the actions cell to normal flow and make it a COMPACT
     footer: buttons right-aligned and ALWAYS visible (no hover on touch, so the
     desktop `opacity-0 group-hover:opacity-100` reveal would hide them). Tight
     padding — a full divider + generous padding reads as dead space under two
     small icons. */
  .dv-table-wrap--stack .dv-table__actions {
    position: static;
    background: transparent;
    box-shadow: none;
    justify-content: flex-end;
    padding: 0;
    margin-top: var(--space-2, 8px);
    border-top: 0;
  }
  .dv-table-wrap--stack .dv-table__actions > * { opacity: 1 !important; }
}
/* ─────────────────────────────────────────────────────────────────────
   Shared component layer — boxed stat card grid.

   Promoted from the one-off `.ledger-stat-card` (+ `-grid`, `-label`, `-value`)
   that lived in account/ledger.css. This is the canonical BOXED stat component
   (surface card per stat), distinct from the inline `.kpi-strip` pattern in
   patterns.css. Use `.dv-stat-card-grid` when you want each KPI in its own
   bordered card (e.g. the Ledger day summary); use `.kpi-strip` for the flat
   inline stat strip.

   Values are matched BYTE-FOR-BYTE to the former `.ledger-stat-*` rules so the
   Ledger page renders identically. Token-driven; @imported from application.css
   after components/header_band.css.
   ───────────────────────────────────────────────────────────────────── */
/* ── Grid ─────────────────────────────────────────────────────────────
   5-up by default (the Ledger day summary). Callers can override
   grid-template-columns inline / page-scoped for other counts. */
.dv-stat-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
/* ── Card shell ─────────────────────────────────────────────────────── */
.dv-stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
/* ── Label (uppercase eyebrow) ──────────────────────────────────────── */
.dv-stat-card-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* ── Value (mono numeric) ───────────────────────────────────────────── */
.dv-stat-card-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
  line-height: 1;
}
/* ── Interactive variant (gear registry category filter cards) ────────
   A stat card that IS the interaction: rendered as an <a>, the whole
   card toggles a filter / navigates. Hover strengthens the border;
   `.is-active` carries the selected state (accent border + ultra-soft
   tint — mirrors the selected-row treatment). Focus ring per DESIGN.md
   accessibility rules. */
.dv-stat-card--interactive {
  display: block;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 150ms cubic-bezier(0, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0, 0, 0.2, 1);
}
.dv-stat-card--interactive:hover { border-color: var(--hairline-strong); }
.dv-stat-card--interactive:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.dv-stat-card--interactive.is-active {
  border-color: var(--accent);
  background: var(--accent-softer);
}
/* ── Sub line (one line of supporting data under the value, e.g.
   "3 new this month"). NOT decorative — carries a secondary metric. ──── */
.dv-stat-card-sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.dv-stat-card-sub strong { font-weight: 600; color: var(--ink); }
.dv-stat-card-sub a { color: var(--accent); font-weight: 500; }
.dv-stat-card-sub a:hover { text-decoration: underline; }
/* ── Column modifiers ────────────────────────────────────────────────
   The base grid is 5-up (Ledger day summary). These give the common
   responsive 4-up / 3-up layouts without per-call inline overrides. The
   full-width modifier is for a single emphasis stat. */
.dv-stat-card-grid--full { grid-template-columns: 1fr; }
.dv-stat-card-grid--4 { grid-template-columns: 1fr; }
.dv-stat-card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .dv-stat-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-stat-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dv-stat-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* These DS component stylesheets existed but were never wired into the bundle,
   so their components rendered UNSTYLED app-wide (e.g. .dv-table__primary fell
   back to the inherited body size, .dv-callout to plain text). Same class of
   gap as the earlier modal.css / desclist.css fixes.
   (table.css is already imported above — the duplicate is omitted.) */
/* ── .dv-callout ──────────────────────────────────────────────────────────
   Tinted status/info notice panel — the hand-rolled bg-*-bg panels promoted
   to a canonical component. NOT a card (no card shell); a flagged message.
   Layout: leading icon + content (optional eyebrow + body) + optional action.
   Tones key to the status palette triplets. Token-only; light-only.
   ───────────────────────────────────────────────────────────────────────── */
.dv-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.dv-callout__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-0-5);
}
.dv-callout__icon svg,
.dv-callout__icon [data-lucide] {
  width: 16px;
  height: 16px;
}
.dv-callout__content {
  flex: 1 1 auto;
  min-width: 0;
}
.dv-callout__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.dv-callout__title {
  font-weight: 600;
  color: var(--ink);
}
.dv-callout__body {
  color: var(--text-secondary);
}
.dv-callout__title + .dv-callout__body {
  margin-top: var(--space-0-5);
}
.dv-callout__action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Centre the trailing action against the message instead of top-aligning it
     (the callout itself is flex-start so the icon hugs the first body line). A
     32px button beside a single-line title looked dropped without this. */
  align-self: center;
  margin-left: auto;
}
/* ── Tones ───────────────────────────────────────────────────────────────── */
.dv-callout--info {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--ink);
}
.dv-callout--info .dv-callout__icon,
.dv-callout--info .dv-callout__eyebrow {
  color: var(--accent);
}
.dv-callout--briefing {
  background: var(--briefing-bg);
  border-color: var(--briefing-border);
  color: var(--briefing);
}
.dv-callout--briefing .dv-callout__icon,
.dv-callout--briefing .dv-callout__eyebrow,
.dv-callout--briefing .dv-callout__title {
  color: var(--briefing);
}
.dv-callout--confirmed {
  background: var(--confirmed-bg);
  border-color: var(--confirmed-border);
  color: var(--confirmed);
}
.dv-callout--confirmed .dv-callout__icon,
.dv-callout--confirmed .dv-callout__eyebrow,
.dv-callout--confirmed .dv-callout__title {
  color: var(--confirmed);
}
.dv-callout--cancelled {
  background: var(--cancelled-bg);
  border-color: var(--cancelled-border);
  color: var(--cancelled);
}
.dv-callout--cancelled .dv-callout__icon,
.dv-callout--cancelled .dv-callout__eyebrow,
.dv-callout--cancelled .dv-callout__title {
  color: var(--cancelled);
}
.dv-callout--inwater {
  background: var(--inwater-bg);
  border-color: var(--inwater-border);
  color: var(--inwater);
}
.dv-callout--inwater .dv-callout__icon,
.dv-callout--inwater .dv-callout__eyebrow,
.dv-callout--inwater .dv-callout__title {
  color: var(--inwater);
}
/* ───────────────────────────────────────────────────────────────────────────
   .dv-segment — segmented control for a small set of mutually-exclusive
   options rendered as a native radio group (accessible, keyboard-navigable).
   Button chrome lives here so views never hand-roll bg-accent + rounded-btn
   utility soup (which trips the design-system lookalike gate).

   Markup:
     <div class="dv-segment dv-segment--block">
       <label class="dv-segment__option">
         <input type="radio" class="dv-segment__input sr-only" ...>
         <span class="dv-segment__label">DIN</span>
       </label>
       ...
     </div>
   ─────────────────────────────────────────────────────────────────────────── */
.dv-segment {
  display: inline-flex;
  gap: 0.5rem;
}
.dv-segment--block {
  display: flex;
  width: 100%;
}
.dv-segment__option {
  flex: 1 1 0;
  cursor: pointer;
}
.dv-segment__label {
  display: block;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.dv-segment__option:hover .dv-segment__label {
  background-color: var(--surface-alt);
}
.dv-segment__input:checked + .dv-segment__label {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dv-segment__input:focus-visible + .dv-segment__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ── Breadcrumb (.dv-breadcrumb) ───────────────────────────────────────────
   The canonical in-body breadcrumb for Settings-accessed pages
   (Settings › Section › Record). Chevron-separated crumbs; the last crumb is
   the current (non-link) page. Standalone component — margin-free so the host
   (hero_show / page_header) owns vertical spacing. Promoted from the legacy
   .hero-show__breadcrumb / .hero-show__crumb* rules in patterns.css. */
.dv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}
.dv-breadcrumb__crumb { color: var(--muted); text-decoration: none; }
.dv-breadcrumb__crumb:hover { color: var(--ink); }
.dv-breadcrumb__crumb--current { color: var(--ink); font-weight: 600; }
.dv-breadcrumb__sep { display: inline-flex; color: var(--muted-2); }
/* ─────────────────────────────────────────────────────────────────────
   DiveOS chart card — .dv-chart-card

   Canonical panel for hand-rolled Chartkick chart containers (the
   `bg-surface border border-hairline rounded-lg shadow-card p-6` + an
   `<h3 class="text-lg ...">` pattern dotted around dashboards). White
   surface, 1px hairline, radius-lg, padding via the --space scale, and a
   head (title + optional actions) that flows into a body holding the
   chart canvas.

   Unlike .dv-card (eyebrow head, flush body), the chart card keeps a
   prominent --text-lg display title and a generous body min-height so the
   chart canvas has room before Chartkick measures it.

   Token-driven; @imported from application.css after components/card.css.
   ───────────────────────────────────────────────────────────────────── */
.dv-chart-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
/* --raised : soft elevation for cards floating above the canvas. */
.dv-chart-card--raised { box-shadow: var(--shadow-sm); }
/* Head — title (left) + optional actions (right). */
.dv-chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.dv-chart-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: var(--font-display);
}
.dv-chart-card__sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.dv-chart-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Body — holds the chart canvas. min-height keeps the panel from
   collapsing before Chartkick renders / when data is empty. */
.dv-chart-card__body {
  min-height: 300px;
}
/* ─────────────────────────────────────────────────────────────────────
   .dv-share-card — copyable share-link card.

   A shareable URL chip + Copy/Open actions, an optional eyebrow title +
   leading icon + description, and an optional QR code (beside the link, or
   stacked below — collapsible for the booking rail). Promotes the four
   hand-rolled "copyable URL" cards (3 in Settings → Storefront, 1 in the
   bookings show rail) into one component. Rendered by
   shared/patterns/_share_link_card.html.erb.

   Token-only (var(--token)); no raw hex, no raw Tailwind palette. Loaded
   after card.css (see application.css).

   Anatomy:
     .dv-share-card                 outer (clipboard controller host)
       .dv-share-card__head         icon + eyebrow title row (optional)
       .dv-share-card__desc         .dv-meta description (optional)
       .dv-share-card__body         link chip + actions  (+ QR when horizontal)
         .dv-share-card__field      the mono URL chip
         .dv-share-card__actions    Copy / Open buttons
       .dv-share-card__qr           QR tile (beside or below)
       .dv-share-card__qr-cap       QR caption

   Modifiers:
     .dv-share-card--boxed          card chrome (border + padding + radius)
     .dv-share-card--sm / --lg      size (padding / gap step; md is the base)
     .dv-share-card--vertical       QR stacks BELOW the link row
     .dv-share-card--default        baseline emphasis (no extra rules)
     .dv-share-card--accent         accent-soft header BAND + prominent QR
     .dv-share-card--quiet          inline-field actions, minimal chrome
   ───────────────────────────────────────────────────────────────────── */
.dv-share-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  /* Query container so the horizontal QR-beside layout can stack based on the
     card's OWN width — it's used both full-width (storefront settings) and in a
     fixed ~336px rail (booking detail), so a viewport/pane query is wrong. */
  container-type: inline-size;
}
/* Boxed chrome — surface fill, hairline border, rounded-card, padded. */
.dv-share-card--boxed {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.dv-share-card--boxed.dv-share-card--sm { padding: 12px; }
.dv-share-card--boxed.dv-share-card--lg { padding: 20px; }
/* Head — leading icon + eyebrow title. */
.dv-share-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dv-share-card__head svg,
.dv-share-card__head [data-lucide] { color: var(--accent); flex-shrink: 0; }
/* Description line. */
.dv-share-card__desc { margin-top: -2px; }
/* Body — link chip + actions (horizontal: QR sits beside via __layout). */
.dv-share-card__body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* URL chip — mono, on the quiet canvas surface, single line + ellipsis so a
   long URL never reflows to a tower of one-char-per-line in a narrow column
   (e.g. when a QR sits beside it). Matches the mockup's `truncate` field. */
.dv-share-card__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-share-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* QR tile — boxed crop on the canvas surface. */
.dv-share-card__qr {
  flex-shrink: 0;
  display: inline-block;
  padding: 8px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  line-height: 0;
}
.dv-share-card__qr svg { display: block; }
.dv-share-card__qr-cap { margin-top: 8px; text-align: center; }
/* ── Horizontal layout (default) — QR beside the link + actions column ──
   The __layout wraps the QR + the (body + desc-less) text column side by
   side. We model it directly: when a QR is present and horizontal, the
   card uses a row with the QR first and a min-width:0 text column. */
.dv-share-card__layout {
  display: flex;
  align-items: center;   /* QR + its link/actions read as one balanced pair */
  gap: 16px;
  min-width: 0;
}
.dv-share-card__layout > .dv-share-card__col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Narrow card: stack the QR above its text column so the description keeps a
   readable measure and the URL field + Copy button don't clip. */
@container (max-width: 400px) {
  .dv-share-card__layout { flex-direction: column; align-items: stretch; }
  .dv-share-card__layout > .dv-share-card__qr { align-self: flex-start; }
}
/* ── Vertical — QR stacks BELOW the link row (booking rail). The QR is a
   normal flex-column child, so no extra rule needed beyond alignment. */
.dv-share-card--vertical .dv-share-card__qr { align-self: flex-start; }
/* Disclosure (collapsible QR) — accent summary, no marker, tidy spacing. */
.dv-share-card__disclosure { margin-top: 0; }
.dv-share-card__disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  font-size: var(--text-xs);
}
.dv-share-card__disclosure > summary::-webkit-details-marker { display: none; }
.dv-share-card__disclosure > summary:hover { color: var(--accent-strong); }
.dv-share-card__disclosure > summary svg { flex-shrink: 0; }
.dv-share-card__disclosure[open] > summary { margin-bottom: 12px; }
/* ══════════════════════ Emphasis: --accent (Direction C) ══════════════════
   Accent-soft header band flush to the card top + a padded content wrapper
   below it, a PRIMARY Copy CTA, and a prominent white QR tile. For share
   actions you want used on sight (booking-engine / walk-in flows). */
.dv-share-card--accent.dv-share-card--boxed {
  padding: 0;                 /* the band + __content own the padding */
  overflow: hidden;           /* clip the band to the card radius */
}
/* Header band — accent-soft fill, hairline underline, accent icon + eyebrow. */
.dv-share-card--accent .dv-share-card__head {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 16px;
  margin: 0;
}
.dv-share-card--accent .dv-share-card__head .dv-eyebrow { color: var(--accent); }
/* Padded body wrapper below the band; owns the vertical rhythm. */
.dv-share-card--accent .dv-share-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 16px;
  min-width: 0;
}
.dv-share-card--accent.dv-share-card--sm .dv-share-card__head { padding: 8px 12px; }
.dv-share-card--accent.dv-share-card--sm .dv-share-card__content { padding: 12px; }
.dv-share-card--accent.dv-share-card--lg .dv-share-card__head { padding: 12px 20px; }
.dv-share-card--accent.dv-share-card--lg .dv-share-card__content { padding: 20px; }
/* Prominent QR — raised white tile (vs the recessed canvas tile elsewhere).
   Cap the intrinsic QR SVG to a proportionate size so it pairs with the link
   column instead of towering over it (RQRCode renders at module_size px, which
   for a longer URL can exceed 180px). Vector QR stays crisp when scaled. */
.dv-share-card--accent .dv-share-card__qr {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.dv-share-card--accent .dv-share-card__qr svg {
  width: 132px;
  height: 132px;
}
.dv-share-card--accent.dv-share-card--sm .dv-share-card__qr svg { width: 104px; height: 104px; }
.dv-share-card--accent.dv-share-card--lg .dv-share-card__qr svg { width: 160px; height: 160px; }
/* ══════════════════════ Emphasis: --quiet (Direction A) ═══════════════════
   Minimal chrome — the Copy/Open actions live INSIDE the URL field as ghost
   buttons; the field is a single inline chip. QR stays in the disclosure.
   Disappears into dense rails. */
.dv-share-card__field--inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;  /* tighter right pad — ghost buttons sit inside */
}
.dv-share-card__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-share-card--quiet .dv-share-card__actions { flex-shrink: 0; gap: 2px; }
/* admin/portal.css — DiveOS Platform staff portal shell (.pf-* chrome).
   Extracted from the inline <style> in layouts/admin.html.erb; IA divergence
   is sanctioned (UI-ARCHITECTURE.md §9), visual primitives snap to v4 scale. */
/*
 * admin/portal.css — DiveOS Platform staff portal chrome.
 *
 * Extracted from the inline <style> in layouts/admin.html.erb (design-debt
 * item 3, 2026-06-28). The portal keeps its own `.pf-*` shell vocabulary —
 * the IA divergence from the operator account/* shell is deliberate
 * (UI-ARCHITECTURE.md §9) — but the visual primitives now snap to the v4
 * scale: type 10/12/13/14/15/18/22/28, headings weight 600, radii via
 * --radius-* tokens, numerics in Geist Mono, accent focus rings on every
 * interactive control. Resolves all colors through tokens.css.
 *
 * Forms + buttons are NOT here: they moved to the DiveOS form substrate
 * (diveos_form_with + _form_section + .field-grid + .diveos-form-actions)
 * and the blessed .dv-btn family.
 */
.pf { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--canvas); }
.pf-rail { background: var(--surface); border-right: 1px solid var(--hairline); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; }
.pf-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; text-decoration: none; }
.pf-brand b { font-size: var(--text-sm); font-weight: 600; letter-spacing: -.01em; color: var(--ink); display: block; }
.pf-brand .tag { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pf-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--text-sm); flex: none; }
.pf-navlabel { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 14px 8px 4px; }
.pf-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--muted); text-decoration: none; }
.pf-nav:hover { background: var(--surface-alt); }
.pf-nav.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pf-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-foot { margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid var(--hairline); font-size: var(--text-xs); color: var(--muted-2); }
.pf-main { padding: 26px 34px 60px; max-width: 1140px; }
.pf-flash { margin-bottom: 18px; padding: 11px 15px; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 500; border: 1px solid; }
.pf-flash.notice { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
.pf-flash.alert  { color: var(--cancelled); background: var(--cancelled-bg); border-color: var(--cancelled-border); }
.pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.pf-head h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.pf-head .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; }
/* .pf-pill is used only for the member role badge — active/suspended status
   moved to the shared .status-pill (StatusPaletteHelper). */
.pf-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid; }
.pf-pill.role { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); }
.pf-kpis { display: flex; gap: 38px; padding: 16px 2px 4px; border-top: 1px solid var(--hairline); margin-bottom: 4px; }
.pf-kpi .v { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -.02em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pf-kpi .l { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.pf-toolbar { display: flex; align-items: center; gap: 10px; margin: 18px 0 16px; }
.pf-search { flex: 1; max-width: 320px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink); font-family: inherit; }
.pf-search:focus-visible { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.pf-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.pf-seg a { font-size: var(--text-xs); font-weight: 500; color: var(--muted); padding: 5px 11px; border-radius: var(--radius-sm); text-decoration: none; }
.pf-seg a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pf-seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
table.pf-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.pf-table th { text-align: left; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 11px 16px; border-bottom: 1px solid var(--hairline); background: var(--surface-alt); }
.pf-table td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--ink); }
.pf-table tr:last-child td { border-bottom: none; }
.pf-table tbody tr:hover td { background: var(--surface-alt); }
.pf-table a.name { font-weight: 600; color: var(--ink); text-decoration: none; }
.pf-table .sub { font-size: var(--text-xs); color: var(--muted-2); }
.pf-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pf-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
/* Small layout utilities — recurring inline clusters on the QA coverage
   surfaces promoted to named classes (2026-07): two-up rollup grid and
   wrapping badge rows. */
.pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pf-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-sec-h { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin: 26px 0 10px; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--hairline); }
.pf-row:last-child { border-bottom: none; }
.pf-row .name { font-weight: 600; color: var(--ink); }
.pf-row .sub { font-size: var(--text-xs); color: var(--muted-2); }
.pf-metrics { display: flex; gap: 26px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pf-metrics .mv { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.pf-metrics .ml { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); font-family: var(--font-sans); }
.pf-hero { display: flex; align-items: center; gap: 16px; }
.pf-hero .avatar { width: 52px; height: 52px; border-radius: var(--radius-xl); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: var(--text-lg); flex: none; }
.pf-hero h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.pf-hero .meta { font-size: var(--text-sm); color: var(--muted); margin-top: 3px; }
.pf-hero .meta strong { font-family: var(--font-mono); }
.pf-hero .spacer { flex: 1; }
/* Package-Builder (C8b) components: option card, vertical step rail, and the
   sidebar collapse / 68px icon-rail mode. Token-driven. */
/*
 * package_builder.css — Package-Builder (C8b) components.
 *
 * Three foundational pieces, grounded in DM's design system (tokens.css):
 *   1. .pkb-optcard  — selectable option card (single / multi select)
 *   2. .pkb-vrail    — vertical step rail (current / done / upcoming)
 *   3. .diveos-sidebar.is-collapsed — 68px icon-rail collapse mode
 *
 * Token-only. Durations use DM's --t-fast/--t-med/--t-slow; easing uses
 * --ease-out-quart. No raw hex, no --space-* (DM has no space scale → raw px).
 *
 * Source spec: Design/design_handoff_package_builder/components/*.md
 */
/* ─── 1. Option card ───────────────────────────────────────────────── */
.pkb-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkb-optcard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--t-fast) ease,
              background var(--t-fast) ease,
              transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}
.pkb-optcard:hover {
  border-color: var(--accent-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.pkb-optcard.is-on {
  border-color: var(--accent);
  background: var(--accent-softer);
}
.pkb-optcard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pkb-optcard__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pkb-optcard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pkb-optcard__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pkb-optcard__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}
.pkb-optcard__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.pkb-optcard.is-on .pkb-optcard__price { color: var(--accent); }
/* check indicator — round (single) / square (multi via --square) */
.pkb-optcard__check {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.pkb-optcard__check--square { border-radius: var(--radius-sm); }
.pkb-optcard.is-on .pkb-optcard__check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
/* the check glyph is hidden until selected (color:transparent above) */
.pkb-optcard__check svg { width: 14px; height: 14px; }
/* ─── 2. Vertical step rail ────────────────────────────────────────── */
.pkb-vrail {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  position: sticky;
  top: 48px;
  align-self: start;
}
.pkb-vrail__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pkb-vrail__brand .pkb-vrail__brand-ic {
  color: var(--accent);
  display: flex;
  flex-shrink: 0;
}
.pkb-vrail__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pkb-vstep {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--muted);
  cursor: default;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.pkb-vstep[disabled] { opacity: 0.55; cursor: not-allowed; }
/* the vertical bar (replaces a circle) */
.pkb-vstep .bar {
  flex-shrink: 0;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
  transition: background var(--t-fast) ease, height var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}
.pkb-vstep .lbrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pkb-vstep .tk {
  display: none;
  align-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.pkb-vstep .tk svg { width: 15px; height: 15px; }
.pkb-vstep .lb {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* done — accent bar + check pip, tappable */
.pkb-vstep.is-done { color: var(--text-secondary); cursor: pointer; }
.pkb-vstep.is-done .bar { background: var(--accent); }
.pkb-vstep.is-done .tk { display: flex; }
/* nav (any reachable, non-current step) — gray hover affordance */
.pkb-vstep.is-nav { cursor: pointer; }
.pkb-vstep.is-nav:hover { background: var(--gray-100); }
.pkb-vstep.is-nav:hover .bar { background: var(--accent); }
/* on — accent-soft pill, raised halo'd bar, leading dot, bold accent label */
.pkb-vstep.is-on {
  background: var(--accent-soft);
  color: var(--accent);
  cursor: default;
}
.pkb-vstep.is-on .bar {
  height: 20px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pkb-vstep.is-on .lb { font-weight: 600; }
/* leading dot for the current step */
.pkb-vstep.is-on .lbrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex-shrink: 0;
}
.pkb-vstep:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pkb-vrail__count {
  margin-top: 14px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* ─── 4. Price slider (.pkb-slider) ────────────────────────────────────
   A native <input type="range"> owns value + keyboard a11y; the visible
   track/fill/thumb are positioned by the pkb-slider Stimulus controller,
   which snaps to 5%. Token-only; webkit + moz thumb/track zeroed so only
   our custom visuals show. */
.pkb-slider {
  position: relative;
  height: 24px;
  margin: 6px 0;
  display: flex;
  align-items: center;
}
/* the real range input — full-bleed, invisible, drives the value */
.pkb-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  z-index: 2;
}
.pkb-slider__input:focus { outline: none; }
.pkb-slider__input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  background: transparent;
}
.pkb-slider__input::-moz-range-track { height: 100%; background: transparent; }
/* the native thumb is invisible but full-height so the whole bar is grabbable */
.pkb-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
.pkb-slider__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
/* visible track (full, gray) */
.pkb-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
  pointer-events: none;
}
/* accent fill (cost → current value) */
.pkb-slider__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  pointer-events: none;
}
/* draggable-looking thumb (positioned by JS via left:%) */
.pkb-slider__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2.5px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: box-shadow var(--t-fast) ease;
}
.pkb-slider__thumb::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.pkb-slider:hover .pkb-slider__thumb {
  box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-sm);
}
.pkb-slider__input:focus-visible ~ .pkb-slider__thumb {
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm);
}
/* ─── 5. Pill group (.pkb-pillgroup) ───────────────────────────────────
   Single-select row of pills, radio-backed (native, no JS) like the
   _segmented field. Active = accent-soft bg + accent text + accent border,
   resolved via :has() on the checked radio. */
.pkb-pillgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pkb-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease;
}
.pkb-pill:hover { border-color: var(--accent-border); }
/* visually-hidden radio (kept focusable for a11y) */
.pkb-pill__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* active state */
.pkb-pill:has(.pkb-pill__radio:checked) {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
.pkb-pill:has(.pkb-pill__radio:focus-visible) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* ─── 6. Round checkbox (.diveos-checkbox--round) ──────────────────────
   ROUND variant of DM's square .diveos-checkbox. Native input + CSS only;
   checked = accent fill + white check glyph. The square checkbox is reused
   as-is (this only adds the circular shape + accent-fill treatment). */
.diveos-checkbox--round {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* visually-hidden native input (focusable, not display:none) */
.diveos-checkbox--round .pkb-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.diveos-checkbox--round .pkb-checkbox__box {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--hairline-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.diveos-checkbox--round .pkb-checkbox__box svg { width: 14px; height: 14px; }
.diveos-checkbox--round .pkb-checkbox__input:checked + .pkb-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
.diveos-checkbox--round .pkb-checkbox__input:focus-visible + .pkb-checkbox__box {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.diveos-checkbox--round .pkb-checkbox__label {
  font-size: var(--text-sm);
  color: var(--ink);
}
/* ─── 4. Price slider (.pkb-slider) ────────────────────────────────────
   A native <input type="range"> owns value + keyboard a11y; the visible
   track/fill/thumb are positioned by the pkb-slider Stimulus controller,
   which snaps to 5%. Token-only; webkit + moz thumb/track zeroed so only
   our custom visuals show. */
.pkb-slider {
  position: relative;
  height: 24px;
  margin: 6px 0;
  display: flex;
  align-items: center;
}
/* the real range input — full-bleed, invisible, drives the value */
.pkb-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  z-index: 2;
}
.pkb-slider__input:focus { outline: none; }
.pkb-slider__input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  background: transparent;
}
.pkb-slider__input::-moz-range-track { height: 100%; background: transparent; }
/* the native thumb is invisible but full-height so the whole bar is grabbable */
.pkb-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
.pkb-slider__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
/* visible track (full, gray) */
.pkb-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
  pointer-events: none;
}
/* accent fill (cost → current value) */
.pkb-slider__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  pointer-events: none;
}
/* draggable-looking thumb (positioned by JS via left:%) */
.pkb-slider__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2.5px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: box-shadow var(--t-fast) ease;
}
.pkb-slider__thumb::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.pkb-slider:hover .pkb-slider__thumb {
  box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-sm);
}
.pkb-slider__input:focus-visible ~ .pkb-slider__thumb {
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm);
}
/* ─── 5. Pill group (.pkb-pillgroup) ───────────────────────────────────
   Single-select row of pills, radio-backed (native, no JS) like the
   _segmented field. Active = accent-soft bg + accent text + accent border,
   resolved via :has() on the checked radio. */
.pkb-pillgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pkb-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease;
}
.pkb-pill:hover { border-color: var(--accent-border); }
/* visually-hidden radio (kept focusable for a11y) */
.pkb-pill__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* active state */
.pkb-pill:has(.pkb-pill__radio:checked) {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
.pkb-pill:has(.pkb-pill__radio:focus-visible) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* ─── 6. Round checkbox (.diveos-checkbox--round) ──────────────────────
   ROUND variant of DM's square .diveos-checkbox. Native input + CSS only;
   checked = accent fill + white check glyph. The square checkbox is reused
   as-is (this only adds the circular shape + accent-fill treatment). */
.diveos-checkbox--round {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* visually-hidden native input (focusable, not display:none) */
.diveos-checkbox--round .pkb-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.diveos-checkbox--round .pkb-checkbox__box {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--hairline-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.diveos-checkbox--round .pkb-checkbox__box svg { width: 14px; height: 14px; }
.diveos-checkbox--round .pkb-checkbox__input:checked + .pkb-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
.diveos-checkbox--round .pkb-checkbox__input:focus-visible + .pkb-checkbox__box {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.diveos-checkbox--round .pkb-checkbox__label {
  font-size: var(--text-sm);
  color: var(--ink);
}
/* ─── 7. Guided builder layout (C8b shell) ─────────────────────────────
   Three zones inside the app content area: left vertical step rail (236px),
   centered conversational column (max 660px), right live-summary rail
   (296px). A sticky footer spans the full width. Spec: flow-c8b.md.
   The app sidebar is collapsed on entry (see §3). Token-only. */
/* full-bleed: the wizard layout removes the centered 1280px content cap so the
   three-zone grid spans the whole main pane (rail hard-left, summary hard-right) */
.diveos-content--full {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}
.pkb-guided {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 1px);
  background: var(--canvas);
}
.pkb-guided__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 296px;
  gap: 56px;
  padding: 48px 56px 56px;
  align-items: start;
}
/* center conversational column — centered, capped at 660px */
.pkb-guided__center {
  min-width: 0;
  display: flex;
  justify-content: center;
}
.pkb-guided-inner {
  width: 100%;
  max-width: 660px;
  text-align: center;
}
/* shared step chrome */
.pkb-guided .step-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}
.pkb-guided-q {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.pkb-guided-help {
  margin-top: 14px;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--muted);
}
/* step bodies sit left-aligned within the centered column */
.pkb-guided-body {
  margin-top: 32px;
  text-align: left;
}
/* centered variant — for short single-decision bodies (pills, big field) that
   should sit under the centered question rather than left-aligned */
.pkb-guided-body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pkb-guided-body--center .pkb-pillgroup { justify-content: center; }
/* big underline field (Name step) */
.pkb-bigfield {
  margin-top: 32px;
}
.pkb-bigfield__input {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--hairline);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color var(--t-fast) ease;
}
.pkb-bigfield__input::-moz-placeholder { color: var(--input-placeholder); }
.pkb-bigfield__input::placeholder { color: var(--input-placeholder); }
.pkb-bigfield__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
/* inline header row (e.g. duration/pax on the Dives step) */
.pkb-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.pkb-inline-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pkb-inline-field__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.pkb-inline-field__control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pkb-num {
  width: 64px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.pkb-num:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.pkb-inline-field__suffix { font-size: var(--text-sm); color: var(--muted); }
/* native toggle (flexible duration) */
.pkb-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pkb-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.pkb-toggle__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
  transition: background var(--t-fast) ease;
  flex-shrink: 0;
}
.pkb-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) ease;
}
.pkb-toggle__input:checked + .pkb-toggle__track { background: var(--accent); }
.pkb-toggle__input:checked + .pkb-toggle__track::after { transform: translateX(16px); }
.pkb-toggle__input:focus-visible + .pkb-toggle__track { box-shadow: 0 0 0 3px var(--focus-ring); }
.pkb-toggle__state { font-size: var(--text-sm); color: var(--muted); }
/* review ledger (Review step) */
.pkb-guided-review {
  /* matches the DS card stroke (.bk-detail .balance-card): border-only, no
     shadow, radius-lg, clipped corners. Centered within the review column. */
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 560px;
  margin-inline: auto;
}
.pkb-guided-review .rr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid var(--hairline-2);
}
.pkb-guided-review .rr:first-child { border-top: 0; }
.pkb-guided-review .rr .ic { color: var(--accent); display: flex; flex-shrink: 0; }
.pkb-guided-review .rr .k { flex: 1; min-width: 0; color: var(--muted); font-size: var(--text-sm); }
.pkb-guided-review .rr .v { color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-align: right; }
.pkb-guided-review .rr .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pkb-guided-review .rr .v.is-profit { color: var(--confirmed); font-weight: 700; }
/* component-summary row: small uppercase category tag before the item name */
.pkb-guided-review .rr .rr-cat {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2);
  margin-right: 8px;
}
/* count chip (multi-select steps) */
.pkb-guided-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
}
/* sticky footer — spans full width below the grid */
.pkb-guided-foot {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.pkb-guided-hintrow {
  font-size: var(--text-sm);
  color: var(--muted-2);
}
/* footer status segmented control */
.pkb-foot-div { width: 1px; height: 22px; background: var(--hairline); }
.pkb-statusfield { display: inline-flex; align-items: center; gap: 10px; }
.pkb-statusfield__lbl {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2);
}
.pkb-statusseg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-alt); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.pkb-statusseg__opt {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; border: 0; cursor: pointer;
  padding: 5px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  color: var(--muted); background: transparent;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.pkb-statusseg__opt:hover { color: var(--ink); }
.pkb-statusseg__opt.is-on {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
}
.pkb-statusseg__opt[data-active="true"].is-on { color: var(--confirmed); }
/* Tailwind's .hidden (display:none) loses to .diveos-button (display:inline-flex)
   on source order — so the wizard controller's hide of Back/Continue/Publish was
   visually ignored. Re-assert it with a footer-scoped, higher-specificity rule. */
.pkb-guided-foot .diveos-button.hidden { display: none; }
.pkb-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  background: var(--gray-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--muted);
}
/* summary rail (right, 296px) — package roll-up + economics */
.pkb-summary {
  position: sticky;
  top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pkb-summary__card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
/* section header: uppercase mono eyebrow + optional status pill */
.pkb-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pkb-summary__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.pkb-summary__draftpill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
/* icon roll-up line: soft accent tile · two-line label · trailing value */
.pkb-summary__line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.pkb-summary__line + .pkb-summary__line { border-top: 1px solid var(--hairline-2); }
.pkb-summary__line-ic {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pkb-summary__line-ic svg { width: 17px; height: 17px; }
.pkb-summary__line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pkb-summary__line-main { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.pkb-summary__line-sub { font-size: var(--text-xs); color: var(--muted); }
.pkb-summary__line-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* SELLING PRICE block — accent-soft, sits at the foot of the roll-up card */
.pkb-summary__sell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px -18px -16px;
  padding: 14px 18px;
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.pkb-summary__sell .pkb-summary__eyebrow { color: var(--accent); }
.pkb-summary__sell-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
/* economics rows */
.pkb-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: var(--text-sm);
}
.pkb-summary__row .k { color: var(--muted); }
.pkb-summary__row .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
.pkb-summary__row--accent .v { color: var(--accent); }
.pkb-summary__divider { height: 1px; background: var(--hairline-2); margin: 6px 0; }
/* responsive: drop the summary rail, then the step rail, on narrow viewports */
@media (max-width: 1180px) {
  .pkb-guided__grid { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .pkb-summary { display: none; }
}
@media (max-width: 820px) {
  .pkb-guided__grid { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 40px; }
  .pkb-guided .pkb-vrail { display: none; }
}
/* ─── 8. Pricer (Price step) ───────────────────────────────────────────
   The C8b markup pricer: big editable price · Recommended snap · quick-add ·
   markup slider (reuses .pkb-slider) · margin chip. Centered, compact so it
   never overflows the sticky footer. Token-only. */
.pkb-pricer {
  max-width: 540px;
  margin: 32px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* big editable price */
.pkb-pricefield {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  border-bottom: 2px solid var(--hairline);
  transition: border-color var(--t-fast) ease;
}
.pkb-pricefield:focus-within { border-color: var(--accent); }
.pkb-pricefield__cur {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--muted-2);
  margin-top: 8px;
}
.pkb-price-input {
  width: 4ch;
  field-sizing: content;
  min-width: 2ch;
  max-width: 9ch;
  border: 0;
  padding: 4px 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pkb-price-input:focus { outline: none; }
.pkb-pricer__sub {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
}
/* Recommended snap button */
.pkb-recbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
  padding: 13px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-softer);
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.pkb-recbtn:hover { border-color: var(--accent); }
.pkb-recbtn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
.pkb-recbtn__v { font-family: var(--font-mono); }
/* quick-add row */
.pkb-quickrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}
.pkb-quickrow__lbl {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  flex-shrink: 0;
}
.pkb-quickbtn {
  flex: 1;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.pkb-quickbtn:hover { border-color: var(--accent-border); }
.pkb-quickbtn.is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
/* slider + scale */
.pkb-pricer__slider { width: 100%; margin-top: 26px; }
.pkb-pricer__scale {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pkb-pricer__scale b { font-weight: 700; display: inline-block; margin-top: 2px; }
.pkb-pricer__scale .lo { color: var(--muted-2); text-align: left; }
.pkb-pricer__scale .mid { color: var(--confirmed); text-align: center; }
.pkb-pricer__scale .hi { color: var(--muted-2); text-align: right; }
/* live margin chip — green */
.pkb-guided-marginchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--confirmed);
  background: var(--confirmed-bg);
  border: 1px solid var(--confirmed-border);
  border-radius: var(--radius-pill);
}
/* no cost yet → muted prompt instead of a fake green margin */
.pkb-guided-marginchip.is-muted {
  color: var(--muted);
  background: var(--surface-alt);
  border-color: var(--hairline);
}
/* ─── 9. Dives catalogue picker (Dives step) ───────────────────────────
   Spec: components/dive-catalogue.md. dv2-/dv- prefixed (bare .row/.chip/.meta
   collide with global app CSS). Token-only. */
/* widen + left-align the centered column for the picker (set by the wizard
   controller when the shown step opts in via data-wide) */
.pkb-guided-inner.has-picker { max-width: 720px; text-align: left; }
.pkb-guided-inner.has-picker .step-eyebrow,
.pkb-guided-inner.has-picker .pkb-guided-q,
.pkb-guided-inner.has-picker .pkb-guided-help { text-align: center; }
/* duration toolbar — exact to "Duration Toolbar - Spec (standalone)".
   One content-width container, cells split by a light (--hairline-2) divider;
   Fixed/Flexible pill toggle; − [value] + steppers with a .val display span. */
.dv-durbar {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 28px;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-sans);
}
.dv-cseg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  border-left: 1px solid var(--hairline-2);
}
.dv-cseg:first-child { border-left: 0; padding-left: 20px; }
.dv-cseg:last-child { padding-right: 20px; }
.dv-cseg[hidden] { display: none; }
.dv-clabel {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Fixed/Flexible segmented toggle — pill */
.dv-segtog {
  display: inline-flex;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.dv-segtog button {
  height: 32px;
  padding: 0 14px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.dv-segtog button.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
/* − [value] + stepper */
.dv-cstep { display: inline-flex; align-items: center; gap: 1rem; }
.dv-cstep button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.dv-cstep button:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--accent-border); color: var(--ink); }
.dv-cstep button:disabled { opacity: 0.5; cursor: default; }
.dv-cstep .val {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.dv-cstep .val .un {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}
.pkb-stepper__unit { font-size: var(--text-xs); color: var(--muted); }
/* picker controls */
.dv2-pick { text-align: left; margin-top: 8px; }
.dv2-results { margin-top: 18px; }
.dv2-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow-x: auto;
}
.dv2-seg-btn {
  flex: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.dv2-seg-btn .c { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; opacity: 0.8; }
.dv2-seg-btn.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.dv2-seg-btn.is-on .c { color: var(--accent); opacity: 1; }
.dv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}
.dv-search:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.dv-search .ico { color: var(--muted-2); display: flex; flex-shrink: 0; }
.dv-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink); }
.dv-search input::-moz-placeholder { color: var(--muted-2); }
.dv-search input::placeholder { color: var(--muted-2); }
.dv-search .clr {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.dv-search .clr:hover { background: var(--gray-200); color: var(--ink); }
/* group label */
.dv-grouplabel { display: flex; align-items: center; gap: 9px; margin: 38px 2px 12px; }
/* only the very first group's label is flush — every later group keeps its
   top margin so sections are clearly separated (NOT :first-child, which would
   match every group's label since each is first inside its own group div). */
.dv2-results > [data-dv-group]:first-child .dv-grouplabel { margin-top: 0; }
.dv-grouplabel .t { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dv-grouplabel .ln { flex: 1; height: 1px; background: var(--hairline-2); }
.dv-grouplabel .c { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
/* dense selectable row */
.dv-rows { display: flex; flex-direction: column; gap: 6px; }
.dv-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.dv-row:hover { border-color: var(--accent-border); }
.dv-row.is-on { border-color: var(--accent); background: var(--accent-softer); }
.dv-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dv-row .box {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid var(--hairline-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.dv-row.is-on .box { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.dv-row .dv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dv-row .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dv-row .meta { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-row .pr { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.dv-row.is-on .pr { color: var(--accent); }
/* qty stepper (replaces price on selected rows) */
.dv-step { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; flex-shrink: 0; }
.dv-step button { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--gray-700); cursor: pointer; }
.dv-step button:hover { background: var(--surface-alt); color: var(--ink); }
.dv-step button:disabled { color: var(--muted-2); cursor: default; background: transparent; }
.dv-step .v { min-width: 26px; text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
/* equipment: note + grouped chips */
.dv-kitnote {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--accent-softer); border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--gray-700); line-height: 1.5;
}
.dv-kitnote .ico { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.dv-kitnote b { color: var(--ink); font-weight: 600; }
.dv-kitgroup { margin-bottom: 18px; }
.dv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--gray-700);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.dv-chip:hover { border-color: var(--accent-border); }
.dv-chip .tk {
  width: 15px; height: 15px; border-radius: var(--radius-pill); flex-shrink: 0;
  border: 1.5px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center; color: transparent;
}
.dv-chip.is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.dv-chip.is-on .tk { background: var(--accent); border-color: var(--accent); color: var(--surface); }
/* gear CATEGORY builder (#224) — billing-free gear lines with an internal
   cost/margin estimate. Picker row + a stacked list of .dv-gearline rows. */
.dv-gearpick {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.dv-gearpick__select, .dv-gearpick__qty {
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 7px 10px; height: 34px;
}
.dv-gearpick__select { min-width: 180px; }
.dv-gearpick__qty { width: 68px; }
.dv-gearpick__select:focus-visible, .dv-gearpick__qty:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.dv-gearlist { display: flex; flex-direction: column; gap: 6px; }
.dv-gearline__est { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; margin-left: auto; }
/* empty / no-results */
.dv-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px; text-align: center; }
.dv-empty .t { font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); }
.dv-empty .s { font-size: var(--text-sm); color: var(--muted); }
/* ─── 10. Read-only published view (packages#show) ─────────────────────
   Spec: read-only-view/pb-view.jsx + pb.css. Single-scroll detail page with a
   CSS-gradient ocean hero, bento stats, blocks, and a sticky section nav.
   Token-only; ocean blues via --sky-*, sheen via white/black alpha. */
.pkb-view {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1000px) { .pkb-view { grid-template-columns: 1fr; } .pkb-minnav { display: none; } }
.pkb-view-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
/* Breadcrumb on the package show header uses the canonical
   .hero-show__breadcrumb component (shared/patterns/_breadcrumb); give it the
   header's spacing below the trail. */
.pkb-view-header-inner .hero-show__breadcrumb { margin-bottom: 16px; }
/* full-width header band — white surface, hairline divider below. The
   background bleeds to the content-pane edges (same calc as .dv-page-band —
   keep in sync); the inner content re-caps to the 1180 column, which is
   centered in the pane exactly like .pkb-view below, so they line up. */
.pkb-view-header {
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  margin-top: -40px; /* bleed up through .diveos-content's 40px top padding */
  margin-left:  min(-48px, calc(712px - 50vw));
  margin-right: min(-48px, calc(712px - 50vw));
  padding-left:  max(48px, calc(50vw - 712px));
  padding-right: max(48px, calc(50vw - 712px));
}
@media (max-width: 1023px) { .pkb-view-header { margin-top: -56px; } }
.pkb-view-header-inner { max-width: 1180px; margin: 0 auto; padding: 18px 0 22px; }
.pkb-view-headrow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
}
.pkb-view-header .hd-l { min-width: 0; }
.pkb-view-header .hd-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pkb-view-header .hd-title h1 {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}
.pkb-view-header .hd-sub { margin: 9px 0 0; font-size: var(--text-sm); color: var(--muted); max-width: 68ch; }
.pkb-view-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* SelectableStatusPill — DS StatusPill + chevron trigger + popover menu */
.pkb-statussel { position: relative; }
.pkb-statuspill-sel { cursor: pointer; padding-right: 8px; transition: background 120ms ease, border-color 120ms ease; }
.pkb-statuspill-sel .chev { margin-left: 1px; opacity: 0.7; }
.pkb-statuspill-sel:hover { filter: brightness(0.98); }
.pkb-statuspill-sel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.pkb-statusmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 152px; margin: 0;
  padding: 5px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: none; flex-direction: column; gap: 2px;
}
.pkb-statussel.is-open .pkb-statusmenu { display: flex; }
.pkb-statusopt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 6px 8px; background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; cursor: pointer; text-align: left;
}
.pkb-statusopt:hover { background: var(--surface-alt); }
.pkb-statusopt.on { background: var(--accent-soft); }
.pkb-statusopt .ck { color: var(--accent); flex-shrink: 0; }
.pkb-view-foot {
  display: flex; align-items: center; gap: 20px;
  margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--hairline);
}
/* link-style buttons */
.pkb-linkbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  font: inherit; font-size: var(--text-sm); font-weight: 500; background: none; border: 0;
  color: var(--muted); cursor: pointer; text-decoration: none;
  transition: color var(--t-fast) ease;
}
.pkb-linkbtn.neutral:hover { color: var(--ink); }
.pkb-linkbtn.danger { color: var(--cancelled); }
.pkb-linkbtn.danger:hover { color: var(--cancelled); text-decoration: underline; }
/* sticky section mini-nav */
.pkb-minnav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.pkb-minnav a {
  padding: 7px 12px; font-size: var(--text-sm); font-weight: 500; color: var(--muted);
  text-decoration: none; border-left: 2px solid var(--hairline);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.pkb-minnav a:hover { color: var(--ink); border-left-color: var(--hairline-strong); }
.pkb-minnav a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
/* ocean hero — pure CSS gradient, no image */
.pkb-hero {
  position: relative; aspect-ratio: 16 / 6.6; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--hairline);
}
.pkb-ocean {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(180deg, var(--sky-600) 0%, var(--sky-800) 38%, var(--sky-950) 100%);
}
.pkb-ocean::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 22% 14%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(40% 30% at 85% 80%, rgba(0, 0, 0, 0.35), transparent 70%);
}
/* cover image — fills the hero, sits above the gradient; if the src is broken
   the controller-free onerror removes it and the ocean placeholder shows. */
.pkb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* bento stat grid */
.pkb-bento { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .pkb-bento { grid-template-columns: 1fr 1fr; } }
.pkb-bento-cell {
  padding: 22px 24px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.pkb-bento-cell.lead { display: flex; flex-direction: column; justify-content: center; }
.pkb-bento-cell .k { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.pkb-bento-cell .v {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl);
  letter-spacing: -0.02em; color: var(--ink); margin-top: 9px; line-height: 1;
}
.pkb-bento-cell.lead .v { font-size: 42px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pkb-bento-cell .v .u { font-size: var(--text-md); font-weight: 500; color: var(--muted); }
.pkb-bento-cell .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
/* blocks + cards — titles live INSIDE the card as the first row (initialism),
   separated from the body by a hairline. The card owns no padding; the head row
   and each section's body wrapper manage their own. */
.pkb-prose { font-size: var(--text-md); line-height: 1.65; color: var(--gray-700); max-width: 70ch; }
/* Card shell mirrors the DiveOS booking-detail card (.bk-detail .card, #67):
   radius-lg, border-only (no shadow), an icon + uppercase eyebrow head with NO
   hairline divider (padding 22/24/0), body padding 22/24. Package-scoped so the
   generic `.card` class stays owned by booking detail. */
.pkb-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; padding: 0; }
.pkb-cardhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px 0;
}
.pkb-cardhead .t {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
.pkb-cardhead .t svg { flex-shrink: 0; color: var(--muted-2); }
.pkb-cardhead .ct {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--muted-2); white-space: nowrap;
}
/* per-section body wrappers — head has no bottom padding, so bodies own the
   gap below the eyebrow (DS card body = 22/24). */
.pkb-cardbody--pad { padding: 18px 24px 22px; }
/* highlights */
.pkb-cardbody--acc { padding: 6px 24px 14px; }
/* accommodation */
.pkb-cardrows { padding-top: 12px; }
/* items / extras row lists (rows own their inset) */
/* in-card empty state — clean muted row */
.pkb-cardempty { display: flex; align-items: center; gap: 10px; padding: 18px 24px 22px; font-size: var(--text-sm); color: var(--muted); }
.pkb-cardempty .ic { color: var(--muted-2); display: flex; flex-shrink: 0; }
/* highlights */
.pkb-vhls { -moz-columns: 2; columns: 2; -moz-column-gap: 32px; column-gap: 32px; }
@media (max-width: 720px) { .pkb-vhls { -moz-columns: 1; columns: 1; } }
.pkb-vhl { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: var(--text-sm); color: var(--gray-700); line-height: 1.4; -moz-column-break-inside: avoid; break-inside: avoid; }
.pkb-vhl .ic { color: var(--accent); flex-shrink: 0; margin-top: 1px; display: flex; }
/* item rows */
.pkb-itemrow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--hairline-2); }
.pkb-itemrow:first-child { border-top: 0; }
.pkb-itemrow .kind { width: 36px; height: 36px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pkb-itemrow .kind.dive { background: var(--sky-50); color: var(--sky-700); }
.pkb-itemrow .kind.equip { background: var(--gray-100); color: var(--gray-600); }
.pkb-itemrow .nm { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.pkb-itemrow .qty { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.pkb-itemrow .type { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* pricing viz */
.pkb-pviz { padding: 24px 26px; }
.pkb-pviz .sell { display: flex; align-items: baseline; gap: 12px; }
.pkb-pviz .sell .amt { font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -0.02em; color: var(--ink); }
.pkb-pviz .sell .per { font-size: var(--text-sm); color: var(--muted); }
.pkb-pviz-bar { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--gray-100); margin: 28px 0 8px; }
.pkb-pviz-bar.live { background: linear-gradient(90deg, var(--cancelled-bg), var(--confirmed-bg) 50%, var(--briefing-bg)); }
.pkb-pviz-bar .pos { position: absolute; top: -5px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--surface); border: 2.5px solid var(--accent); transform: translateX(-50%); box-shadow: var(--shadow-sm); }
.pkb-pviz-bar .pos::after { content: ""; position: absolute; inset: 3.5px; border-radius: var(--radius-pill); background: var(--accent); }
.pkb-pviz-scale { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.pkb-pviz-scale .s { display: flex; flex-direction: column; gap: 2px; }
.pkb-pviz-scale .s.mid { align-items: center; }
.pkb-pviz-scale .s.end { align-items: flex-end; }
.pkb-pviz-scale .lbl { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
.pkb-pviz-scale .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pkb-pviz-scale.muted .val { color: var(--muted-2); }
/* accommodation */
.pkb-acc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pkb-acc-head .ic { color: var(--accent); display: flex; }
.pkb-acc-head .nm { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.pkb-acc-head .meta { margin-left: auto; font-size: var(--text-xs); color: var(--muted); }
.pkb-acc-rate { display: grid; gap: 0; padding: 4px 0; }
.pkb-acc-line { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hairline-2); }
.pkb-acc-line:first-child { border-top: 0; }
.pkb-acc-line .k { font-size: var(--text-sm); color: var(--gray-700); }
.pkb-acc-line .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--ink); }
/* extras tiles */
.pkb-pmstile { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--hairline-2); }
.pkb-pmstile:first-child { border-top: 0; }
.pkb-pmstile .q { width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; }
.pkb-pmstile .nm { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.pkb-pmstile .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; }
.pkb-pmstile .amt .each { font-size: var(--text-xs); color: var(--muted-2); }
/* gate note */
.pkb-gate-note { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--gray-50); border: 1px dashed var(--hairline-strong); border-radius: var(--radius); font-size: var(--text-sm); color: var(--muted); }
.pkb-gate-note .ic { color: var(--muted-2); flex-shrink: 0; display: flex; }
/* ============================================================
   11 · STORY step (story-step.md) — st-form
   Diver-facing marketing copy: short desc, long desc (Trix,
   restyled into .st-editor), cover image, highlights list.
   Lives inside the data-wide centered column (720px, left form).
   ============================================================ */
.st-form { text-align: left; display: flex; flex-direction: column; gap: 30px; margin-top: 36px; }
.st-block { display: flex; flex-direction: column; gap: 9px; }
.st-blockhead { display: flex; justify-content: space-between; align-items: baseline; }
.st-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.st-counter { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.st-counter.over { color: var(--error); }
.st-hint { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--muted-2); }
/* shared input recipe (short desc + add-a-highlight) */
.st-input,
.st-hladd input {
  height: 40px; padding: 0 13px; box-sizing: border-box;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink);
  background: var(--surface); border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.st-input { width: 100%; }
.st-input::-moz-placeholder, .st-hladd input::-moz-placeholder { color: var(--muted-2); }
.st-input::placeholder,
.st-hladd input::placeholder { color: var(--muted-2); }
.st-input:focus,
.st-hladd input:focus {
  outline: none; border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* long description — .st-editor wraps the Trix editor; its native toolbar is
   hidden in favor of the .st-toolbar chrome wired in story_controller. */
.st-editor {
  border: 1px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.st-editor:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.st-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: var(--surface-alt); border-bottom: 1px solid var(--hairline); }
.st-tbtn {
  width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.st-tbtn:hover { background: var(--surface); border-color: var(--hairline); color: var(--ink); }
.st-tdiv { width: 1px; height: 18px; background: var(--hairline); margin: 0 5px; }
/* Trix editor styled as the textarea; native toolbar suppressed */
.st-editor trix-toolbar { display: none; }
.st-editor trix-editor {
  display: block; min-height: 132px; padding: 13px 14px; box-sizing: border-box;
  font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; color: var(--ink);
  border: 0; outline: none; resize: vertical; overflow: auto;
}
.st-editor trix-editor:empty:not(:focus)::before { color: var(--muted-2); }
/* cover image — single container drives both states via :has() on the preview */
.st-cover {
  position: relative; width: 100%; cursor: pointer;
  background: var(--surface-alt); border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.st-cover.is-dragover { border-color: var(--accent); background: var(--accent-softer); }
.st-cover.is-invalid { border-color: var(--cancelled-border); background: var(--cancelled-bg); }
.st-cover:hover { border-color: var(--accent); background: var(--accent-softer); }
.st-cover__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-cover__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 30px 24px; text-align: center; pointer-events: none;
}
.st-cover__empty .ic { color: var(--muted-2); transition: color var(--t-fast) ease; }
.st-cover:hover .st-cover__empty .ic { color: var(--accent); }
.st-cover__empty .t { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.st-cover__empty .s { font-size: var(--text-xs); color: var(--muted-2); max-width: 40ch; line-height: 1.45; }
.st-cover__img { display: none; width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius); }
.st-cover-edit { display: none; }
/* filled state: a preview image is present (not .hidden) */
.st-cover:has(.st-cover__img:not(.hidden)) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
.st-cover:has(.st-cover__img:not(.hidden)):hover { border-color: var(--hairline); background: transparent; }
.st-cover:has(.st-cover__img:not(.hidden)) .st-cover__img { display: block; }
.st-cover:has(.st-cover__img:not(.hidden)) .st-cover-edit {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: var(--text-xs); font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
/* highlights list */
.st-hls { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
.st-hls:empty { display: none; }
.st-hl { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); color: var(--ink); }
.st-hl:first-child { border-top: 0; }
.st-hl .ic { color: var(--accent); flex-shrink: 0; display: flex; }
.st-hl .tx { flex: 1; min-width: 0; }
.st-hl .rm {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted-2); cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.st-hl .rm:hover { background: var(--surface-alt); color: var(--error); }
/* add-a-highlight row */
.st-hladd { display: flex; gap: 8px; }
.st-hladd input { flex: 1; }
.st-hladd button {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px;
  font-size: var(--text-sm); font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.st-hladd button:hover:not(:disabled) { background: var(--accent); color: var(--surface); }
.st-hladd button:disabled { opacity: 0.5; cursor: default; }
/* Confirm dialog — styled replacement for native confirm(), wired via
   Turbo.setConfirmMethod (support/confirm_dialog.js). DS component. */
/* ─────────────────────────────────────────────────────────────────────
   Confirm dialog — DiveOS design-system component (promoted 2026-06-20).

   The single styled replacement for the browser's native confirm() popup.
   Wired globally via Turbo.setConfirmMethod (support/confirm_dialog.js), so
   every `data-turbo-confirm="…"` across the app renders this dialog instead
   of the OS chrome. Built on the native <dialog> element (top-layer + free
   backdrop + Escape handling), mirroring the .arena-modal pattern in modal.css.

   Token-only. The OK button inherits destructive styling when the triggering
   control is destructive (see the JS); otherwise it is the primary accent.
   ───────────────────────────────────────────────────────────────────── */
/* Do NOT set `display` on the base — the UA `dialog:not([open]){display:none}`
   must stay in effect so the closed dialog never blocks page interaction. */
dialog.dv-confirm {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
dialog.dv-confirm[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
dialog.dv-confirm::backdrop {
  background-color: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.dv-confirm__panel {
  width: 100%;
  max-width: 420px;
  margin: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.dv-confirm__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dv-confirm__msg {
  margin: 0 0 22px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}
.dv-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* dv-select — custom DS dropdown, progressive enhancement of native <select>
   (dv_select_controller.js). Replaces Select2 for non-ajax selects. */
/* ── dv-select ─────────────────────────────────────────────────────────────
   Custom design-system dropdown. Progressive enhancement of a native <select>:
   the native element stays in the DOM (source of truth for submit/validation)
   and is visually hidden; this UI is layered on top and kept in sync.
   Ported from tmp/form-elements-preview.html (.dv-field / .dv-pop / .dv-opt /
   .dv-search). Token-only.
   ────────────────────────────────────────────────────────────────────────── */
/* Visually-hidden native select — stays focusable + submittable (NOT display:none) */
.dv-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dv-select { position: relative; }
/* ── Touch / coarse-pointer fallback ──────────────────────────────────────
   On touch devices the controller (dv_select_controller connect()) skips the
   custom .dv-pop popup and keeps the native <select> interactive so a tap opens
   the OS picker. The native select is layered transparently OVER the styled
   .dv-field trigger (which is visual-only here), so the field shows the design-
   system look while the tap target is the real native control. */
.dv-select--native > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* Trigger */
.dv-field {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dv-field:hover { border-color: var(--accent); }
.dv-field.is-open,
.dv-field:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.dv-field__val { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-field__val.is-placeholder { color: var(--text-muted); }
.dv-field__icon { color: var(--text-muted); flex-shrink: 0; display: inline-flex; }
/* Compact size — inline selects in dense contexts (e.g. the Today to-schedule
   card headers), smaller than the 46px filter-row default. A real component
   variant, not a per-surface height hack. */
.dv-select--sm .dv-field {
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--text-xs);
}
.dv-select--sm .dv-field__icon svg { width: 14px; height: 14px; }
/* Menu */
.dv-pop {
  position: absolute;
  z-index: 30;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
  padding: 6px;
  /* Never narrower than a legible floor: a compact (--sm) or otherwise narrow
     trigger must still open a menu wide enough that short labels ("No grouping",
     "All statuses") don't wrap. Capped so a genuinely long label wraps
     gracefully instead of forcing a huge menu. */
  min-width: max(100%, 12rem);
  max-width: min(24rem, 92vw);
  max-height: 320px;
  overflow-y: auto;
}
/* Rich two-line rows (diver→session picker) need room so site/guide don't
   truncate to "H · G.." — widen the popup past the (often narrow) trigger. */
.dv-pop:has(.dv-opt--rich) {
  min-width: min(340px, 92vw);
}
/* Option */
.dv-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
}
.dv-opt:hover,
.dv-opt.is-active { background: var(--surface-alt); }
.dv-opt[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
}
.dv-opt__check { margin-left: auto; color: var(--accent); opacity: 0; display: inline-flex; flex-shrink: 0; }
.dv-opt[aria-selected="true"] .dv-opt__check { opacity: 1; }
.dv-opt.is-disabled { color: var(--text-muted); cursor: not-allowed; opacity: .6; }
/* Rich two-line rows (diver → dive-session picker, #199). The row markup is
   supplied via <option data-rich-html> and rendered inside .dv-opt__rich.
   Used by both the crew/roster picker and the Today "to schedule" diver
   card's trip picker (ToScheduleHelper#trip_option_html) — one mechanism,
   not two: this superseded diver-card-only .dv-opt__main/.dv-opt__sub 2-line
   variant, which duplicated the same "which session?" disambiguation. */
.dv-opt--rich { align-items: flex-start; padding: 9px 10px; }
.dv-opt__rich { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dv-opt__rich .dv-opt-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dv-opt__rich .dv-opt-line--head { justify-content: space-between; }
.dv-opt__rich .dv-opt-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dv-opt__rich .dv-opt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
}
.dv-opt__rich .dv-opt-meta .truncate,
.dv-opt__rich .dv-opt-title .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-opt__rich [data-lucide],
.dv-opt__rich svg { width: 13px; height: 13px; flex-shrink: 0; }
.dv-opt--rich .dv-opt__check { align-self: center; }
/* Search header (component-scoped element).
   Named `.dv-select__search` (not the generic `.dv-search`, which is a separate
   search field owned by package_builder.css) so the two don't collide — that
   collision previously stacked package_builder's focus ring on this dropdown. */
.dv-select__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
}
/* ONE focus indicator: a single ring around the whole search box. */
.dv-select__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.dv-select__search svg { color: var(--text-muted); flex-shrink: 0; }
.dv-select__search input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--text-sm);
  width: 100%;
  color: var(--text-primary);
  background: transparent;
}
/* The <input> is a bare type="text", so @tailwindcss/forms (Bullet Train
   default) paints its own border + ring on :focus. The container already shows
   focus, so suppress the input's ring — one clean indicator, not the BT box. */
.dv-select__search input:focus,
.dv-select__search input:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
  --tw-ring-shadow: 0 0 transparent;
  --tw-ring-offset-shadow: 0 0 transparent;
}
/* Empty state for search */
.dv-pop__empty {
  padding: 10px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}
/* ─── Description list (.dv-desclist) ────────────────────────────────────
   Formalized key/value description-list component. Promotes the earlier
   `.dv-kv` pattern into a proper <dl> with named variants. Default is the
   STACKED multi-column grid (muted label on TOP, ink value BELOW) the
   info_card bodies rely on — the eye scans straight down, no full-width
   eye travel, no per-row dividers. Token-driven, light-only.

   API
     .dv-desclist                      the <dl>: responsive auto-fill grid
     .dv-desclist__row                 a <div> wrapping one dt + dd
     .dv-desclist__term                the <dt> (label: 12px, muted)
     .dv-desclist__desc                the <dd> (value: 14px, ink)
   Variants (on .dv-desclist)
     --inline      term left / desc right on one line (settings layout)
     --striped     alternating row tints + hairline dividers
   Modifier (on .dv-desclist__row)
     --full        row spans all grid columns (long values)

   Supersedes the retired `.dv-kv` pattern — Waiver show now renders this
   component; `.dv-kv*` and the `kv_row` partial no longer exist. */
.dv-desclist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px 28px;
  margin: 0;
}
.dv-desclist__row {
  min-width: 0;
}
.dv-desclist__row--full {
  grid-column: 1 / -1;
}
.dv-desclist__term {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-bottom: 3px;
}
.dv-desclist__desc {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.45;
  margin: 0;
  word-break: break-word;
}
.dv-desclist__desc a {
  color: var(--accent);
}
/* ── --inline: term left, desc right, one line per row (settings layout) ── */
.dv-desclist--inline {
  display: block;
}
.dv-desclist--inline .dv-desclist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.dv-desclist--inline .dv-desclist__row--full {
  grid-column: auto;
}
.dv-desclist--inline .dv-desclist__term {
  margin-bottom: 0;
  flex: 0 0 auto;
}
.dv-desclist--inline .dv-desclist__desc {
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
}
/* ── --striped: alternating tints + hairline dividers (best with --inline) ── */
.dv-desclist--striped {
  display: block;
}
.dv-desclist--striped .dv-desclist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.dv-desclist--striped .dv-desclist__row:first-child {
  border-top: 1px solid var(--hairline);
}
.dv-desclist--striped .dv-desclist__row:nth-child(odd) {
  background: var(--surface-alt);
}
.dv-desclist--striped .dv-desclist__row--full {
  grid-column: auto;
}
.dv-desclist--striped .dv-desclist__term {
  margin-bottom: 0;
  flex: 0 0 auto;
}
.dv-desclist--striped .dv-desclist__desc {
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
}
/* dive-chip — one dive-type slice of a diver's unrostered seats on the Today
   panel To-schedule list (ToScheduleQuery::DiveChip). Diver grouping fix. */
/* Today panel · "To schedule" list — diver grouping (Concept B).
   One card per diver; each dive-type slice is a pill ("chip"). Duplicate dive
   types collapse into one chip with a ×N count, so a guest with several dives
   shows once, not once per dive (ToScheduleQuery::DiverGroup / DiveChip).
   Layout mirrors the approved mockup: clean cards on canvas, no colored band. */
/* ── Section + date-group rhythm ─────────────────────────────────── */
.to-schedule__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.date-block + .date-block {
  margin-top: 28px;
}
.date-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.date-header__spacer {
  flex: 1;
}
/* Accordion trigger — the date row is a button that collapses its diver cards.
   Chevron on the left is the disclosure affordance; hover tints the hit area. */
.date-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-left: -8px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.date-toggle:hover {
  background: var(--surface-alt);
}
.date-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.date-toggle__icon {
  display: inline-flex;
  color: var(--muted-2);
  transition: transform 200ms ease;
}
.diver-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* dive_chip.css is imported after Tailwind, so .diver-cards{display:flex} would
   beat the utility .hidden{display:none} and the accordion couldn't collapse.
   This compound selector (0,2,0) lets the accordion's .hidden win. */
.diver-cards.hidden {
  display: none;
}
/* ── Diver card ──────────────────────────────────────────────────── */
/* Compound selector (.dv-card.diver-card) so these win over card.css's
   .dv-card regardless of @import order: our own 14/16 padding (the card ships
   padding:0 + __head/__body) and overflow:visible so a chip's popover isn't
   clipped by the card's rounded-corner overflow:hidden. */
.dv-card.diver-card {
  padding: 14px 16px;
  overflow: visible;
}
.diver-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Trip picker — the DS dv-select (compact --sm variant), fixed width so every
   card's control is the same size regardless of trip-name length; the native
   select is width:auto and would otherwise size to its longest option, giving
   each card a different width. "Place all" is .dv-btn--sm to match the ~34px
   compact field. */
.diver-card__trip {
  width: 168px;
  flex-shrink: 0;
}
.diver-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.diver-card__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.diver-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
/* #287 — the name is a drawer link into the guest's booking; keep it reading
   as the card title, reveal it's interactive on hover. */
a.diver-card__title {
  text-decoration: none;
}
a.diver-card__title:hover {
  color: var(--accent);
  text-decoration: underline;
}
.diver-card__spacer {
  flex: 1;
}
.diver-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.diver-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ── Chip row ────────────────────────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-2);
}
/* The pill itself. Holds an optional select-checkbox + a disclosure trigger,
   so clicking the checkbox selects (no popover) while clicking the label/caret
   opens the trip picker — the two never fight over one click target. */
.dive-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--ink);
  position: relative;
}
/* Plain (no-trip) pills carry no controls, so keep symmetric padding. */
.dive-chip:not(:has(.chip-check)) {
  padding: 4px 10px;
}
.dive-chip:has(.diveos-check__input:checked),
.dive-chip:has(.dive-chip-menu[open]) {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
/* The canonical .diveos-check sits inside the pill as the select control —
   no text label, so drop its label gap and center the 18px box in the pill. */
.dive-chip__check {
  gap: 0;
  align-items: center;
}
.dive-chip__check .diveos-check__box {
  margin-top: 0;
}
.dive-chip__qty {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
/* The disclosure trigger inside the pill — label + qty + caret. */
.dive-chip-menu {
  display: inline-flex;
  align-items: center;
}
.dive-chip__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.dive-chip__trigger::-webkit-details-marker,
.dive-chip__trigger::marker {
  display: none;
  content: "";
}
.dive-chip__caret {
  color: var(--muted-2);
  transition: transform 120ms ease;
}
.dive-chip-menu[open] .dive-chip__caret {
  transform: rotate(180deg);
}
/* ── Per-chip trip picker popover ────────────────────────────────── */
.chip-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 4px;
}
.chip-popover__label {
  padding: 6px 8px 4px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.chip-popover__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.chip-popover__opt:hover:not(:disabled) {
  background: var(--surface-alt);
}
.chip-popover__opt:disabled {
  color: var(--muted-2);
  cursor: default;
}
/* dv-datepicker — custom DS date picker, vanilla-JS two-month calendar
   (controllers/fields/date_controller.js). Replaces daterangepicker/jQuery. */
/* ── dv-datepicker ─────────────────────────────────────────────────────────
   Custom design-system date picker. Vanilla-JS calendar replacing the
   daterangepicker (jQuery) vendor lib for `fields--date` fields. Progressive
   enhancement: the gem's `.date-input` markup stays (hidden field = submit
   source of truth + display field), and this UI is layered on the display
   field's wrapper. Token-only.

   Ported from tmp/form-elements-preview.html (.cal / .cals / .cal__*). The
   .dv-field / .dv-pop trigger + popover shells are shared with dv_select.css;
   only datepicker-specific rules live here.
   ──────────────────────────────────────────────────────────────────────── */
/* Wrapper turns relative so the popover can anchor to the trigger. */
.dv-datepicker { position: relative; }
/* The native gem inputs (display + hidden) stay in the DOM but are visually
   hidden. The display input remains the value source the controller writes to;
   we mirror its value into .dv-field__val. */
.dv-datepicker__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Trigger — reuses .dv-field look from dv_select.css. The calendar icon sits
   on the LEFT of the value (matches approved preview row). */
.dv-datepicker .dv-field { justify-content: flex-start; }
.dv-datepicker .dv-field__val.is-placeholder { color: var(--text-muted); }
/* ── Calendar popover body ── */
/* #291 — components/popover.css (the Trip v4 roster port) is @imported AFTER
   this file and sets a generic `.dv-pop { width: 320px; overflow: hidden }`,
   which at equal specificity would win and force the two-month calendar (2×260px
   = 540px) to wrap + clip. Qualify with `.dv-pop` so this variant's width wins
   regardless of import order, and keep overflow visible so nothing is clipped. */
.dv-pop.dv-pop--cal {
  padding: 12px;
  width: -moz-max-content;
  width: max-content;
  min-width: auto;
  /* dv_select.css `.dv-pop` also caps max-width at min(24rem,92vw)=384px and
     max-height at 320px; both bleed onto this shared class. 384px is narrower
     than the two months (540px), so with flex nowrap they'd shrink to ~half
     size — the "cramped / design gone" look. Clear both caps. */
  max-width: none;
  max-height: none;
  overflow: visible;
}
/* Scoped to the popover — `.cal` / `.cals` are generic enough to collide with
   unrelated markup (e.g. the booking ticketband's `<span class="cal">`), so they
   must never leak as bare global selectors. */
/* #291 — nowrap so the two months always sit side by side. With flex-wrap:wrap
   a wrapping flex container resolves `width:max-content` to ~one month wide, so
   the second month wrapped below and overflowed the popover. nowrap makes
   max-content sum both months, and the wizard is wide enough to show them. */
.dv-pop--cal .cals { display: flex; gap: 20px; flex-wrap: nowrap; }
.dv-pop--cal .cal { width: 260px; padding: 6px; }
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
}
.cal__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.cal__nav {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
}
.cal__nav:hover { background: var(--surface-alt); color: var(--text-primary); }
.cal__nav:disabled,
.cal__nav.is-hidden { visibility: hidden; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
}
.cal__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cal__day.is-empty { cursor: default; }
.cal__day:not(.is-empty):hover { background: var(--surface-alt); }
.cal__day.is-muted { color: var(--border-strong); }
/* before today — lighter, but STILL selectable (not disabled) */
.cal__day.is-past { color: #9CA3AF; }
.cal__day.is-today { font-weight: 700; color: var(--accent); }
.cal__day.is-sel { background: var(--accent); color: #fff; font-weight: 600; }
.cal__day.is-range { background: var(--accent-light); color: var(--accent-strong); border-radius: 0; }
.cal__day.is-range.r-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal__day.is-range.r-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* keyboard focus cursor */
.cal__day.is-focus { box-shadow: inset 0 0 0 2px var(--accent); }
/* keyboard focus cursor on the selected day shouldn't double up the ring */
.cal__day.is-sel.is-focus { box-shadow: inset 0 0 0 2px #fff; }
/* ── Time row (only for include-time fields) ──
   Ported from tmp/form-elements-preview.html (.dv-time / .dv-seg / .dv-ampm).
   Reused standalone by fields--time (dv_timepicker via @import of this file). */
.cal__time {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 2px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.cal__time-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
/* ── .dv-time component (HH:MM segment + AM/PM toggle) ── */
.dv-time { display: inline-flex; align-items: center; gap: 10px; width: -moz-max-content; width: max-content; }
.dv-seg {
  flex: 0 0 auto;        /* don't stretch/shrink inside a form flex/grid cell */
  display: inline-flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 38px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.dv-seg:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.dv-seg input {
  flex: 0 0 auto;        /* never collapse below content width */
  width: 32px;
  min-width: 32px;
  box-sizing: content-box;
  padding: 0;
  text-align: center;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--text-md);
  height: 100%;
  color: var(--text-primary);
  background: transparent;
  -moz-appearance: textfield;
}
.dv-seg input::-webkit-outer-spin-button,
.dv-seg input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dv-seg__c { color: var(--text-muted); font-size: var(--text-md); }
.dv-ampm {
  display: inline-flex;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dv-ampm button {
  border: none;
  background: var(--surface);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0 16px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.dv-ampm button + button { border-left: 1px solid var(--border-strong); }
.dv-ampm button.on { background: var(--accent); color: #fff; }
.dv-ampm button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
/* Hidden native time input — stays the submission source of truth. */
.dv-time__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ── Footer (clear) ── */
.cal__foot {
  display: flex;
  justify-content: flex-end;
  padding: 8px 6px 2px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.cal__clear {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.cal__clear:hover { background: var(--surface-alt); color: var(--text-primary); }
/* dv-fileupload — custom DS file upload, drop zone + file rows
   (controllers/fields/file_field_controller.js). Re-skins native file input. */
/* ── dv-fileupload ──────────────────────────────────────────────────────────
   Custom design-system file upload. Progressive enhancement of a native
   <input type="file">: the native input stays in the DOM (source of truth for
   submit / direct-upload) and is visually hidden; this drop zone + file rows
   are layered on top and kept in sync by the fields--file-field controller.
   Ported from tmp/form-elements-preview.html (.dv-upload / .dv-file). Token-only.
   ────────────────────────────────────────────────────────────────────────── */
/* Drop zone — click target + drag-and-drop surface. Default size is centered;
   --sm / --md modifiers are left-aligned, horizontal, and progressively
   smaller for use in tighter form layouts. */
.dv-upload {
  position: relative;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--canvas);
  min-height: 104px;
  padding: 18px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.dv-upload:hover,
.dv-upload.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dv-upload:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.dv-upload__icon {
  color: var(--accent);
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dv-upload__icon .lucide { display: block; }
.dv-upload__t {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.dv-upload__t b { color: var(--accent); font-weight: 600; }
.dv-upload__h {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
/* --md — horizontal, left-aligned, no hint growth beyond the row height. */
.dv-upload--md {
  min-height: 68px;
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
}
.dv-upload--md .dv-upload__icon {
  width: 38px;
  height: 38px;
}
.dv-upload--md .dv-upload__h { margin-top: 2px; }
/* --sm — compact single row, icon + inline label, no hint line. */
.dv-upload--sm {
  min-height: 44px;
  padding: 0 14px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
}
.dv-upload--sm .dv-upload__icon {
  width: 26px;
  height: 26px;
}
.dv-upload--sm .dv-upload__t {
  font-size: var(--text-xs);
}
.dv-upload--sm .dv-upload__h {
  display: none;
}
/* Uploaded / to-upload file row. */
.dv-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.dv-file__ic { color: var(--accent); display: flex; flex-shrink: 0; }
.dv-file__ic .lucide { display: block; }
/* Image preview thumbnail — shown in place of the generic file icon when the
   picked/persisted file is an image, so the diver can confirm the right photo
   is selected (not just its filename). */
.dv-file__thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  display: block;
}
.dv-file__nm {
  font-size: var(--text-sm);
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-file__sz {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
/* Action affordances on a row (download link, remove/cancel buttons). */
.dv-file__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: transparent;
  transition: color .12s, background .12s;
}
.dv-file__act:hover {
  color: var(--accent-strong);
  background: var(--surface-alt);
}
.dv-file__act .lucide { display: block; }
/* When a persisted file is flagged for removal, dim the row. */
.dv-file.is-removing {
  opacity: .55;
}
.dv-file.is-removing .dv-file__nm {
  text-decoration: line-through;
}
/* Upload progress bar (preserved from the gem markup). */
.dv-upload-progress {
  margin-top: 8px;
  overflow: hidden;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  position: relative;
}
.dv-upload-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: var(--accent);
  border-radius: var(--radius-sm);
}
.dv-upload-progress__label {
  position: relative;
  text-align: center;
  color: var(--text-secondary);
  padding: 2px 0;
}
/* New Booking wizard (v2) promoted components: WizardBars + WizardFooter,
   the cool blue-gray Summary Card, and the day-itinerary band + add-date
   control. Token-driven; scoped-var exceptions documented in each file. */
/* ============================================================
   wizard.css — the ONE DiveOS wizard pattern stylesheet.
   Self-contained on the bound DS tokens (_ds/styles.css). Ports the
   canonical Dive Plan / Trip Run chrome — white header band → stepper
   → gray body → ledger-first lists → readiness gate → sticky footer —
   so the Booking wizard is a literal visual sibling of those screens.
   The DS React components (Button, Input, Select, Avatar, …) sit INSIDE
   this chrome; this file only styles the wizard skeleton + booking rows.
   ============================================================ */
/* ── Wizard chrome scope ─────────────────────────────────────
   The prototype's global html/body/input resets are intentionally DROPPED:
   the booking wizard mounts INSIDE the DiveOS app layout, which already owns
   body typography, color, and smoothing. We only style the wizard's own
   chrome (scoped to .wz-shell) so nothing leaks to the rest of the app. */
:root {
  --wz-copy-ico: var(--muted-2); --wz-del-ico: var(--muted-2);
  /* near-white row/footer hover + diver-card head — no ramp token is this warm */
  --wz-tint: #FCFCFB;
  --wz-tint-2: #FBFCFD;
}
.wz-shell, .wz-main,
.wz-shell input, .wz-shell textarea, .wz-shell select, .wz-shell button {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features, normal);
}
.wz-shell { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); }
.wz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }
/* Inside the full-bleed shell the wizard is a fixed-height flex column:
   stepper (fixed) → .wz-body (scrolls) → footer (pinned at the bottom).
   The <form> wraps the body + footers, so it must be display:contents for
   them to participate as flex children of .wz-flow. */
.wz-flow { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wz-flow > form { display: contents; }
/* ── Stepper (horizontal, connected) — lifted from .dp-stepper ── */
.wz-stepper { width: 100%; }
.wz-steps { display: flex; max-width: var(--content-max); margin: 0 auto; }
.wz-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 11px; cursor: pointer; background: none; border: 0; font: inherit; padding: 2px 0 2px; }
.wz-step::before { content: ''; position: absolute; top: 20px; right: calc(50% + 30px);
  width: calc(100% - 60px); height: 2px; background: var(--hairline); z-index: 0; }
.wz-step:first-child::before { display: none; }
.wz-step.done::before, .wz-step.active::before { background: var(--accent); }
.wz-dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-weight: 600; font-size: var(--text-sm); border: 2px solid var(--hairline); color: var(--muted-2);
  background: var(--surface); transition: all .15s ease; }
.wz-step.done .wz-dot { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.wz-step.active .wz-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.wz-step:not(.reach):hover .wz-dot { }
.wz-step.reach:hover .wz-dot { border-color: var(--accent); }
.wz-step-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.wz-step.done .wz-step-label { color: var(--muted); }
.wz-step.active .wz-step-label { color: var(--accent); }
.wz-step[disabled] { cursor: default; }
/* ── Vertical spine stepper — lifted from .dp-spine ──────────── */
.wz-spine-grid { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 32px; align-items: start; }
@media (max-width: 1080px) { .wz-spine-grid { grid-template-columns: 1fr; } }
.wz-spine { position: sticky; top: 24px; }
.wz-vsteps { display: flex; flex-direction: column; }
.wz-vstep { display: flex; align-items: flex-start; gap: 14px; padding: 0 0 26px; position: relative;
  cursor: pointer; background: none; border: 0; font: inherit; text-align: left; width: 100%; }
.wz-vstep:last-child { padding-bottom: 0; }
.wz-vstep::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--hairline); }
.wz-vstep:last-child::before { display: none; }
.wz-vstep.done::before, .wz-vstep.active::before { background: var(--accent); }
.wz-vstep .wz-dot { width: 34px; }
.wz-vstep-body { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.wz-vstep-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.wz-vstep.done .wz-vstep-label { color: var(--muted); }
.wz-vstep.active .wz-vstep-label { color: var(--accent); }
.wz-vstep-sub { font-size: var(--text-xs); color: var(--muted-2); }
.wz-vstep[disabled] { cursor: default; }
/* ── Sleek segmented bar stepper (layout="bars") ───────────── */
.wz-bars { width: 100%; }
.wz-bars-inner { display: flex; gap: 10px; max-width: var(--content-max); margin: 0 auto; }
.wz-seg { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; background: none; border: 0; padding: 0; cursor: default; font: inherit; }
.wz-seg .bar { height: 4px; border-radius: 4px; background: var(--hairline); transition: background .25s cubic-bezier(.22,1,.36,1), height .15s ease, box-shadow .15s ease; }
.wz-seg.done .bar, .wz-seg.on .bar { background: var(--accent); }
.wz-seg.on .bar { height: 6px; box-shadow: 0 0 0 3px var(--accent-softer); }
.wz-seg .lbrow { display: flex; align-items: center; gap: 5px; min-width: 0; }
.wz-seg .lb { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s ease; }
.wz-seg.done .lb { color: var(--muted); }
.wz-seg.on .lb { color: var(--accent); font-weight: 700; }
/* The check pip is always in the markup (the Stimulus controller only toggles
   state classes, never rebuilds the segment) — show it ONLY on completed steps. */
.wz-seg .tk { display: none; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); color: var(--surface); flex-shrink: 0; }
.wz-seg.done .tk { display: inline-flex; }
.wz-seg.on .lbrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.wz-seg.nav { cursor: pointer; }
.wz-seg.nav:hover .bar { background: var(--accent); }
.wz-seg.done.nav:hover .bar { background: var(--accent-strong); }
.wz-seg.nav:hover .lb { color: var(--ink); }
.wz-seg.done.nav:hover .lb { color: var(--accent); }
/* Keyboard focus ring — the segments are real <button>s now (#85); match the
   wizard's house focus idiom rather than the bare UA outline. */
.wz-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 6px; }
/* ── Header ↔ wizard coupling variants (the `coupling` prop) ── */
/* width:100% so that inside the flex-column .wz-flow the auto side-margins
   don't override align-items:stretch and shrink-wrap the stepper. */
.wz-couple { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 40px; }
.wz-couple-detached { padding-top: 22px; padding-bottom: 4px; }
.wz-pills { display: flex; align-items: center; gap: 4px; max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 7px 10px; }
.wz-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--muted); background: none; border: 0; border-radius: var(--radius-pill); cursor: default; white-space: nowrap; }
.wz-pill .num { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; background: var(--gray-200); color: var(--muted); }
.wz-pill.done { color: var(--gray-700); }
.wz-pill.done .num { background: var(--accent); color: var(--surface); }
.wz-pill.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.wz-pill.on .num { background: var(--accent); color: var(--surface); }
.wz-pill.nav { cursor: pointer; }
.wz-pill.nav:hover { background: var(--surface-alt); }
.wz-pillsep { width: 14px; height: 1px; background: var(--hairline); flex-shrink: 0; }
/* card (V4) — stepper in a card atop the content */
.wz-couple-card { padding-top: 40px; padding-bottom: 6px; }
.wz-couple-card > .wz-bars { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 16px 24px; box-sizing: border-box; }
.wz-couple-card.bare > .wz-bars { background: transparent; border: 0; box-shadow: none; padding: 4px 0; }
/* Breathing room above the stepper at rest. The stepper is a fixed flex-child
   above the scrolling .wz-body, so once the body scrolls we collapse the margin
   to keep the stepper flush at the top. pos-wizard toggles .is-scrolled from a
   scroll listener on .wz-body. Scoped to .wz-flow so the showcase stepper is
   unaffected. */
.wz-flow > .wz-couple { margin-top: 2rem; transition: margin-top .2s ease;
  /* The page separator is semantically the sticky stepper's bottom edge — it
     belongs to the fixed header region, not the scrolling body. The gap below
     the stepper is carried here as padding-bottom (1.25rem, matching the theme
     space-y margin we strip off .wz-body), so the hairline lands AFTER that gap,
     just above the body content rather than hugging the stepper. Always on. (#129) */
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline); }
.wz-flow > .wz-couple.is-scrolled { margin-top: 0; }
/* header-right tracker (V3) */
.wz-hr-cluster { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.wz-track { display: flex; align-items: center; gap: 0; }
.wz-tstep { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: default; font: inherit; }
.wz-tstep.nav { cursor: pointer; }
.wz-tnum { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; border: 1.5px solid var(--hairline); color: var(--muted-2); background: var(--surface); }
.wz-tstep.done .wz-tnum { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.wz-tstep.on .wz-tnum { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
.wz-tlbl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.wz-tstep.on .wz-tlbl { color: var(--accent); }
.wz-tstep.done .wz-tlbl { color: var(--muted); }
.wz-tconn { width: 28px; height: 1.5px; background: var(--hairline); margin: 0 2px 18px; }
.wz-tconn.done { background: var(--accent); }
/* ── Gray body + centered inner column — lifted from .dp-body ── */
/* scrollbar-gutter: stable reserves the scrollbar track always, so the body
   width doesn't reflow when the vertical scrollbar appears/disappears — the
   other axis of the #129 stepper bounce. */
.wz-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; background: var(--canvas); }
/* Strip the theme's form-divide utility (form.form > :not([hidden]) ~
   :not([hidden])) off .wz-body — form_with's hidden CSRF/method inputs make
   .wz-body a subsequent sibling, so it otherwise inherits BOTH a border-top and
   a 1.25rem margin-top. The separator + that gap now live on the sticky stepper
   (see .wz-flow > .wz-couple: padding-bottom + border-bottom). !important defeats
   that higher-specificity compiled vendor rule. (#129) */
.wz-flow form.form > .wz-body { margin-top: 0 !important; border-top: 0 !important; }
.wz-inner { max-width: var(--content-max); margin: 0 auto; padding: 30px 40px 40px; }
.wz-inner.narrow { max-width: 880px; }
/* ── Header eyebrow — mono "Bookings / New" breadcrumb ───────── */
.wz-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.01em; margin-bottom: 6px; }
.wz-eyebrow-crumb { color: var(--muted); text-decoration: none; }
.wz-eyebrow-crumb:hover { color: var(--ink); }
.wz-eyebrow-sep { color: var(--muted-2); }
.wz-eyebrow-cur { color: var(--accent); font-weight: 500; }
/* ── Stage intro ──────────────────────────────────────────── */
.wz-stage-head { margin-bottom: 22px; }
.wz-stage-head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
  letter-spacing: -0.015em; color: var(--ink); }
.wz-stage-head p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; max-width: 64ch; }
/* ── Section head (label ABOVE the ledger — no card-in-card) ── */
.wz-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.wz-sec-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wz-sec-title .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.wz-sec-title .c { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
.wz-sec-head .a { font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font-family: inherit; padding: 0; }
.wz-sec-head .a:hover { color: var(--accent-strong); }
/* ── Ledger (single bordered frame for any list) — from .dp-ledger ── */
.wz-ledger { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.wz-row { display: grid; align-items: center; gap: 18px; padding: 16px 20px; position: relative;
  border-top: 1px solid var(--hairline-2); transition: background .12s ease; }
.wz-row:first-child { border-top: 0; }
.wz-row.link { cursor: pointer; }
.wz-row.link:hover { background: var(--wz-tint); }
.wz-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.wz-row.rail-accent::before { background: var(--accent); }
/* ledger sub-head (group divider band inside a ledger) */
.wz-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px; background: var(--sky-50); border-top: 1px solid var(--hairline-2); }
.wz-grouphead:first-child { border-top: 0; }
.wz-grouphead .nm { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); min-width: 0; }
.wz-grouphead .dts { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.wz-grouphead .sub { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.wz-grouphead.warm { background: var(--briefing-bg); }
.wz-grouphead.warm .nm { color: var(--briefing); }
/* ── Key/value block — from .dp-kv ──────────────────────────── */
/* stat strip — lifted from the DiveOS booking-detail .statstrip:
   General Sans 600 values, 10px tracked labels, hairline-2 dividers */
.wz-kv { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.wz-kv .cell { padding: 18px 22px; border-left: 1px solid var(--hairline-2); }
.wz-kv.cols-3 .cell:nth-child(3n+1) { border-left: 0; }
.wz-kv .k { display: flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wz-kv .k .ico { color: var(--muted-2); }
.wz-kv .v { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); margin-top: 11px; }
.wz-kv .v.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }
.wz-kv .v.dash { color: var(--muted-2); font-weight: 500; }
.wz-kv .v.nowrap { white-space: nowrap; }
.wz-kv .sub { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); font-weight: 400; margin-top: 7px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Readiness gate — from .dp-gate / .dp-req (Review + Payment) ── */
.wz-gate { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.wz-gate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.wz-gate-head .t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
.wz-gate-head .s { font-size: var(--text-sm); color: var(--muted); margin-top: 3px; }
.wz-gate-head .tot { text-align: right; }
.wz-gate-head .tot .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wz-gate-head .tot .v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); margin-top: 2px; }
.wz-req { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); }
.wz-req:first-of-type { border-top: 0; }
.wz-req .tick { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wz-req.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); }
.wz-req.no .tick { background: var(--briefing-bg); color: var(--briefing); }
.wz-req .rtxt { color: var(--ink); }
.wz-req .rtxt b { font-weight: 600; }
.wz-req .rstate { margin-left: auto; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; font-family: var(--font-mono); }
.wz-req.ok .rstate { color: var(--confirmed); }
.wz-req.no .rstate { color: var(--briefing); }
.wz-gate-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
/* ── Sticky footer (standardized Back / hint / Next) ─────────── */
.wz-foot { position: sticky; bottom: 0; z-index: 20; background: var(--surface);
  border-top: 1px solid var(--hairline); box-shadow: 0 -1px 2px rgba(17,24,39,.03); }
.wz-foot-inner { max-width: var(--content-max); margin: 0 auto; padding: 14px 40px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.wz-foot .grp { display: flex; align-items: center; gap: 10px; }
.wz-foot .grp.start { justify-self: start; }
.wz-foot .grp.center { justify-self: center; }
.wz-foot .grp.end { justify-self: end; }
/* Hairline divider between Back and the destructive Discard link. */
.wz-foot-sep { display: inline-block; width: 1px; align-self: stretch; min-height: 20px;
  margin: 0 2px; background: var(--hairline-strong); }
/* Quiet, never-filled destructive text-link (Discard exit). The ghost
   variant supplies the transparent base; this only recolours it rose. */
.dv-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.dv-btn--ghost:hover { background: var(--cancelled-bg); }
.btn-destructive { color: var(--cancelled); }
.btn-destructive:hover { color: var(--cancelled); }
.wz-foot-hint { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
.wz-foot-hint .kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px 6px; background: var(--gray-100); border: 1px solid var(--hairline); border-radius: 4px; color: var(--muted); }
.wz-foot-hint .req { display: inline-flex; align-items: center; gap: 6px; color: var(--briefing); font-weight: 600; }
.wz-foot .total { display: flex; align-items: baseline; gap: 9px; margin-right: 4px; }
.wz-foot .total .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wz-foot .total .v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
/* ════════════════════════════════════════════════════════════
   Booking-specific rows (still ledger-first; just column templates)
   ════════════════════════════════════════════════════════════ */
/* ── Guest result row ─────────────────────────────────────── */
.wz-guest { grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; }
.wz-guest .id { display: flex; align-items: center; gap: 9px; }
.wz-guest .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
.wz-guest .sub { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.wz-guest .sub .mono { font-family: var(--font-mono); white-space: nowrap; }
.wz-guest.sel { background: var(--accent-softer); }
.wz-pick { font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
/* outline tag badge (Hotel guest / Walk-in / Diver …) */
.wz-tagbadge { flex-shrink: 0; display: inline-flex; align-items: center; padding: 1px 8px; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.02em; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill); white-space: nowrap; }
.wz-changelink { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer; margin-top: 14px; }
.wz-changelink:hover { color: var(--accent-strong); }
/* guest search field (44px, search icon room at left) */
.wz-guest-search { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px 0 42px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); background: var(--surface);
  border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.wz-guest-search:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.wz-guest-results { margin-top: 14px; }
/* Resting/empty search state — bordered (no fill) so it reads as a panel, not floating. */
.wz-guest-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 24px; color: var(--muted); background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.wz-guest-empty .ico { color: var(--muted-2); margin-bottom: 12px; display: flex; }
.wz-guest-empty .t { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.wz-guest-empty .s { margin: 6px 0 0; font-size: var(--text-sm); }
/* setting row (email toggle) — tinted accent-softer when ON */
.wz-setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 16px 20px; margin-top: 20px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.wz-setrow.on { background: var(--accent-softer); border-color: var(--accent-border); }
/* DS ToggleSwitch (checkbox-backed) */
.wz-toggle { position: relative; display: inline-flex; flex-shrink: 0; }
.wz-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-toggle-track { display: inline-flex; align-items: center; width: 42px; height: 24px; padding: 2px;
  background: var(--gray-300); border-radius: 999px; transition: background .15s ease; }
.wz-toggle-thumb { width: 20px; height: 20px; background: var(--surface); border-radius: 50%;
  box-shadow: 0 1px 2px rgba(17,24,39,.18); transition: transform .15s cubic-bezier(.22,1,.36,1); }
.wz-toggle input:checked + .wz-toggle-track { background: var(--accent); }
.wz-toggle input:checked + .wz-toggle-track .wz-toggle-thumb { transform: translateX(18px); }
.wz-toggle input:focus-visible + .wz-toggle-track { box-shadow: 0 0 0 3px var(--focus-ring); }
.wz-setrow .lead { display: flex; gap: 13px; align-items: flex-start; }
.wz-setrow .ico { color: var(--muted-2); margin-top: 1px; }
.wz-setrow .t { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.wz-setrow .s { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.wz-setrow .s b { color: var(--ink); font-weight: 600; }
/* ── Diver block: section head + ledger ───────────────────── */
.wz-diver { margin-bottom: 26px; }
.wz-diver-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.wz-diver-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.wz-diver-id .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
.wz-name-input { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px dashed var(--input-border); padding: 2px 0; outline: none; min-width: 200px; }
.wz-name-input:focus { border-bottom-color: var(--accent); }
.wz-diver-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.wz-diver-tot { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--ink); }
.wz-diver-tot.zero { color: var(--muted-2); }
.wz-iconbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; }
.wz-iconbtn:hover { background: var(--gray-100); color: var(--cancelled); }
/* date chips */
.wz-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-dates .cap { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
.wz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 500; color: var(--accent); background: var(--accent-softer);
  border: 1px solid var(--accent-border); border-radius: 999px; white-space: nowrap; }
.wz-chip button { display: inline-flex; padding: 0; border: 0; background: none; color: var(--accent); opacity: .6; cursor: pointer; }
.wz-chip button:hover { opacity: 1; }
.wz-adddate { position: relative; display: inline-flex; }
.wz-adddate-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font: inherit; font-size: var(--text-xs);
  font-weight: 500; color: var(--accent); background: transparent; border: 1px dashed var(--accent-border); border-radius: 999px; cursor: pointer; }
.wz-adddate-btn:hover { background: var(--accent-softer); }
.wz-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 210px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 6px; z-index: 30; }
.wz-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; font: inherit; font-size: var(--text-sm);
  color: var(--ink); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.wz-menu button:hover { background: var(--gray-50); }
.wz-menu .ico { color: var(--muted-2); }
.wz-menu .empty { padding: 8px 10px; font-size: var(--text-xs); color: var(--muted-2); }
/* date sub-section inside a diver card */
.wz-datesec { border-top: 1px solid var(--hairline); }
.wz-datesec:first-child { border-top: 0; }
/* date as a real section title */
.wz-dsec-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 8px; }
.wz-dsec-title .lhs { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wz-dsec-title .cal { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.wz-dsec-title .d { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); }
.wz-dsec-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0;
  background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; opacity: 0.55; transition: opacity .12s, background .12s, color .12s; }
.wz-datesec:hover .wz-dsec-x { opacity: 1; }
.wz-dsec-x:hover { background: var(--gray-100); color: var(--ink); }
/* placeholder add row at the bottom of each date section */
.wz-dsec-add { display: flex; gap: 8px; padding: 8px 20px 16px; }
.wz-addph { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font: inherit; font-size: var(--text-xs); font-weight: 500;
  color: var(--accent); background: transparent; border: 1px dashed var(--accent-border); border-radius: var(--radius-pill); cursor: pointer; }
.wz-addph:hover { background: var(--accent-softer); }
.wz-addph.add { color: var(--confirmed); border-color: var(--confirmed-border); }
.wz-addph.add:hover { background: var(--confirmed-bg); }
/* add-date placeholder pinned at the bottom of the card */
.wz-adddate-row { padding: 12px 20px 14px; border-top: 1px solid var(--hairline); }
.wz-adddate.block { display: block; }
.wz-adddate.block .wz-adddate-btn { width: 100%; justify-content: center; height: 42px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.wz-adddate.block .wz-menu { width: 100%; }
/* line item row — editable price + per-item actions */
.wz-li { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 98px 92px 56px; align-items: center; gap: 12px; padding: 8px 20px; }
.wz-li .kind { display: inline-flex; justify-content: center; }
/* micro column header — printed once on the first item of each date section */
.wz-li-head { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 98px 92px 56px; gap: 12px; padding: 4px 20px 2px; }
.wz-li-head span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); }
.wz-li-head .h-qty { text-align: center; }
.wz-li-head .h-unit, .wz-li-head .h-total { text-align: right; }
.wz-li .kind.pkg { color: var(--accent); }
.wz-li .kind.add { color: var(--confirmed); }
.wz-li .qtywrap { display: flex; justify-content: center; }
.wz-li .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.wz-li-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.wz-li-acts .wz-iconbtn { opacity: 0.5; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.wz-li:hover .wz-li-acts .wz-iconbtn, .wz-li:focus-within .wz-li-acts .wz-iconbtn { opacity: 1; }
.wz-iconbtn.apply:hover { background: var(--accent-soft); color: var(--accent); }
/* tweakable row-action icon colors (copy / delete) — set the stroke directly
   (these are stroke icons; overrides their stroke="currentColor"). :root default = muted. */
.wz-li .wz-iconbtn.apply svg { stroke: var(--wz-copy-ico); }
.wz-li .wz-iconbtn.del svg { stroke: var(--wz-del-ico); }
.wz-li .wz-iconbtn.apply:hover { background: var(--accent-soft); }
.wz-li .wz-iconbtn.del:hover { background: var(--cancelled-bg); }
.wz-li-empty { padding: 9px 20px 13px; font-size: var(--text-sm); font-style: italic; color: var(--muted-2); }
/* Single diver card (accordion) — identity, dates and items in ONE frame */
.wz-dcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; margin-bottom: 14px; }
.wz-dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px; background: var(--wz-tint-2); border-bottom: 1px solid var(--hairline); }
.wz-dcard-head .wz-diver-id { gap: 11px; }
/* high-stakes diver removal — distinct from the line/chip × ; needs confirm */
.wz-dremove { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; }
.wz-dremove:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.wz-dconfirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px;
  background: var(--cancelled-bg); border: 1px solid var(--cancelled-border); border-radius: var(--radius-pill); }
.wz-dconfirm .q { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; }
.wz-dconfirm .yes { height: 28px; padding: 0 12px; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--surface);
  background: var(--cancelled); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.wz-dconfirm .no { height: 28px; padding: 0 10px; font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--muted);
  background: transparent; border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.wz-dconfirm .no:hover { color: var(--ink); }
.wz-dcard-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px;
  border-bottom: 1px solid var(--hairline-2); }
.wz-dcard-dates .cap { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
.wz-dcard-body { padding: 2px 0 8px; }
.wz-dcard-body .wz-datesec:first-child { border-top: 0; }
/* catalogue select shell */
.wz-sel { position: relative; min-width: 0; }
.wz-sel select { -moz-appearance: none; appearance: none; -webkit-appearance: none; width: 100%; height: 34px; padding: 0 30px 0 11px;
  font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); cursor: pointer; text-overflow: ellipsis; }
.wz-sel select:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.wz-sel .chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted-2); }
/* qty stepper — POS-sized touch targets (>=36px) */
.wz-qty { display: inline-flex; align-items: center; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.wz-qty button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.wz-qty button:hover { background: var(--gray-100); color: var(--ink); }
.wz-qty button:active { background: var(--gray-200); }
.wz-qty .n { min-width: 26px; text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
/* editable price field — persistent field affordance so it reads as editable at rest */
.wz-price { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); background: var(--gray-50); padding: 0 8px 0 9px; gap: 1px; transition: border-color .12s, box-shadow .12s, background .12s; cursor: text; }
.wz-price:hover { border-color: var(--gray-300); background: var(--surface); }
.wz-price:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface); }
.wz-price .cur { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.wz-price input { width: 56px; border: 0; background: transparent; outline: none; font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--ink); text-align: right; padding: 0; -moz-appearance: textfield; }
.wz-price input::-webkit-outer-spin-button, .wz-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* add-diver dashed button */
.wz-add-diver { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; width: 100%;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1.5px dashed var(--accent-border); border-radius: var(--radius-lg); cursor: pointer; }
.wz-add-diver:hover { background: var(--accent-softer); }
.wz-copy { display: flex; align-items: center; gap: 6px; padding: 11px 20px; background: var(--wz-tint);
  border-top: 1px solid var(--hairline-2); font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); border: 0; cursor: pointer; width: 100%; }
.wz-copy:hover { color: var(--accent-strong); }
/* ── Order summary rail (Step 2) ──────────────────────────── */
.wz-2col { display: grid; grid-template-columns: minmax(0,1fr) 332px; gap: 30px; align-items: start; }
@media (max-width: 1080px) { .wz-2col { grid-template-columns: 1fr; } .wz-sum { position: static; } }
.wz-sum { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.wz-sum-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.wz-sum-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.wz-sum-head .t { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.wz-sum-scroll { max-height: 44vh; overflow-y: auto; padding: 4px 18px; }
.wz-sum-grp { padding: 12px 0; border-top: 1px solid var(--hairline-2); }
.wz-sum-grp:first-child { border-top: 0; }
.wz-sum-grp .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.wz-sum-grp .gh .nm { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.wz-sum-grp .gh .nm.unset { color: var(--muted-2); }
.wz-sum-grp .gh .nm.warm { color: var(--gray-700); }
.wz-sum-grp .gh .tt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.wz-sum-line { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; }
.wz-sum-line .nm { color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-sum-line .dt { color: var(--muted-2); font-family: var(--font-mono); }
.wz-sum-line .amt { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; }
.wz-sum-line.empty { font-style: italic; color: var(--muted-2); }
.wz-sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.wz-sum-total .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wz-sum-total .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); }
/* Static Order summary panel — distinct cool slate hue vs the white editable cards */
.wz-sum-card.summary { background: var(--slate-100); border-color: var(--slate-300); }
.wz-sum-card.summary .wz-sum-head { border-bottom-color: var(--slate-200); }
.wz-sum-card.summary .wz-sum-head .t { color: var(--slate-500); }
.wz-sum-card.summary .wz-sum-grp { border-top-color: var(--slate-200); }
.wz-sum-card.summary .wz-sum-line .amt { color: var(--slate-500); }
.wz-sum-card.summary .wz-sum-total { background: var(--slate-200); border-top-color: var(--slate-300); }
/* ── Review line rows ─────────────────────────────────────── */
.wz-rev-li { display: grid; grid-template-columns: 22px minmax(0,1fr) 56px 92px; align-items: center; gap: 16px;
  padding: 13px 20px; border-top: 1px solid var(--hairline-2); }
.wz-rev-li .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); display: block; }
.wz-rev-li .dt { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; }
.wz-rev-li .qty { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--gray-700); }
.wz-rev-li .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.wz-rev-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.wz-rev-total .k { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.wz-rev-total .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; color: var(--ink); }
/* ── Payment ──────────────────────────────────────────────── */
.wz-addpay { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-pm { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-size: var(--text-sm);
  font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); cursor: pointer; transition: all .12s ease; }
.wz-pm:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); }
.wz-pm .ico { color: var(--muted); }
.wz-pm:hover .ico { color: var(--accent); }
.wz-payrow { display: grid; grid-template-columns: 168px 1fr 1fr 30px; gap: 16px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--hairline-2); }
/* unified payment card sections */
.wz-pay-add { padding: 16px 20px; }
/* title row inside a card */
.wz-cardtitle { display: flex; align-items: baseline; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--hairline); }
.wz-cardtitle .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.wz-cardtitle .c { font-size: var(--text-xs); color: var(--muted-2); }
.wz-paysec-head { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px 4px; border-top: 1px solid var(--hairline); }
.wz-paysec-head .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.wz-paysec-head .c { font-size: var(--text-xs); color: var(--muted-2); }
/* attribution — selectable staff chips + compact commission */
.wz-attr { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.wz-attr-search { position: relative; margin-bottom: 10px; max-width: 320px; }
.wz-attr-search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; display: flex; }
.wz-attr-search input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px 0 34px; font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.wz-attr-search input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.wz-attr-empty { font-size: var(--text-sm); color: var(--muted); font-style: italic; padding: 4px 2px; }
/* Selected agent/staff card (when picked via search rather than a chip). */
.wz-attr-selected { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; background: var(--accent-softer); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); }
.wz-attr-selected .badge { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.wz-attr-selected .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.wz-attr-selected .rm { display: inline-flex; color: var(--muted-2); background: none; border: 0; cursor: pointer; padding: 2px; }
.wz-attr-selected .rm:hover { color: var(--cancelled); }
.wz-attr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-attr-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.wz-attr-chip:hover { border-color: var(--accent-border); background: var(--accent-softer); }
.wz-attr-chip.on { border-color: var(--accent); background: var(--accent-softer); }
.wz-attr-chip .who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.wz-attr-chip .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.wz-attr-chip .role { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.wz-attr-chip.on .role { color: var(--accent); }
.wz-attr-chip .tick { display: inline-flex; color: var(--accent); margin-left: 2px; }
.wz-attr-comm { max-width: 280px; }
.wz-attr-commrow { display: flex; align-items: center; gap: 12px; }
.wz-attr-default { font-size: var(--text-xs); color: var(--muted); }
.wz-attr-default button { background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 0; margin-left: 6px; }
.wz-attr-default button:hover { color: var(--accent-strong); }
.wz-payrow > div { min-width: 0; }
.wz-fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; min-height: 14px; }
.wz-payrow .wz-rm { align-self: start; margin-top: 20px; }
.wz-payrow:first-child { border-top: 0; }
.wz-fl .req { color: var(--error); }
.wz-mi { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.wz-mi.mono { font-family: var(--font-mono); }
.wz-mi:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.wz-paysub { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
.wz-paysub.ok { color: var(--confirmed); }
.wz-pay-readonly { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); }
/* ── Done ─────────────────────────────────────────────────── */
.wz-done { max-width: 620px; margin: 12px auto 0; }
.wz-done-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 26px; }
.wz-done-ring { width: 60px; height: 60px; border-radius: 50%; background: var(--confirmed-bg); display: flex; align-items: center; justify-content: center; color: var(--confirmed); margin-bottom: 18px; }
.wz-done-hero h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; color: var(--ink); }
.wz-done-hero p { margin: 8px 0 0; font-size: var(--text-sm); color: var(--muted); max-width: 46ch; }
.wz-done-hero .ref { font-family: var(--font-mono); font-weight: 600; color: var(--gray-700); }
/* ── Compact density ──────────────────────────────────────── */
.wz-compact .wz-inner { padding-top: 22px; }
.wz-compact .wz-row, .wz-compact .wz-li, .wz-compact .wz-rev-li { padding-top: 6px; padding-bottom: 6px; }
.wz-compact .wz-req { padding-top: 11px; padding-bottom: 11px; }
.wz-compact .wz-diver { margin-bottom: 20px; }
/* small helpers */
.wz-flex { display: flex; align-items: center; }
.wz-mono { font-family: var(--font-mono); }
/* ════════════════════════════════════════════════════════════
   Selected-guest card (Step 1) — unmistakably "chosen"
   ════════════════════════════════════════════════════════════ */
.wz-selguest { border: 1.5px solid var(--accent); background: var(--accent-softer); border-radius: var(--radius-lg);
  overflow: hidden; }
.wz-selguest-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px;
  background: var(--accent); }
.wz-selguest-bar .lbl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--surface); }
.wz-selguest-bar .chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--surface); }
.wz-selguest-body { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.wz-selguest-body .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
/* Additional guests on Step 1 (party beyond the primary) */
.wz-party-sec { margin-top: 22px; }
.wz-party-lbl { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.wz-party-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hairline-2); }
.wz-party-row:first-child { border-top: 0; }
.wz-party-row .nm { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.wz-party-row .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.wz-party-row .sub .mono { font-family: var(--font-mono); }
.wz-addguest { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 14px; font: inherit;
  font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer; }
.wz-addguest:hover { background: var(--accent-softer); }
.wz-addpanel { margin-top: 18px; padding: 16px; background: var(--gray-50); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.wz-addpanel .wz-party-lbl { margin-bottom: 10px; }
.wz-addpanel .wz-changelink { margin-top: 12px; }
/* When the party card hosts the register form in place, drop its own card chrome
   so there's a single container (the form), not a card-within-a-card. */
.wz-addpanel.is-bare { padding: 0; background: transparent; border: 0; }
.wz-addpanel.is-bare .wz-reg-panel { margin-top: 0; }
/* The two party actions share one style: matching solid-stroke buttons. */
.wz-party-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.wz-party-actions .wz-addguest,
.wz-party-actions .wz-reg-link { margin-top: 0; padding: 9px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--accent); background: transparent; border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm); cursor: pointer; }
.wz-party-actions .wz-addguest:hover,
.wz-party-actions .wz-reg-link:hover { background: var(--accent-softer); color: var(--accent); }
/* ════════════════════════════════════════════════════════════
   Inline register-a-diver (Step 1) — two entry points, one panel
   ════════════════════════════════════════════════════════════ */
/* (A) Persistent register button — same solid-stroke style as "Add another
   guest" so every register/add affordance looks consistent. */
.wz-reg-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 14px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer; }
.wz-reg-link:hover { background: var(--accent-softer); color: var(--accent); }
/* (B) No-match empty state inside the results ledger */
.wz-reg-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 28px 24px; }
.wz-reg-empty-msg { font-size: var(--text-sm); color: var(--muted); }
.wz-reg-empty-msg .q { font-weight: 600; color: var(--ink); }
/* Secondary button — outline only, NO fill (register is a fallback here). */
.wz-reg-empty-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--accent); background: transparent;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .12s, color .12s; }
.wz-reg-empty-cta:hover { border-color: var(--accent); color: var(--accent-strong); }
/* Shared inline panel */
.wz-reg-panel { margin-top: 16px; padding: 18px; background: var(--gray-50);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.wz-reg-panel .wz-party-lbl { margin-bottom: 14px; }
.wz-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-reg-field { display: flex; flex-direction: column; }
.wz-reg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.wz-reg-cancel { padding: 9px 16px; font: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); cursor: pointer; }
.wz-reg-cancel:hover { background: var(--gray-50); }
.wz-reg-submit { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--surface); background: var(--accent);
  border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.wz-reg-submit:hover { background: var(--accent-strong); }
.wz-reg-errors { margin-bottom: 14px; padding: 10px 12px; font-size: var(--text-sm); color: var(--error);
  background: var(--cancelled-bg); border: 1px solid var(--cancelled-border); border-radius: var(--radius-sm); }
.wz-reg-errors > div + div { margin-top: 4px; }
@media (max-width: 540px) { .wz-reg-grid { grid-template-columns: 1fr; } }
/* Review summary — on-system entity header + dividerless KPI row */
.wz-rev-summary { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; margin-bottom: 24px; }
.wz-rev-party { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.wz-rev-party .who { min-width: 0; flex: 1; }
.wz-rev-party .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); }
.wz-rev-party .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-rev-party .sub .mono { font-family: var(--font-mono); }
.wz-rev-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.wz-rev-stats .cell { padding: 14px 22px; }
.wz-rev-stats .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wz-rev-stats .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
.wz-rev-stats .v.accent { color: var(--accent); }
/* ════════════════════════════════════════════════════════════
   ALT — Dives "Table" pattern (flat editable ledger)
   ════════════════════════════════════════════════════════════ */
.wz-tbl { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.wz-tbl-head, .wz-trow { display: grid; grid-template-columns: 168px 132px minmax(0,1fr) 96px 104px 96px 40px; gap: 14px; align-items: center; }
.wz-tbl-head { padding: 11px 20px; border-bottom: 1px solid var(--hairline); background: var(--wz-tint);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.wz-tbl-head .r, .wz-trow .amt { text-align: right; }
.wz-trow { padding: 9px 20px; border-top: 1px solid var(--hairline-2); }
.wz-trow:first-of-type { border-top: 0; }
.wz-trow .amt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.wz-trow .diver-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wz-trow .diver-cell .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-trow.rowspan-start { border-top: 1px solid var(--hairline); }
.wz-tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.wz-tbl-addrow { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--hairline-2); }
.wz-tbl-total { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--accent); }
/* ════════════════════════════════════════════════════════════
   ALT — Review "Invoice" document pattern
   ════════════════════════════════════════════════════════════ */
.wz-inv { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(17,24,39,.04)); overflow: hidden; }
.wz-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px; border-bottom: 1px solid var(--hairline); }
.wz-inv-head .brand { display: flex; align-items: center; gap: 11px; }
.wz-inv-head .brand .pname { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink); letter-spacing: -0.01em; }
.wz-inv-head .brand .tname { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.wz-inv-head .meta { text-align: right; }
.wz-inv-head .meta .doc { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.wz-inv-head .meta .ref { font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink); margin-top: 5px; }
.wz-inv-head .meta .dt { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.wz-inv-party { display: grid; grid-template-columns: 1fr 1fr; }
.wz-inv-party .cell { padding: 18px 30px; border-right: 1px solid var(--hairline-2); }
.wz-inv-party .cell:last-child { border-right: 0; }
.wz-inv-party .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wz-inv-party .v { font-size: var(--text-sm); color: var(--ink); margin-top: 7px; font-weight: 500; }
.wz-inv-party .s { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.wz-inv-tbl-head { display: grid; grid-template-columns: minmax(0,1fr) 120px 56px 100px; gap: 16px; padding: 11px 30px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--wz-tint);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.wz-inv-tbl-head .c { text-align: center; }
.wz-inv-tbl-head .r { text-align: right; }
.wz-inv-grp { padding: 13px 30px 5px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.wz-inv-grp.warm { color: var(--briefing); }
.wz-inv-li { display: grid; grid-template-columns: minmax(0,1fr) 120px 56px 100px; gap: 16px; align-items: center; padding: 9px 30px; }
.wz-inv-li .nm { font-size: var(--text-sm); color: var(--ink); }
.wz-inv-li .dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.wz-inv-li .qty { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--gray-700); }
.wz-inv-li .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.wz-inv-totals { display: flex; justify-content: flex-end; padding: 18px 30px 26px; border-top: 1px solid var(--hairline); margin-top: 8px; }
.wz-inv-totals .box { width: 300px; }
.wz-inv-totals .line { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); color: var(--muted); }
.wz-inv-totals .line .v { font-family: var(--font-mono); color: var(--ink); }
.wz-inv-totals .grand { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; margin-top: 6px; border-top: 1px solid var(--hairline); }
.wz-inv-totals .grand .k { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.wz-inv-totals .grand .v { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }
/* ════════════════════════════════════════════════════════════
   ALT — Payment "Balance-led" pattern (booking-detail .bal)
   ════════════════════════════════════════════════════════════ */
.wz-bal-grid { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 24px; align-items: start; }
@media (max-width: 1020px) { .wz-bal-grid { grid-template-columns: 1fr; } }
.wz-bal { position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 22px 24px; }
.wz-bal .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.wz-bal-amt { font-family: var(--font-display); font-weight: 600; font-size: 42px; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 4px; line-height: 1; }
.wz-bal-amt .cents { color: var(--muted-2); }
.wz-bal-sub { font-size: var(--text-xs); color: var(--muted); }
.wz-bal-bar { height: 6px; border-radius: 6px; background: var(--hairline); overflow: hidden; margin: 18px 0 12px; }
.wz-bal-bar > span { display: block; height: 100%; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.wz-bal-foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); }
.wz-bal-foot .paid { color: var(--accent); font-weight: 500; }
.wz-bal-foot .total { color: var(--muted); }
.wz-bal-state { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); }
.wz-bal-state .tick { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wz-bal-state.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); }
.wz-bal-state.no .tick { background: var(--briefing-bg); color: var(--briefing); }
/* ════════════════════════════════════════════════════════════
   Order-summary visualization options (exploration canvas)
   ════════════════════════════════════════════════════════════ */
.wz-sum-card.summary .so-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate-500); white-space: nowrap; }
/* A · roll-up */
.so-rollrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--slate-200); }
.so-rollrow:first-child { border-top: 0; }
.so-rollrow .so-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-500); flex-shrink: 0; }
.so-rollrow .who { flex: 1; min-width: 0; }
.so-rollrow .who .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.so-rollrow .who .nm.unset { color: var(--muted-2); }
.so-rollrow .who .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.so-rollrow .amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
/* A2 · roll-up header + nested itemized lines */
.so-grp { border-top: 1px solid var(--slate-200); }
.so-grp:first-child { border-top: 0; }
.so-grp .so-rollrow { border-top: 0; padding: 12px 0 6px; }
.so-items { display: flex; flex-direction: column; gap: 4px; padding: 0 0 13px 44px; }
.so-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--text-xs); }
.so-item .nm { color: var(--gray-700); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-item .dt { color: var(--slate-400); font-family: var(--font-mono); }
.so-item .amt { font-family: var(--font-mono); color: var(--slate-500); flex-shrink: 0; }
/* B · category */
.so-catrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--slate-200); }
.so-catrow:first-child { border-top: 0; }
.so-catico { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--hairline); flex-shrink: 0; }
.so-catrow .who { flex: 1; }
.so-catrow .who .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.so-catrow .who .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.so-catrow .amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
/* C · share */
.so-bigtotal { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.so-bigsub { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.so-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; margin: 16px 0 16px; background: var(--gray-100); gap: 2px; }
.so-bar > span { display: block; height: 100%; min-width: 3px; }
.so-bar > span:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.so-bar > span:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.so-legend { display: flex; flex-direction: column; gap: 2px; }
.so-leg { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--slate-200); }
.so-leg:first-child { border-top: 0; }
.so-leg .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.so-leg .nm { flex: 1; font-size: var(--text-sm); color: var(--gray-700); }
.so-leg .pct { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); min-width: 34px; text-align: right; }
.so-leg .amt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); min-width: 60px; text-align: right; }
/* ═══════════════════════════════════════════════════════════════════════
   DONE — redesigned terminal screen (receipt + console directions)
   Confirmation + key numbers + actions are primary; invoice detail is one
   tap away; waiver links are compact per-diver rows with a Show-QR expander.
   ═══════════════════════════════════════════════════════════════════════ */
.dn { margin: 0 auto 8px; padding-top: 30px; }
.dn.receipt { max-width: 660px; }
.dn.console { max-width: 1060px; }
@keyframes dn-pop { from { transform: scale(0.72); } to { transform: scale(1); } }
@keyframes dn-rise { from { transform: translateY(7px); } to { transform: translateY(0); } }
/* ── shared card shell ─────────────────────────────────────── */
.dn-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.dn-card + .dn-card { margin-top: 16px; }
.dn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; }
.dn-card-head .lbl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dn-card-head .lbl .ico { color: var(--muted-2); display: flex; }
.dn-card-head .aside { font-size: var(--text-xs); color: var(--muted); }
.dn-card-head .aside.mono { font-family: var(--font-mono); color: var(--muted-2); letter-spacing: -0.01em; }
/* ── hero ──────────────────────────────────────────────────── */
.dn-hero { text-align: center; padding: 6px 0 24px; }
.dn-ring { width: 60px; height: 60px; border-radius: 50%; background: var(--confirmed-bg);
  display: inline-flex; align-items: center; justify-content: center; color: var(--confirmed);
  border: 1px solid var(--confirmed-border); margin-bottom: 16px; }
.dn-hero h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl);
  letter-spacing: -0.025em; color: var(--ink); line-height: 1.05; }
.dn-hero .sub { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; font-size: var(--text-sm); color: var(--muted); }
.dn-hero .sub .ref { font-family: var(--font-mono); font-weight: 600; color: var(--gray-700); letter-spacing: -0.01em; white-space: nowrap; }
.dn-hero .sub .amt { font-family: var(--font-mono); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.dn-hero .sub .sep { color: var(--hairline-strong, var(--muted-2)); }
.dn-hero .email { margin: 12px 0 0; font-size: var(--text-xs); color: var(--muted-2); display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .dn-ring { animation: dn-pop 0.42s cubic-bezier(0.32,0.72,0,1) both; }
}
/* console hero — left-aligned bar with inline actions */
.dn-hero.bar { display: flex; align-items: center; gap: 16px; text-align: left; padding: 0 0 4px; }
.dn-hero.bar .dn-ring { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
.dn-hero.bar h2 { font-size: var(--text-xl); }
.dn-hero.bar .htxt { min-width: 0; }
.dn-hero.bar .sub { justify-content: flex-start; margin-top: 5px; }
.dn-hero.bar .email { justify-content: flex-start; }
.dn-hero.bar .htxt-grow { flex: 1; }
/* ── action cluster ────────────────────────────────────────── */
.dn-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 4px; }
.dn-actions.console { justify-content: flex-end; margin: 0; flex-wrap: nowrap; }
/* ── record summary card ───────────────────────────────────── */
.dn-rec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.dn-rec .cell { padding: 14px 20px; border-left: 1px solid var(--hairline-2); min-width: 0; }
.dn-rec .cell:first-child { border-left: 0; }
.dn-rec .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dn-rec .v { margin-top: 7px; font-size: var(--text-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-rec .v.mono { font-family: var(--font-mono); letter-spacing: -0.01em; }
.dn-rec .v.accent { color: var(--accent); }
.dn-rec-status { display: flex; align-items: center; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--hairline-2);
  background: var(--slate-100); }
.dn-rec-status .spacer { flex: 1; }
.dn-rec-status .agent { font-size: var(--text-xs); color: var(--muted); }
.dn-rec-status .agent b { color: var(--accent); font-weight: 500; }
/* financial pill */
.dn-fpill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; white-space: nowrap;
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; }
.dn-fpill.ok { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
.dn-fpill.due { color: var(--briefing); background: var(--briefing-bg); border-color: var(--briefing-border); }
/* ── invoice expander ──────────────────────────────────────── */
.dn-inv-bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; border: 0; background: none;
  border-top: 1px solid var(--hairline); cursor: pointer; text-align: left; font-family: var(--font-sans);
  transition: background 150ms ease; }
.dn-inv-bar:hover { background: var(--surface); }
.dn-inv-bar .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dn-inv-bar .id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
.dn-inv-bar .grow { flex: 1; }
.dn-inv-bar .tot { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dn-inv-bar .chev { color: var(--muted-2); display: flex; transition: transform 200ms cubic-bezier(0.32,0.72,0,1); }
.dn-inv-bar[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dn-inv-body { padding: 4px 20px 18px; border-top: 1px solid var(--hairline-2); }
.dn-inv-group { margin-top: 14px; }
.dn-inv-date { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.dn-inv-li { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; }
.dn-inv-li .ico { color: var(--muted-2); display: flex; align-self: center; }
.dn-inv-li .nm { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--ink); }
.dn-inv-li .nm .q { display: block; font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); margin-top: 1px; }
.dn-inv-li .amt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.dn-inv-sums { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.dn-sum-row { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0; font-size: var(--text-sm); }
.dn-sum-row .l { color: var(--muted); }
.dn-sum-row .r { font-family: var(--font-mono); color: var(--gray-700); }
.dn-sum-row.total { padding-top: 9px; margin-top: 5px; border-top: 1px solid var(--hairline-2); }
.dn-sum-row.total .l { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); text-transform: none; letter-spacing: 0; }
.dn-sum-row.total .r { font-size: var(--text-md); font-weight: 600; color: var(--confirmed); }
.dn-pay { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.dn-pay .hd { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.dn-pay-row { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; font-size: var(--text-sm); }
.dn-pay-row .l { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.dn-pay-row .l .ico { color: var(--muted-2); display: flex; }
.dn-pay-row .meta { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }
.dn-pay-row .r { font-family: var(--font-mono); color: var(--ink); }
/* ── waiver links ──────────────────────────────────────────── */
.dn-wv-rows { border-top: 1px solid var(--hairline); }
.dn-wv-row { padding: 13px 20px; border-top: 1px solid var(--hairline-2); }
.dn-wv-row:first-child { border-top: 0; }
.dn-wv-top { display: flex; align-items: center; gap: 12px; }
.dn-wv-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--sky-900));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; color: #fff; }
.dn-wv-id { flex: 1; min-width: 0; }
.dn-wv-id .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-wv-id .toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 0; border: 0; background: none;
  cursor: pointer; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; color: var(--accent); }
.dn-wv-id .toggle .chev { display: flex; transition: transform 200ms cubic-bezier(0.32,0.72,0,1); }
.dn-wv-id .toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dn-wv-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--hairline);
  color: var(--muted); background: var(--surface-alt); }
.dn-wv-status.signed { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
.dn-copy { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 500; color: var(--gray-700); transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.dn-copy:hover { background: var(--surface-alt); color: var(--ink); }
.dn-copy.copied { color: var(--confirmed); border-color: var(--confirmed-border); background: var(--confirmed-bg); }
.dn-wv-expand { margin-top: 13px; display: flex; gap: 16px; align-items: flex-start; padding: 14px;
  background: var(--surface-alt); border: 1px solid var(--hairline-2); border-radius: var(--radius); }
.dn-wv-expand .qr { flex-shrink: 0; width: 108px; height: 108px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 8px; }
.dn-wv-expand .qr svg { display: block; width: 100%; height: 100%; }
.dn-wv-expand .urlbox { flex: 1; min-width: 0; }
.dn-wv-expand .urlbox .cap { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dn-wv-expand .urlbox .url { margin-top: 7px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--gray-700);
  word-break: break-all; line-height: 1.5; }
.dn-wv-foot { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--hairline); background: var(--surface-alt); }
.dn-wv-foot .live { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--confirmed); }
.dn-wv-foot .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--confirmed); }
.dn-wv-foot .exp { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.dn-wv-foot .spacer { flex: 1; }
.dn-wv-foot .lnk { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-sans); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 500; color: var(--muted); transition: color 150ms ease; }
.dn-wv-foot .lnk:hover { color: var(--accent); }
.dn-wv-foot .lnk.danger:hover { color: var(--cancelled); }
/* ── console grid ──────────────────────────────────────────── */
.dn-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,0.96fr); gap: 18px; align-items: start; margin-top: 20px; }
@media (max-width: 980px) { .dn-grid { grid-template-columns: 1fr; } }
.dn-col-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 11px 2px; }
/* compact density trims */
.wz-compact .dn-rec .cell { padding: 11px 16px; }
.wz-compact .dn-wv-row { padding: 10px 16px; }
.wz-compact .dn-card-head { padding: 12px 16px; }
/* ============================================================
   summary-card.css — DiveOS Summary Card (design-system component).
   Header band · icon-tile rows · tinted total footer.
   Palette is a cool blue-gray surface (NOT the white card surface) so
   the summary reads as a distinct "running tally" object:
     · card    #F2F5F9   · icon tile #E3EAF2   · footer band #E3EAF1
   Type: label 12px · row title 14px/700 · desc 12px · icon 16 · price 24.
   ============================================================ */
.ds-sum {
  --ds-sum-bg:     #F2F5F9;
  --ds-sum-tile:   #E3EAF2;
  --ds-sum-line:   var(--slate-200);
  --ds-sum-foot:   #E3EAF1;
  --ds-sum-bd:     #D5DEEA;   /* cool blue-gray outer border — bespoke to this card */
  background: var(--ds-sum-bg);
  border: 1px solid var(--ds-sum-bd);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 0 rgba(255,255,255,.6) inset;
  overflow: hidden;
}
/* header band */
.ds-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px 13px; }
.ds-sum-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate-500, var(--slate-500)); white-space: nowrap; }
.ds-sum-head .st { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.ds-sum-head .st.ok { color: var(--confirmed); }
/* icon-tile rows */
.ds-sum-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ds-sum-line); }
.ds-sum-row:first-of-type { border-top: 0; }
.ds-sum-row .ico { width: 36px; height: 36px; border-radius: var(--radius); background: var(--ds-sum-tile); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
/* The label keeps its natural width and never collapses. (It was `flex: 1` with
   `min-width: 0`, which with a `flex-basis: 0%` shrank the label box to 0 and let
   its text overflow onto the value.) The value takes the remaining space below. */
.ds-sum-row .main { flex: 0 0 auto; }
.ds-sum-row .main .nm { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); letter-spacing: -0.005em; color: var(--ink); line-height: 1.2; }
.ds-sum-row .main .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: 1.2; }
/* The value takes the remaining space, right-aligned, and WRAPS a long token
   (e.g. a verbose vessel name) instead of nowrap-overflowing across the label.
   `flex: 1 1 auto` + `min-width: 0` lets it fill and shrink; `overflow-wrap:
   anywhere` breaks unbroken tokens. */
.ds-sum-row .val { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
/* progress strip (payment) */
.ds-sum-prog { padding: 13px 20px; border-top: 1px solid var(--ds-sum-line); }
.ds-sum-prog .bar { height: 7px; border-radius: 99px; background: rgba(100,116,139,0.20); overflow: hidden; }
.ds-sum-prog .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.ds-sum-prog .bar.full > span { background: var(--confirmed); }
.ds-sum-prog .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); }
.ds-sum-prog .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.ds-sum-prog .row .paid.ok { color: var(--confirmed); }
.ds-sum-prog .row .total { color: var(--muted); }
.ds-sum-prog .row .total .mono { font-family: var(--font-mono); }
.ds-sum-state { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--ds-sum-line); font-size: var(--text-xs); color: var(--gray-700); }
.ds-sum-state.ok { color: var(--confirmed); }
.ds-sum-state.no { color: var(--briefing); }
.ds-sum-state .ico { display: inline-flex; }
.ds-sum-defer { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 12px; margin-top: -2px; font-size: var(--text-xs); color: var(--muted); }
.ds-sum-defer .mono { font-family: var(--font-mono); }
/* tinted total footer */
.ds-sum-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; background: var(--ds-sum-foot); border-top: 1px solid var(--ds-sum-line); }
.ds-sum-foot .k { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-500, var(--slate-500)); }
.ds-sum-foot .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1; }
.ds-sum-foot .v.accent { color: var(--accent); }
.ds-sum-foot .v.ok { color: var(--confirmed); }
.ds-sum-foot .v .cents { font-size: var(--text-md); color: var(--muted-2); }
/* ============================================================
   booking-v2.css — redesigned New Booking flow (Dives + Payment).
   Modern, instrument-grade chrome on the bound DiveOS tokens.
   Prefix: bk2-. Reuses wizard.css line-item widgets (.wz-li / .wz-sel
   / .wz-qty / .wz-price) inside new card/section/rail containers, plus
   three new primitives shared across both directions:
     · date-badge tile     (.bk2-dbadge)
     · KPI summary tiles    (.bk2-tiles / .bk2-tile)
     · balance meter        (.bk2-meter)
   Two directions, toggled by the `direction` Tweak on <html>:
     · .bk2-console  — dense control panel (tiles rail, split payment)
     · .bk2-itin     — roomier itinerary (day tickets, balance hero)
   No gradients, no glow; sky-50 used sparingly as the one tinted zone.
   ============================================================ */
/* ── Stage head with a count line ─────────────────────────── */
/* The redesigned flow drops per-step titles/descriptions — the breadcrumb
   header + wizard stepper already name the step. Hide reused steps' stage
   headers too (this stylesheet only loads on the v2 flow). */
.wz-stage-head { display: none !important; }
/* ── Review ledger (reused step) — calmer, non-interactive hierarchy ──
   The diver name anchors each group (body ink, sentence case — not an
   accent "link"); shared fees use the same neutral band, not amber; the
   orphaned "Order" label is removed in the markup. */
.wz-ledger .wz-grouphead { background: var(--sky-50); }
.wz-ledger .wz-grouphead .nm { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; }
.wz-ledger .wz-grouphead.warm { background: var(--sky-50); }
.wz-ledger .wz-grouphead.warm .nm { color: var(--ink); }
/* ── Done step — record status band uses slate, not gray-100 ── */
.dn-rec-status { background: var(--sky-50); border-top: 1px solid var(--hairline-2); }
.bk2-stage { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.bk2-stage h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink); }
.bk2-stage p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; max-width: 60ch; }
.bk2-stage .meta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.bk2-stage .meta .m { text-align: right; }
.bk2-stage .meta .m .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bk2-stage .meta .m .v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 3px; }
/* ── Two-column shell (content + rail) ────────────────────── */
/* Cap + centre the two-column steps (the full-bleed wizard has no outer cap).
   Dives sits inside .wz-inner (which already pads); Payment has no wrapper so
   it carries its own padding. Widths per design review. */
/* 800 caps the LEFT (diver-cards) column; the 348 order rail sits beside it.
   Grid content = 800 + 28 gap + 348 = 1176. (Dives is inside .wz-inner, which
   provides the page padding, so no padding here.) */
.bk2-2col { max-width: 1176px; margin-inline: auto; }
/* #290 — the Dives step wrapper must be wide enough for the 1176 grid to
   actually reach its designed size. The default .wz-inner (768) + .narrow (880)
   both starved it. 1256 = 1176 grid + the .wz-inner 40px side padding (×2), so
   the left diver column hits its intended 800px and the dive name stops
   clipping. .bk2-2col self-centres at 1176 on narrower viewports. */
.wz-inner.wz-inner--dives { max-width: 1256px; }
/* Payment: 720 caps the COMPOSER (left) column; the summary rail stays beside
   it at 360. Grid content = 720 + 28 gap + 360 = 1108 (+ 80 side padding). */
.bk2-pay-rail { max-width: 1188px; margin-inline: auto; padding: 30px 40px 40px; }
.bk2-2col { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .bk2-2col { grid-template-columns: 1fr; } .bk2-rail { position: static !important; } }
.bk2-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The JS renders all diver cards + the shared-fees card into this wrapper, so it
   needs the same column rhythm — otherwise the cards inside stack flush (the
   .bk2-col gap only separates this wrapper from the add-diver button). */
[data-pos-dives-target="diverSections"] { display: flex; flex-direction: column; gap: 16px; }
.bk2-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
/* ════════════════════════════════════════════════════════════
   DATE BADGE — the recurring instrument tile (sky-50)
   ════════════════════════════════════════════════════════════ */
.bk2-dbadge { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; height: 54px; border-radius: var(--radius); background: var(--sky-50);
  border: 1px solid var(--sky-200); color: var(--accent); line-height: 1; flex-shrink: 0; }
.bk2-dbadge .m { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.bk2-dbadge .d { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: 2px; }
.bk2-dbadge .w { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-top: 2px; }
/* ════════════════════════════════════════════════════════════
   DIVER CARD
   ════════════════════════════════════════════════════════════ */
.bk2-dcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.bk2-dhead { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.bk2-dhead .who { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
/* #289 — the name column must be able to shrink so a long name truncates
   instead of running under the "Primary" badge (which is pinned via
   flex-shrink:0 below). */
.bk2-dhead__ident { min-width: 0; flex: 1; }
.bk2-dhead .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bk2-dhead .name-input { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px dashed var(--input-border); padding: 2px 0; outline: none; min-width: 190px; }
.bk2-dhead .name-input:focus { border-bottom-color: var(--accent); }
.bk2-dhead .cert { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk2-dhead .tot { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.bk2-dhead .tot.zero { color: var(--muted-2); }
.bk2-drm { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0;
  background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; opacity: 0.6; transition: opacity .12s, background .12s, color .12s; }
.bk2-dcard:hover .bk2-drm { opacity: 1; }
.bk2-drm:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.bk2-dconfirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px;
  background: var(--cancelled-bg); border: 1px solid var(--cancelled-border); border-radius: var(--radius-pill); }
.bk2-dconfirm .q { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; }
.bk2-dconfirm .yes { height: 26px; padding: 0 11px; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--surface); background: var(--cancelled); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.bk2-dconfirm .no { height: 26px; padding: 0 9px; font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
/* ── Day section inside a diver card ──────────────────────── */
.bk2-day { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 16px 18px; border-top: 1px solid var(--hairline-2); }
.bk2-day:first-child { border-top: 0; }
.bk2-day-spine { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk2-day-spine .line { flex: 1; width: 1px; background: var(--hairline); min-height: 8px; }
.bk2-day-main { min-width: 0; }
.bk2-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bk2-day-top .dl { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); }
.bk2-day-top .dl .full { color: var(--muted); font-weight: 400; font-family: var(--font-sans); font-size: var(--text-xs); margin-left: 7px; }
.bk2-day-x { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0;
  background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; opacity: 0.5; transition: opacity .12s, color .12s, background .12s; }
.bk2-day:hover .bk2-day-x { opacity: 1; }
.bk2-day-x:hover { background: var(--gray-100); color: var(--ink); }
/* line items — reuse .wz-li grid but lighter padding here */
.bk2-items .wz-li { padding-left: 0; padding-right: 0; }
.bk2-items .wz-li-head { padding-left: 0; padding-right: 0; }
/* add chips under a day */
.bk2-addrow { display: flex; gap: 8px; margin-top: 8px; }
.bk2-addchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font: inherit; font-size: var(--text-xs); font-weight: 500;
  color: var(--accent); background: transparent; border: 1px dashed var(--accent-border); border-radius: var(--radius-pill); cursor: pointer; }
.bk2-addchip:hover { background: var(--accent-softer); }
.bk2-addchip.add { color: var(--confirmed); border-color: var(--confirmed-border); }
.bk2-addchip.add:hover { background: var(--confirmed-bg); }
/* add-date footer of a card — opens the browser-native date picker */
.bk2-adddate { padding: 12px 18px; border-top: 1px solid var(--hairline-2); }
.bk2-adddate-wrap { position: relative; }
.bk2-adddate-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 44px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1.5px dashed var(--accent-border); border-radius: var(--radius); cursor: pointer; transition: background .12s, border-color .12s; }
.bk2-adddate-btn:hover { background: var(--accent-softer); border-color: var(--accent); }
.bk2-date-native { position: absolute; left: 16px; bottom: 4px; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; }
/* shared fees + add-diver */
.bk2-fees-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
.bk2-fees-head .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.bk2-fees-head .c { font-size: var(--text-xs); color: var(--muted); }
.bk2-fees-head .a { font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; font-family: inherit; padding: 0; }
.bk2-fees-head .a:hover { color: var(--accent-strong); }
.bk2-fee { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 92px 88px 36px; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--hairline-2); }
.bk2-fee:first-of-type { border-top: 0; }
.bk2-fee .kind { display: inline-flex; justify-content: center; color: var(--muted); }
.bk2-fee .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.bk2-fee-empty { padding: 14px 18px; font-size: var(--text-sm); color: var(--muted-2); font-style: italic; }
.bk2-adddiver { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; width: 100%;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1.5px dashed var(--accent-border); border-radius: var(--radius-lg); cursor: pointer; }
.bk2-adddiver:hover { background: var(--accent-softer); }
/* package header band — accent-tinted, sits above a diver's day cards */
.bk2-pkghead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 12px 12px; padding: 8px 12px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); }
.bk2-pkghead__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk2-pkghead__title { font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.bk2-pkghead__price { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.bk2-pkghead__remove { font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--danger);
  background: transparent; border: 1px solid var(--danger-border); border-radius: var(--radius-sm);
  padding: 4px 10px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.bk2-pkghead__remove:hover { background: var(--danger-bg); border-color: var(--danger); }
/* ════════════════════════════════════════════════════════════
   ITINERARY direction — day ticket band per date
   ════════════════════════════════════════════════════════════ */
.bk2-itin .bk2-day { display: block; padding: 0; }
.bk2-itin .bk2-day-spine { display: none; }
.bk2-itin .bk2-ticketband { display: flex; align-items: center; gap: 11px; padding: 13px 18px;
  background: var(--bk2-band, var(--sky-50)); border-top: 1px solid var(--bk2-band-bd, var(--sky-200)); border-bottom: 1px solid var(--bk2-band-bd, var(--sky-200)); }
.bk2-itin .bk2-day:first-child .bk2-ticketband { border-top: 0; }
.bk2-itin .bk2-ticketband .cal { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.bk2-itin .bk2-ticketband .dtxt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
.bk2-itin .bk2-ticketband .dow { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.bk2-itin .bk2-ticketband .dow::before { content: '·'; margin-right: 7px; color: var(--muted-2); }
.bk2-itin .bk2-ticketband .cnt { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); padding: 3px 10px; }
.bk2-itin .bk2-ticketband .wz-li-acts { display: inline-flex; align-items: center; gap: 2px; }
.bk2-itin .bk2-ticket-body { padding: 8px 18px 14px; }
/* ════════════════════════════════════════════════════════════
   RAIL · KPI summary tiles (console direction)
   ════════════════════════════════════════════════════════════ */
.bk2-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.bk2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
.bk2-card-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bk2-card-head .ico { color: var(--muted-2); display: inline-flex; }
.bk2-tiles { display: grid; grid-template-columns: 1fr 1fr; }
.bk2-tile { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-top: 1px solid var(--hairline-2); border-left: 1px solid var(--hairline-2); }
.bk2-tile:nth-child(-n+2) { border-top: 0; }
.bk2-tile:nth-child(odd) { border-left: 0; }
.bk2-tile .ico { width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.bk2-tile .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bk2-tile .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--ink); margin-top: 2px; line-height: 1; }
.bk2-tile .v.sm { font-size: var(--text-sm); }
/* rail itemized breakdown */
.bk2-break { max-height: 38vh; overflow-y: auto; padding: 4px 16px; }
.bk2-break-grp { padding: 11px 0; border-top: 1px solid var(--hairline-2); }
.bk2-break-grp:first-child { border-top: 0; }
.bk2-break-grp .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.bk2-break-grp .gh .nm { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.bk2-break-grp .gh .nm.unset { color: var(--muted-2); }
.bk2-break-grp .gh .nm.warm { color: var(--gray-700); }
.bk2-break-grp .gh .tt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.bk2-break-li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; }
.bk2-break-li .nm { color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk2-break-li .dt { color: var(--muted-2); font-family: var(--font-mono); }
.bk2-break-li .amt { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; }
.bk2-break-li.empty { font-style: italic; color: var(--muted-2); }
.bk2-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.bk2-total .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bk2-total .v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); }
/* roll-up (itinerary rail) */
.bk2-roll { padding: 4px 16px; }
.bk2-rollrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--hairline-2); }
.bk2-rollrow:first-child { border-top: 0; }
.bk2-rollrow .who { flex: 1; min-width: 0; }
.bk2-rollrow .who .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk2-rollrow .who .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.bk2-rollrow .so-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--gray-500); flex-shrink: 0; }
.bk2-rollrow .amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
/* special requests */
.bk2-notes { padding: 16px 18px; }
.bk2-notes label { display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.bk2-notes textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; resize: vertical; font-family: var(--font-sans);
  font-size: var(--text-sm); line-height: 1.5; color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.bk2-notes textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
/* ════════════════════════════════════════════════════════════
   BALANCE METER — shared payment primitive
   ════════════════════════════════════════════════════════════ */
.bk2-meter { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 20px 22px; }
.bk2-meter .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bk2-meter .amt { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.03em; color: var(--ink); margin: 12px 0 2px; line-height: 1; }
.bk2-meter .amt .cents { color: var(--muted-2); font-size: var(--text-3xl); }
.bk2-meter .amt.ok { color: var(--confirmed); }
.bk2-meter .sub { font-size: var(--text-xs); color: var(--muted); }
.bk2-meter .bar { height: 8px; border-radius: 99px; background: var(--gray-200); overflow: hidden; margin: 18px 0 11px; }
.bk2-meter .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.bk2-meter .bar.full > span { background: var(--confirmed); }
.bk2-meter .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.bk2-meter .foot .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.bk2-meter .foot .paid.ok { color: var(--confirmed); }
.bk2-meter .foot .total { color: var(--muted); }
.bk2-meter .foot .total .mono { font-family: var(--font-mono); }
.bk2-meter .state { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); color: var(--gray-700); }
.bk2-meter .state .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.bk2-meter .state.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); }
.bk2-meter .state.no .tick { background: var(--briefing-bg); color: var(--briefing); }
.bk2-meter .defer { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; font-size: var(--text-xs); color: var(--muted); }
.bk2-meter .defer .mono { font-family: var(--font-mono); }
/* ════════════════════════════════════════════════════════════
   PAYMENT layouts
   ════════════════════════════════════════════════════════════ */
.bk2-pay-split { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 26px; align-items: start; }
@media (max-width: 1040px) { .bk2-pay-split { grid-template-columns: 1fr; } }
.bk2-pay-split .bk2-meter { position: sticky; top: 24px; }
/* itinerary payment — full-width meter hero on a tinted band */
.bk2-pay-hero { background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 20px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; }
@media (max-width: 760px) { .bk2-pay-hero { grid-template-columns: 1fr; } }
.bk2-pay-hero .lead .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-800); }
.bk2-pay-hero .lead .amt { font-family: var(--font-display); font-weight: 600; font-size: 50px; letter-spacing: -0.03em; color: var(--ink); margin: 10px 0 4px; line-height: 1; }
.bk2-pay-hero .lead .amt .cents { color: var(--sky-700); opacity: 0.6; font-size: var(--text-3xl); }
.bk2-pay-hero .lead .amt.ok { color: var(--confirmed); }
.bk2-pay-hero .lead .sub { font-size: var(--text-sm); color: var(--sky-800); }
.bk2-pay-hero .gauge { width: 232px; }
.bk2-pay-hero .gauge .bar { height: 8px; border-radius: 99px; background: rgba(3,105,161,0.14); overflow: hidden; }
.bk2-pay-hero .gauge .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.bk2-pay-hero .gauge .bar.full > span { background: var(--confirmed); }
.bk2-pay-hero .gauge .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: var(--text-xs); }
.bk2-pay-hero .gauge .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.bk2-pay-hero .gauge .row .paid.ok { color: var(--confirmed); }
.bk2-pay-hero .gauge .row .total { color: var(--sky-800); }
.bk2-pay-hero .gauge .state { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--text-xs); font-weight: 500; }
.bk2-pay-hero .gauge .state.ok { color: var(--confirmed); }
.bk2-pay-hero .gauge .state.no { color: var(--briefing); }
/* method chips */
.bk2-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bk2-pm { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--gray-700); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer; transition: all .12s ease; }
.bk2-pm:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); }
.bk2-pm .ico { color: var(--muted-2); display: inline-flex; }
.bk2-pm:hover .ico { color: var(--accent); }
/* payment rows ledger */
.bk2-prows { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.bk2-prow { display: grid; grid-template-columns: 168px minmax(0,1fr) minmax(0,1fr) 32px; gap: 16px; align-items: start; padding: 16px 18px; border-top: 1px solid var(--hairline-2); }
.bk2-prow:first-child { border-top: 0; }
.bk2-prow > div { min-width: 0; }
.bk2-prow .fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; min-height: 14px; }
.bk2-prow .fl .req { color: var(--error); margin-left: 3px; }
.bk2-prow .rm { align-self: start; margin-top: 19px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; }
.bk2-prow .rm:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.bk2-mi { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.bk2-mi.mono { font-family: var(--font-mono); }
.bk2-mi:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.bk2-psub { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
.bk2-psub.ok { color: var(--confirmed); }
.bk2-pro { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); }
.bk2-pcheck { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
.bk2-pcheck input { width: 14px; height: 14px; accent-color: var(--accent); }
.bk2-pempty { padding: 22px 18px; text-align: center; font-size: var(--text-sm); color: var(--muted-2); }
/* attribution */
.bk2-attr { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; margin-top: 16px; }
.bk2-attr-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; }
/* DiveOS painted checkbox (.diveos-check) is centred to the single-line label here. */
.bk2-attr-top.diveos-check { align-items: center; }
.bk2-attr-top .diveos-check__box { margin-top: 0; }
.bk2-attr-top .t { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.bk2-attr-body { padding: 4px 18px 18px; border-top: 1px solid var(--hairline-2); display: flex; flex-direction: column; gap: 14px; }
.bk2-attr-fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; }
.bk2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bk2-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.bk2-chip:hover { border-color: var(--accent-border); background: var(--accent-softer); }
.bk2-chip.on { border-color: var(--accent); background: var(--accent-softer); }
.bk2-chip .who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.bk2-chip .who .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.bk2-chip .who .role { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.bk2-chip.on .who .role { color: var(--accent); }
.bk2-chip .tick { display: inline-flex; color: var(--accent); }
.bk2-commrow { display: flex; align-items: center; gap: 12px; }
.bk2-commrow .wz-price { height: 36px; }
.bk2-commrow .note { font-size: var(--text-xs); color: var(--muted); }
.bk2-commrow .note button { background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 0; margin-left: 6px; }
/* ════════════════════════════════════════════════════════════
   SUMMARY CARD — package-builder style (header band · icon rows ·
   tinted total footer). Reused as the Payment right rail.
   ════════════════════════════════════════════════════════════ */
.bk2-pay-rail { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 1080px) { .bk2-pay-rail { grid-template-columns: 1fr; } .bk2-pay-rail .ds-sum { position: static !important; } }
.bk2-pay-rail .ds-sum { position: sticky; top: 24px; }
.bk2-sumcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.bk2-sumcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px;
  background: var(--surface-alt); border-bottom: 1px solid var(--hairline); }
.bk2-sumcard-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate-500); }
.bk2-sumcard-head .st { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.bk2-sumcard-head .st.ok { color: var(--confirmed); }
.bk2-sumrow { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--hairline-2); }
.bk2-sumrow:first-of-type { border-top: 0; }
.bk2-sumrow .ico { color: var(--muted-2); display: inline-flex; flex-shrink: 0; }
.bk2-sumrow .main { flex: 1; min-width: 0; }
.bk2-sumrow .main .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
.bk2-sumrow .main .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
.bk2-sumrow .val { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
/* progress strip above the footer */
.bk2-sumprog { padding: 15px 22px; border-top: 1px solid var(--hairline-2); }
.bk2-sumprog .bar { height: 7px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.bk2-sumprog .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.bk2-sumprog .bar.full > span { background: var(--confirmed); }
.bk2-sumprog .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); }
.bk2-sumprog .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.bk2-sumprog .row .paid.ok { color: var(--confirmed); }
.bk2-sumprog .row .total { color: var(--muted); }
.bk2-sumprog .row .total .mono { font-family: var(--font-mono); }
.bk2-sumcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px;
  background: var(--slate-100); border-top: 1px solid var(--hairline); }
.bk2-sumcard-foot .k { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate-500); }
.bk2-sumcard-foot .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; color: var(--accent); line-height: 1; }
.bk2-sumcard-foot .v.ok { color: var(--confirmed); }
.bk2-sumcard-foot .v .cents { font-size: var(--text-lg); color: var(--muted-2); }
.bk2-sumcard-state { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--hairline-2); font-size: var(--text-xs); color: var(--gray-700); }
.bk2-sumcard-state.ok { color: var(--confirmed); }
.bk2-sumcard-state.no { color: var(--briefing); }
.bk2-sumcard-state .ico { display: inline-flex; }
.bk2-sumcard-defer { display: flex; align-items: baseline; justify-content: space-between; padding: 0 22px 14px; margin-top: -4px; font-size: var(--text-xs); color: var(--muted); }
.bk2-sumcard-defer .mono { font-family: var(--font-mono); }
/* Stepper band — centered, narrower block (per direct edits) */
.wz-bars-inner { max-width: 720px; }
/* compact density trims */
.wz-compact .bk2-day { padding-top: 11px; padding-bottom: 11px; }
.wz-compact .bk2-tile { padding-top: 11px; padding-bottom: 11px; }
.wz-compact .bk2-prow { padding-top: 11px; padding-bottom: 11px; }
/* .dv-card — canonical info-card shell (bug: existed on disk, documented as
   belonging here, but the import line was never added — found by the new
   css_import_gate_test while adding it). Used by 8 views before this fix,
   all rendering unstyled. */
/* ─────────────────────────────────────────────────────────────────────
   DiveOS info card — .dv-card

   Promoted from the Booking Details "Forked card shell" (the page-scoped
   `.bk-detail .card` in account/bookings.css), which the product owner blessed
   as the canonical info-card shell: white surface, 1px hairline, radius-lg,
   NO resting shadow, and an uppercase eyebrow head that flows straight into the
   body (no divider). Reproduced here verbatim as an unscoped component so any
   surface can use it.

   Interaction states (--interactive / --selected) are modeled on the design-
   system handoff's `.dos-card` (Design/templates/rails-handoff): interactive
   cards lift on hover; selected cards take an accent border.

   Spacing note: the 22px vertical padding is intentionally OFF the 8pt grid —
   it's preserved to match the blessed reference pixel-for-pixel. Horizontal
   padding and head/actions gaps use the --space-* scale. If the 22px is later
   reconciled to 24px (--space-6), change it here once.
   Token-driven; @imported from application.css after components/booking-v2.css.
   ───────────────────────────────────────────────────────────────────── */
.dv-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
}
/* Opt out of the radius clip for cards that host an absolutely-positioned
   popover (e.g. a calendar_input datepicker, .dv-pop z-index:30). The base
   overflow:hidden would clip the popover to the card edge. Only safe on cards
   WITHOUT a nested .dv-table-wrap, which relies on the clip for its radius. */
.dv-card--overflow-visible { overflow: visible; }
/* Table-wrapper card (heading head + a flush .dv-table-wrap body via bare:true):
   the card owns the frame, so the nested table-wrap drops its own border/radius
   — no box-in-box. The card's overflow:hidden clips the table to the radius. */
.dv-card > .dv-table-wrap {
  border: 0;
  border-radius: 0;
  transition: box-shadow var(--t-fast) var(--ease-standard),
              border-color var(--t-fast) var(--ease-standard),
              background-color var(--t-fast) var(--ease-standard);
}
/* Head — uppercase eyebrow label (left) + optional actions (right). Top-only
   padding so the head flows into the body with no divider. */
.dv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--space-6) 0;
}
.dv-card__title {
  display: flex;
  align-items: center;
  gap: 7px;                 /* optical icon gap; off-grid by intent */
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.dv-card__title i,
.dv-card__title svg { flex-shrink: 0; color: var(--muted-2); }
/* Display-title head — the 15px General Sans heading (matches
   shared/patterns/_card_title), for cards whose head is a prominent section
   heading rather than the 11px uppercase eyebrow. Pair with --divided when the
   head also carries an action. */
.dv-card__title--display {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--font-display);
}
.dv-card__actions { display: flex; align-items: center; gap: var(--space-2); }
.dv-card__body { padding: 22px var(--space-6); }
/* ── Variants ────────────────────────────────────────────────────────
   --raised  : soft elevation (the bk2-card treatment) for cards that float
               above the canvas rather than sit flush in a column.
   --divided : head sits in its own band with a hairline divider, instead of
               flowing into the body. Use when the head carries an action row
               or the body is dense. */
.dv-card--raised { box-shadow: var(--shadow-sm); }
.dv-card--divided .dv-card__head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
/* ── Interaction states (from handoff .dos-card) ─────────────────────────
   Apply --interactive only when the whole card is a click target. */
.dv-card--interactive { cursor: pointer; }
.dv-card--interactive:hover {
  box-shadow: var(--shadow-hover);
  background-color: var(--canvas);
}
.dv-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.dv-card--selected { border-color: var(--accent); }
/* Canonical info-card component (.dv-card) — promoted from the Booking Details
   forked card shell. Loads AFTER booking-v2.css so the unscoped component wins
   over the page-scoped source. chart-card.css (.dv-chart-card) extends the card
   pattern for Chartkick containers and MUST load after card.css. */
/* callout.css (.dv-callout) — tinted status/info notice panel (status-palette
   tones). desclist.css (.dv-desclist) — key/value <dl> component used inside
   info_card bodies. Both self-scoped, token-only, light-only. */
/* Trip Plan & Run v4 component vocabulary (design-system-gated, shown in
   /admin/design_system). Adopted by the account/dive_trips/* revamp surfaces —
   timeline (stops), avatar (initials disc), chip (dismissible entity), bulkbar
   (multi-select action bar), sheet (mobile bottom sheet / side drawer),
   gear_slot (fitting size row), accordion (collapsible panels). */
/* ═══════════════════════════════════════════════════════════════════════════
   .dv-stops — vertical stops timeline (Board → numbered dives → Return).

   A first-class DiveOS component: a time gutter, a connector rail with nodes,
   and a card lane. Bookend rows (Board / Return) are quiet; stop rows carry a
   numbered accent node, an inline-editable title, a drag handle, and a delete
   control. GapZones between rows reveal an "Add stop" affordance on hover and
   expand into an inline site+time form when activated.

   Ported from the v4 Trip-Run design (lifecycle.css .lc-vt-* + trip-run-v4.css).
   Tokens only. Specimen lives in /admin/design_system → Timeline.
   ═══════════════════════════════════════════════════════════════════════════ */
.dv-stops { position: relative; }
.dv-stops__row {
  display: grid;
  grid-template-columns: 62px 36px minmax(0, 1fr);
  align-items: start;
}
/* Time gutter */
.dv-stops__time { text-align: right; padding: 16px 14px 0 0; }
.dv-stops__hh {
  font-family: var(--font-mono);
  font-size: var(--text-md); font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em;
}
.dv-stops__hh--editing { color: var(--muted-2); letter-spacing: 0.06em; }
.dv-stops__lbl {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 4px;
}
/* Rail + nodes */
.dv-stops__rail {
  display: flex; flex-direction: column; align-items: center;
  align-self: stretch;
}
.dv-stops__node {
  width: 30px; height: 30px; min-height: 30px; border-radius: 50%;
  border: 2px solid var(--hairline); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0; flex-grow: 0; margin-top: 14px;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  box-sizing: border-box;
}
.dv-stops__node svg { flex-shrink: 0; }
.dv-stops__rail > .dv-stops__node { flex: 0 0 30px; height: 30px; max-height: 30px; }
.dv-stops__node--accent {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.dv-stops__node--num {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.dv-stops__line {
  flex: 1; width: 2px; background: var(--hairline);
  margin: 4px 0; min-height: 18px;
}
.dv-stops__row:last-child .dv-stops__line { display: none; }
/* Cards */
.dv-stops__card {
  margin: 6px 0 16px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px 16px;
  transition: border-color .12s, box-shadow .12s;
}
.dv-stops__card--bookend {
  background: var(--surface-alt);
  box-shadow: none; cursor: default;
  margin: 4px 0 6px 12px;
}
.dv-stops__card--stop {
  display: flex; align-items: center; gap: 10px;
  margin: 3px 0 3px 12px;
}
/* Title lane. The eyebrow ("DIVE N · time") was removed as redundant — the
   number + time already live in the gutter — which frees the row to a single
   line with the actions inline. */
.dv-stops__card-main { flex: 1; min-width: 0; }
/* Editing state gets extra padding so the inline form breathes. */
.dv-stops__card--stop.is-editing { align-items: flex-start; padding: 16px 18px; }
.dv-stops__card--stop:hover { border-color: var(--accent-border); }
.dv-stops__card--stop.is-editing { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.dv-stops__eye {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted-2);
}
.dv-stops__ttl {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em;
  color: var(--ink); margin-top: 5px;
}
.dv-stops__card--bookend .dv-stops__ttl { font-size: var(--text-sm); color: var(--muted); }
.dv-stops__ttl--edit { cursor: pointer; }
.dv-stops__ttl--edit:hover { color: var(--accent); }
/* Desktop hover affordance: the stop name reads as an editable field before
   the user clicks. Transparent border colors on hover (no layout shift) via a
   negative-margin inset so the padded box hugs the text. */
@media (hover: hover) and (pointer: fine) {
  .dv-stops__ttl--field {
    display: inline-block;
    margin: -3px -8px; padding: 3px 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    transition: border-color .12s, background .12s;
  }
  .dv-stops__ttl--field:hover {
    border-color: var(--hairline-strong);
    background: var(--surface);
    cursor: text;
  }
}
.dv-stops__meta {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-top: 7px;
}
.dv-stops__grip {
  color: var(--muted-2); flex-shrink: 0; cursor: grab; margin-top: 3px;
}
/* Row actions — edit (signifier) before delete */
.dv-stops__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dv-stops__act {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--muted-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s, color .12s;
}
.dv-stops__act:hover {
  border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent);
}
.dv-stops__act--del:hover {
  border-color: var(--cancelled-border); background: var(--cancelled-bg); color: var(--cancelled);
}
/* Board time-slot control (prototype trip time slot) */
.dv-stops__slot { margin-top: 12px; max-width: 240px; }
/* Read-only summary: quiet time slot + pencil; the select is revealed on click. */
.dv-stops__slot--ro { display: flex; align-items: center; gap: 8px; }
.dv-stops__slot-sum {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--muted); letter-spacing: 0.02em;
}
.dv-stops__slot-sum svg { color: var(--muted-2); }
.dv-stops__slot-edit { width: 26px; height: 26px; }
.dv-stops__slot-edit-row { display: flex; align-items: flex-end; gap: 8px; }
.dv-stops__slot-edit-row .dv-select--inline { flex: 1; }
/* Inline edit form — roomy, not cramped (prototype-review: "collapsed too
   much, should be plenty of space"). */
.dv-stops__edit { margin-top: 12px; }
.dv-stops__edit-fields { display: flex; gap: 14px; align-items: flex-end; }
.dv-stops__edit-actions { display: flex; gap: 8px; margin-top: 14px; }
.dv-stops__field-label {
  display: block; font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
  margin-bottom: 4px;
}
.dv-stops__time-input {
  width: 112px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: var(--text-sm);
}
/* ── Gap zone (hover-to-insert) ───────────────────────────────────────────── */
.dv-stops__gap {
  display: grid;
  grid-template-columns: 62px 36px minmax(0, 1fr);
  align-items: center;
  min-height: 8px;
  transition: min-height .14s;
}
.dv-stops__gap.is-hover { min-height: 46px; }
.dv-stops__gap.is-active { min-height: 0; overflow: visible; }
.dv-stops__gap .dv-stops__rail { align-self: stretch; }
.dv-stops__gap .dv-stops__line {
  flex: 1; width: 2px; min-height: 0; margin: 0;
  background: var(--hairline); transition: background .14s;
}
.dv-stops__gap.is-hover .dv-stops__line { background: var(--accent-border); }
.dv-stops__reveal {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 0 12px;
  opacity: 0; transition: opacity .14s;
}
.dv-stops__gap.is-hover .dv-stops__reveal { opacity: 1; transition-delay: .03s; }
.dv-stops__reveal .rule { flex: 1; height: 0; border-top: 1px solid var(--hairline); }
.dv-stops__insert {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent-border); background: var(--surface);
  color: var(--accent); font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.dv-stops__insert:hover { background: var(--accent-soft); }
.dv-stops__gap-form {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 8px 12px;
}
/* ── Add-stop placeholder / empty state ───────────────────────────────────── */
.dv-stops__add {
  margin: 6px 0 10px 12px; padding: 13px 18px;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--surface); cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .12s, background .12s;
  width: 100%; text-align: left;
}
.dv-stops__add:hover { border-color: var(--accent-border); background: var(--surface-alt); }
.dv-stops__add--empty { padding: 20px 22px; }
.dv-stops__add .ic { display: flex; align-items: center; color: var(--muted-2); flex-shrink: 0; }
.dv-stops__add:hover .ic { color: var(--accent); }
.dv-stops__add-txt { display: flex; flex-direction: column; min-width: 0; }
.dv-stops__add-t {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink);
}
.dv-stops__add-s { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.dv-stops__endcap { display: none; }
.dv-stops__endcap.is-active { display: block; }
/* Inline visible select (edit/insert forms). The DS .dv-select hides its native
   element behind a JS overlay; inside the timeline we want a plain, always-
   visible styled native <select> with a chevron affordance. */
.dv-select--inline { position: relative; display: block; }
.dv-select--inline > select {
  width: 100%;
  min-height: 40px;
  padding: 8px 32px 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.dv-select--inline > select:hover { border-color: var(--accent); }
.dv-select--inline > select:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.dv-select--inline .dv-select__chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); display: flex;
}
.dv-stops__time-input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.dv-stops__time-input:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
/* ── Accessible reorder: drag + up/down buttons + Alt+↑/↓ ──────────────────── */
/* Keyboard-focusable stop row: focus-visible ring so the Alt+↑/↓ target reads. */
.dv-stops__row[draggable] { outline: none; }
.dv-stops__row[draggable]:focus-visible .dv-stops__card--stop {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Drag ghost source — dim while dragging (mirrors dives_reorder opacity-50). */
.dv-stops__row.is-dragging { opacity: 0.5; }
/* Moved-row pulse (signature motion, carried from dashboard's reorder pulse). */
.dv-stops__row--pulse .dv-stops__card--stop {
  animation: dashboard-pulse 200ms cubic-bezier(0, 0, 0.2, 1);
}
/* Up/down reorder buttons. Hover-revealed on fine pointers to keep the row
   quiet; always visible + larger on coarse pointers (the boat, no-drag path). */
.dv-stops__act--move svg { flex-shrink: 0; }
.dv-stops__act[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .dv-stops__act--move { opacity: 0; transition: opacity .12s; }
  .dv-stops__card--stop:hover .dv-stops__act--move,
  .dv-stops__row[draggable]:focus-visible .dv-stops__act--move,
  .dv-stops__act--move:focus-visible { opacity: 1; }
}
@media (pointer: coarse) {
  .dv-stops__act--move { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-stops__row--pulse .dv-stops__card--stop { animation: none; }
}
/* Off-screen live region for reorder announcements. */
.dv-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* No-JS hover reveal for the gap (server-rendered Plan uses pure :hover where
   the prototype toggled .is-hover from Stimulus). Same visual states. */
.dv-stops__gap:hover { min-height: 46px; }
.dv-stops__gap:hover .dv-stops__line { background: var(--accent-border); }
.dv-stops__gap:hover .dv-stops__reveal,
.dv-stops__gap:focus-within .dv-stops__reveal { opacity: 1; transition-delay: .03s; }
.dv-stops__gap:focus-within { min-height: 46px; }
/* ── dv-avatar ─────────────────────────────────────────────────────────────
   Initials disc for guests + staff where no photo exists. Formalises the
   inline pattern previously shown only in the showcase (accent-soft fill,
   accent ink). Sizes scale with context: list row (sm) → hero header (lg).
   Token-only. Blessed 2026-07-05 (Trip Roster build).
   ────────────────────────────────────────────────────────────────────────── */
.dv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dv-avatar--xs { width: 28px; height: 28px; font-size: var(--text-2xs); }
.dv-avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.dv-avatar--lg { width: 56px; height: 56px; font-size: var(--text-xl); }
/* Neutral fallback (no initials) */
.dv-avatar--muted { background: var(--gray-100); color: var(--muted); }
/* ── dv-chip (entity chip) ─────────────────────────────────────────────────
   A named, dismissible entity token — a selected person/tag rendered as a pill
   with optional avatar + inline remove control. Distinct from the legacy
   package-builder toggle chip (.dv-chip.is-on); an entity chip carries the
   --entity modifier so the two never collide. Token-only.
   Blessed 2026-07-05 (Trip Roster build).
   ────────────────────────────────────────────────────────────────────────── */
.dv-chip--entity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Right padding is tight (6px) because the ✕ remove control fills that side.
     A NON-dismissible chip (no ✕) has no such filler, so its text would sit
     only 6px from the pill's curved edge — the `:not(:has())` rule below gives
     it comfortable, symmetric end padding. */
  padding: 5px 6px 5px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  max-width: 100%;
}
.dv-chip--entity:not(:has(.dv-chip__x)) { padding-right: 12px; }
.dv-chip--entity .dv-chip__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.dv-chip__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-chip__meta {
  font-size: var(--text-2xs);
  color: var(--muted-2);
  white-space: nowrap;
}
.dv-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--muted-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.dv-chip__x:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.dv-chip__x .lucide { display: block; }
/* ═══════════════════════════════════════════════════════════════════════
   dv-bulkbar — sticky multi-select action bar.

   Appears when one or more rows in a list/table are ticked; carries the
   selection count + bulk actions (assign, mark, clear). Accent-filled so it
   reads as an active operating mode, not a passive toolbar.

   Anatomy:
     .dv-bulkbar
       .dv-bulkbar__count     — "N selected"
       .dv-bulkbar__action    — a bulk action button (repeatable)
       .dv-bulkbar__clear     — dismiss selection (pushed to the right)
   ═══════════════════════════════════════════════════════════════════════ */
.dv-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 12px 0;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--surface);
  box-shadow: var(--shadow-md);
}
.dv-bulkbar__count {
  font-weight: 600;
  font-size: var(--text-xs);
  padding-right: 4px;
}
.dv-bulkbar__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.dv-bulkbar__action:hover { background: rgba(255, 255, 255, .22); }
.dv-bulkbar__action .lucide { opacity: .9; }
.dv-bulkbar__clear {
  margin-left: auto;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .85);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.dv-bulkbar__clear:hover { color: var(--surface); text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════════════
   dv-sheet — mobile bottom sheet.

   A modal surface that slides up from the bottom edge for edit-in-context
   tasks on touch/phone (log a dive, pick a value). Backdrop dims the page;
   the panel is capped at 90vh and scrolls internally. On tablet/desktop the
   same content is better served by a drawer or inline panel — the sheet is
   intended for narrow viewports.

   Anatomy:
     .dv-sheet                 — fixed backdrop (toggle .is-open)
       .dv-sheet__panel        — the sheet surface
         .dv-sheet__grip       — drag affordance pill
         .dv-sheet__head
         .dv-sheet__body       — scroll region
         .dv-sheet__foot       — sticky action row
   ═══════════════════════════════════════════════════════════════════════ */
.dv-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  background: rgba(17, 24, 39, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-standard);
}
.dv-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}
.dv-sheet__panel {
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-panel);
  transform: translateY(100%);
  transition: transform .24s var(--ease-out-quart);
}
.dv-sheet.is-open .dv-sheet__panel { transform: translateY(0); }
.dv-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
  margin: 10px auto 4px;
  flex-shrink: 0;
}
.dv-sheet__head {
  padding: 8px 20px 12px;
  border-bottom: 1px solid var(--hairline);
}
.dv-sheet__head .dv-eyebrow { color: var(--muted-2); }
.dv-sheet__body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.dv-sheet__body > .dv-eyebrow { display: block; color: var(--muted-2); margin-bottom: 4px; }
.dv-sheet__foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.dv-sheet__foot > .dv-btn { flex: 1; justify-content: center; min-height: 48px; }
/* The sheet is a mobile pattern; on wide viewports keep it available but it is
   typically driven only under a media query by the consuming surface. */
@media (min-width: 641px) {
  .dv-sheet__panel { max-width: 440px; margin: 0 auto; border-radius: var(--radius-xl); }
  .dv-sheet { align-items: center; }
}
/* ── dv-gear-slot ──────────────────────────────────────────────────────────
   A single gear-sizing row for the Gear Fitting surface: an icon-badged slot
   name, an optional size segment (All / S / M / L …) and a box select fed from
   inventory. Formalises the standalone `.gslot` markup as a token-only DS
   component so fitting surfaces (drawer + mobile overlay) never hand-roll it.
   Blessed 2026-07-05 (Trip Plan · Gear Fitting build).

   Anatomy:
     .dv-gear-slot
       .dv-gear-slot__head      — icon badge + slot name
         .dv-gear-slot__icon
         .dv-gear-slot__name
       .dv-segment (size)       — reuse the segmented control; sizes wrap
       .dv-select (box)         — reuse the DS select for the box number

   Pairs live in a responsive grid via .dv-gear-slot-grid (2-up ≥560px).
   ────────────────────────────────────────────────────────────────────────── */
.dv-gear-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 24px;
}
@media (min-width: 560px) {
  .dv-gear-slot-grid { grid-template-columns: 1fr 1fr; }
}
/* In the ~560px Side panel drawer (fitting), 2-up packs the size pills +
   select too tightly — keep a single column there (matches the prototype
   drawer's single-column form). */
.side-panel .dv-gear-slot-grid { grid-template-columns: 1fr; }
.dv-gear-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.dv-gear-slot__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dv-gear-slot__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.dv-gear-slot__icon svg { width: 15px; height: 15px; }
.dv-gear-slot__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
/* The size segment wraps for slots with many sizes (Suit, Fin). Keep each
   option compact so a 5-up row still fits the slot column. */
.dv-gear-slot .dv-segment {
  flex-wrap: wrap;
  gap: 6px;
}
.dv-gear-slot .dv-segment__option {
  flex: 0 0 auto;
}
.dv-gear-slot .dv-segment__label {
  min-width: 40px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
/* ── .dv-accordion ──────────────────────────────────────────────────────────
   Disclosure accordion: a stack of collapsible panels. Each item is a
   header button that toggles its body open/closed. Tokens only — no raw
   palette, no hex. Built for the trip Return checklist (boxes → gear rows)
   but general enough for any grouped disclosure list.

   Anatomy:
     .dv-accordion            wrapper (stacks items with gap)
       .dv-accordion__item    one panel  (+ .is-open)
         .dv-accordion__head  the toggle button (full-width, ≥44px tall)
           .dv-accordion__icon   leading glyph slot
           .dv-accordion__title  heading text
           .dv-accordion__meta   right-aligned mono progress/count
           .dv-accordion__chev   trailing chevron (rotates when open)
         .dv-accordion__body  disclosed content (hidden unless .is-open)
------------------------------------------------------------------------------- */
.dv-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dv-accordion__item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(17, 24, 39, .04));
  overflow: hidden;
}
.dv-accordion__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background .12s;
}
.dv-accordion__head:hover { background: var(--surface-alt); }
.dv-accordion__head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dv-accordion__item.is-open .dv-accordion__head {
  border-bottom: 1px solid var(--hairline);
}
.dv-accordion__icon {
  display: inline-flex;
  color: var(--muted-2);
  flex-shrink: 0;
}
.dv-accordion__title {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  font-size: var(--text-base, 15px);
  color: var(--ink);
}
.dv-accordion__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12.5px);
  color: var(--muted);
  white-space: nowrap;
}
.dv-accordion__chev {
  display: inline-flex;
  color: var(--muted-2);
  flex-shrink: 0;
  transition: transform .18s ease;
}
.dv-accordion__item.is-open .dv-accordion__chev { transform: rotate(180deg); }
.dv-accordion__body { padding: 4px 18px 16px; }
.dv-accordion__item:not(.is-open) .dv-accordion__body { display: none; }
/* Right-aligned actions strip inside a body (e.g. "Return all"). */
.dv-accordion__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}
/* ─── Popover — anchored multi-select / picker (.dv-pop) ─────────────────────
   Ported from the Trip v4 prototype roster (pt-pop → dv-pop). An anchored
   floating panel: search row on top, a scrollable option list, a footer for
   count + Done. Options are .dv-opt rows (avatar · name+meta · checkbox).
   The anchor wrapper needs position:relative (.dv-msel) — and remember
   .dv-card clips overflow; give the host card .dv-card--overflow-visible.
   Showcased in /admin/design_system (Popover section). */
.dv-msel { position: relative; }
.dv-pop {
  position: absolute;
  z-index: 40; top: calc(100% + 8px); left: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.dv-pop[hidden] { display: none; }
.dv-pop__search {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--hairline);
}
.dv-pop__search .lucide { color: var(--muted-2); flex-shrink: 0; }
.dv-pop__search input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.dv-pop__search input::-moz-placeholder { color: var(--muted-2); }
.dv-pop__search input::placeholder { color: var(--muted-2); }
.dv-pop__list { max-height: 268px; overflow-y: auto; padding: 4px; }
.dv-pop__empty { padding: 16px; text-align: center; }
/* Option row — works as a bare <button> or a button_to form's button. */
.dv-pop__list form { display: contents; }
.dv-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .1s;
}
.dv-opt:hover { background: var(--hover-warm); }
.dv-opt__body { flex: 1; min-width: 0; line-height: 1.25; }
.dv-opt__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dv-opt__meta { font-size: var(--text-2xs); color: var(--muted-2); }
.dv-opt__meta.is-off { color: var(--cancelled); }
.dv-optcheck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--hairline-strong); border-radius: 4px;
  color: var(--surface); background: var(--surface);
  transition: background .1s, border-color .1s;
}
.dv-opt.is-on .dv-optcheck { background: var(--accent); border-color: var(--accent); }
.dv-optcheck .lucide { opacity: 0; }
.dv-opt.is-on .dv-optcheck .lucide { opacity: 1; }
.dv-pop__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-top: 1px solid var(--hairline);
}
.dv-pop__foot .cnt { font-size: var(--text-2xs); color: var(--muted); }
.dv-pop__foot .cnt .mono { font-family: var(--font-mono); }
@media (max-width: 1024px) {
  .dv-pop { width: min(320px, calc(100vw - 48px)); }
}
/* card.css — the canonical .dv-card info-card shell (white surface, hairline,
   radius-lg, --raised/--interactive/--selected states). Its own header declares
   it is "@imported from application.css after components/booking-v2.css"; that
   import had been dropped, leaving .dv-card unstyled on every surface that uses
   it (12 views + the /admin/design_system showcase). Restored here. */
/* engine.css — v4 booking-engine wizard chrome (calendar grid + step
   indicator), ported light from the legacy dark public.css. Slice 2A. */
/* ─────────────────────────────────────────────────────────────────────
   engine.css — booking engine (Slice 2A) wizard chrome.

   The public booking wizard's calendar grid + step-indicator styling used
   to live in the legacy dark public.css (not loaded by the v4 engine). This
   file is the v4 light port: token-driven, no dark blocks, no naked hex.
   Two jobs:
     1. Structural CSS the wizard partials need (.bw-cal-grid is a 7-col grid;
        .booking-step-indicator state styling the JS toggles).
     2. Remap the handful of raw-blue Tailwind classes the date-picker /
        dives controllers inject (bg-blue-600 selected cells, text-blue-600
        prices, blue chips) onto the per-tenant accent token, so the funnel
        tracks the shop's brand instead of a hardcoded blue.

   @imported from application.css after booking-v2.css.
   ───────────────────────────────────────────────────────────────────── */
/* ── Calendar grid (7 columns) ──────────────────────────────────────── */
.bw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
/* Remap the date-picker's JS-injected blue onto the tenant accent (light).
   Default (gray-700) + past (gray-300) cells already read fine on canvas. */
.booking-wizard .bw-cal-grid .bg-blue-600 {
  background-color: var(--accent) !important;
}
.booking-wizard .bw-cal-grid .ring-blue-600 {
  --tw-ring-color: var(--accent) !important;
}
.booking-wizard .bw-cal-grid .text-blue-600 {
  color: var(--accent) !important;
}
.booking-wizard .bw-cal-grid .hover\:bg-blue-50:hover {
  background-color: var(--accent-soft) !important;
}
/* Selected-date chips + product prices the controllers inject in raw blue. */
.booking-wizard .bg-blue-50 { background-color: var(--accent-soft) !important; }
.booking-wizard .border-blue-200 { border-color: var(--accent-border) !important; }
.booking-wizard .text-blue-700,
.booking-wizard .text-blue-600 { color: var(--accent) !important; }
/* ── Step indicator ─────────────────────────────────────────────────── */
/* Base = upcoming step. The wizard JS toggles .active / .completed (and the
   raw Tailwind state classes it also applies) to drive the journey. */
.booking-step-indicator {
  background-color: var(--surface-alt);
  color: var(--muted);
  cursor: pointer;
}
/* Current step — accent fill + focus ring. (base_wizard JS toggles .active.) */
.booking-step-indicator.active {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.booking-step-indicator.active .bw-step-number { display: inline !important; }
.booking-step-indicator.active .bw-step-check { display: none !important; }
/* Completed step — accent fill + checkmark. (base_wizard JS toggles .completed.) */
.booking-step-indicator.completed {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none;
}
.booking-step-indicator.completed .bw-step-number { display: none !important; }
.booking-step-indicator.completed .bw-step-check { display: inline !important; }
/* Upcoming steps — base_wizard JS tags them bg-surface/border-2/
   border-hairline-strong/text-muted. Collapse to the engine's subtle fill so
   the step row stays on-system. Keyed on the stable .border-2 marker the JS
   still emits (the old bg-white/border-gray-300 palette hooks are gone). */
.booking-step-indicator.border-2 {
  background-color: var(--surface-alt) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: none !important;
}
.booking-step-indicator.text-white { color: #fff !important; }
/* Connectors — hairline default, accent once the step is completed. base_wizard
   now fills completed connectors with the bg-accent token (was bg-green-500). */
.booking-step-connector { background-color: var(--hairline); }
.booking-step-connector.bg-accent { background-color: var(--accent) !important; }
/* ── Waiver signature field ─────────────────────────────────────────── */
/* Mode toggle (Draw / Type); the signature controller toggles .active. */
.sig-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn, 6px);
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.sig-mode-btn:hover { background-color: var(--surface-alt); }
.sig-mode-btn.active {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}
/* Canvas — white surface with a subtle ruled guide line. */
.sig-canvas-container {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 39px, var(--hairline) 39px, var(--hairline) 40px
  );
}
.sig-canvas { cursor: crosshair; display: block; }
/* Typed signature — dashed field, cursive preview. */
.sig-typed-input {
  width: 100%;
  height: 3.25rem;
  padding: 0 0.875rem;
  font-family: "Brush Script MT", cursive;
  font-size: 1.25rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 2px dashed var(--hairline-strong);
  border-radius: var(--radius-md, 8px);
}
.sig-typed-input:focus {
  outline: none;
  border-color: var(--accent);
}
/* ── Legacy boolean-toggle-buttons (bootstrap variant) ──────────────── */
/* The shared themes/legacy/_boolean_toggle_buttons partial emits Bootstrap
   btn-group classes; the boolean-toggle-buttons controller swaps btn-primary
   (active) ↔ btn-outline-secondary (inactive). The engine doesn't load
   Bootstrap, so we style those classes to v4 — scoped to .engine-body so it
   only affects the booking engine, never account/POS surfaces. */
.engine-body .btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.engine-body .btn-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--hairline);
  background-color: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.engine-body .btn-group .btn-outline-secondary:hover { background-color: var(--surface-alt); }
.engine-body .btn-group .btn-primary {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}
/* ── Wizard modals (product picker + accommodation) ─────────────────── */
/* base_dives / public-accommodation inject a .bw-modal-overlay > .bw-modal-panel
   dialog. The overlay/panel constraint CSS lived in the dark public.css; this is
   the light port, scoped to .engine-body. :not(.hidden) keeps the static
   accommodation modal hidden until the controller reveals it (the product modal
   is added to the DOM only while open, so it has no .hidden). The bw-modal-grid
   (product card grid) is reused inside the panel. */
.engine-body .bw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* The static accommodation modal ships with .hidden; keep it hidden until the
   controller reveals it (our scoped overlay rule outranks Tailwind's .hidden). */
.engine-body .bw-modal-overlay.hidden { display: none !important; }
.engine-body .bw-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90dvh;
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.25);
}
@media (min-width: 640px) {
  .engine-body .bw-modal-overlay { align-items: center; }
  .engine-body .bw-modal-panel {
    max-width: var(--bw-modal-max-width, 56rem);
    margin: 0 1rem;
    max-height: 85vh;
  }
}
.bw-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 576px) {
  .bw-modal-grid { grid-template-columns: 1fr 1fr; }
}
/* dv-toast — transient confirmation toasts, top-right stack.
   Spawned by controllers/toast_controller.js (flash → toast bridge). */
/* ───────────────────────────────────────────────────────────────────
   dv_toast — transient confirmation toasts (operator / light theme)
   Approved design: Option A, top-right stack (tmp/toast-preview.html).
   Floats over content, stacks newest-on-top, auto-dismisses after 4s
   with a progress bar, manual close. Token-only.
   Spawned by toast_controller.js (flash → toast bridge).
   ─────────────────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast-stack.tr { top: 16px; right: 16px; }
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.16), 0 2px 6px rgba(17, 24, 39, 0.08);
  padding: 12px 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  animation: dv-toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.toast.out { animation: dv-toast-out 0.18s ease forwards; }
@keyframes dv-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dv-toast-out {
  to {
    opacity: 0;
    transform: translateX(16px);
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -10px;
  }
}
.toast__ic { flex-shrink: 0; margin-top: 1px; }
.toast__ic svg { display: block; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.toast__msg { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 1px; }
.toast__x {
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  margin: -2px -2px 0 0;
  border-radius: 4px;
  background: none;
  border: 0;
  line-height: 0;
}
.toast__x svg { display: block; }
.toast__x:hover { background: var(--surface-alt, var(--gray-100)); color: var(--text-primary); }
.toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  animation: dv-toast-shrink 4s linear forwards;
}
@keyframes dv-toast-shrink {
  from { width: 100%; }
  to   { width: 0; }
}
/* status accents — generic notification semantics from tokens.css */
.toast.success { background: var(--green-100); border-color: var(--success-border); border-left-color: var(--success); }
.toast.success .toast__ic,
.toast.success .toast__bar { color: var(--success); }
.toast.error { background: var(--rose-100); border-color: var(--danger-border); border-left-color: var(--danger); }
.toast.error .toast__ic,
.toast.error .toast__bar { color: var(--danger); }
.toast.warning { background: var(--amber-100); border-color: var(--warning-border); border-left-color: var(--warning); }
.toast.warning .toast__ic,
.toast.warning .toast__bar { color: var(--warning); }
.toast.info { background: var(--sky-100); border-color: var(--info-border); border-left-color: var(--info); }
.toast.info .toast__ic,
.toast.info .toast__bar { color: var(--info); }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out { animation-duration: 0.01ms; }
  .toast__bar { animation: none; width: 0; }
}
/* waiver_share — shared "Show QR & link" control (booking roster + POS success). */
/* waiver_share — the shared "Show QR & link" control rendered by the booking
   roster and the POS success screen (shared/waivers/_waiver_share). Token-only
   per the design gate; no raw palette colors. #35. */
.wv-share {
  margin-top: 8px;
}
.wv-share__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}
.wv-share__toggle:hover {
  color: var(--accent-strong);
}
.wv-share__panel {
  margin-top: 8px;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.wv-share__qr {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px;
  line-height: 0;
}
.wv-share__linkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.wv-share__url {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--muted);
  word-break: break-all;
}
.wv-share__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.wv-share__copy:hover {
  background: var(--surface-alt);
}
.wv-share__copy.copied {
  color: var(--confirmed);
  border-color: var(--confirmed-border);
}
/* Page-scoped CSS for redesigned families (added per page-family rollout). */
/* ─────────────────────────────────────────────────────────────────────
   Fleet — page-specific CSS for account/boats/index.

   White-label benchmark: project/pages/m4-fleet.html (extracted spec in
   tmp_fleet_benchmark.md). m4-fleet is a card grid of vessel cards (default
   view) + a table view toggle + a detail drawer.

   Only genuinely page-specific primitives live here. The header band,
   toolbar, chips and vertical divider are SHARED — they come from
   components/header_band.css (.dv-page-band / .dv-toolbar / .chip / .dv-divider)
   and are consumed as-is. Status pills come from the shared .status-pill family
   (dashboard.css). Do NOT redefine any of those here.

   Token-driven (consumes the semantic aliases from tokens.css).
   ───────────────────────────────────────────────────────────────────── */
/* ── Vessel card (default grid view) ──────────────────────────────────
   WL §6a. Card shell + the procedural boat illustration (no image asset —
   pure CSS clip-path silhouette over a paper-gradient tile). */
.vessel-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg, 10px);
  padding: 20px;
  cursor: pointer;
  transition: border-color 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.vessel-card:hover { border-color: var(--hairline-strong, #D9D4C5); }
/* ── Boat illustration — card (80×56) ─────────────────────────────────
   ::before = hull silhouette, ::after = waterline. Type modifiers swap the
   hull clip-path: default speedboat, .catamaran twin-hull, .dhoni curved. */
.vessel-illu {
  width: 80px; height: 56px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--surface-alt) 100%);
  border-radius: 8px;
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.vessel-illu::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: 16px; height: 14px;
  background: var(--ink);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  border-radius: 2px;
}
.vessel-illu::after {
  content: '';
  position: absolute;
  left: 14px; right: 28px;
  bottom: 8px; height: 8px;
  background: linear-gradient(180deg, transparent 50%, var(--accent) 50%);
  border-radius: 0 0 999px 999px;
  opacity: 0.6;
}
.vessel-illu.catamaran::before {
  clip-path: polygon(0 0, 45% 0, 50% 100%, 55% 0, 100% 0, 100% 100%, 0 100%);
  height: 18px; bottom: 14px;
}
.vessel-illu.catamaran::after { display: none; }
.vessel-illu.dhoni::before {
  clip-path: polygon(0 60%, 12% 0, 88% 0, 100% 60%, 96% 100%, 4% 100%);
  height: 18px; bottom: 16px;
}
/* ── View toggle (segmented Card / Table control) ─────────────────────
   WL §4. Presentational here — only the Card view has a server render; the
   Table segment is a disabled placeholder (flagged in
   DESIGN_PARITY_MISSING_CONTENT.md). */
.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px;
  border: none; border-radius: 6px; cursor: pointer;
  color: var(--muted-2); background: transparent;
  transition: background 120ms ease, color 120ms ease;
}
.view-btn:hover { color: var(--ink); background: var(--hairline-2); }
.view-btn.active { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
.view-btn.is-disabled { cursor: not-allowed; }
.view-btn.is-disabled:hover { color: var(--muted-2); background: transparent; }
/* ── Search field (toolbar) ───────────────────────────────────────────
   WL .search-wrap. Presentational (no fleet-search backend yet). */
.fleet-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 8px;
  padding: 0 10px;
  height: 32px;
}
.fleet-search svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.fleet-search input {
  border: none; outline: none; background: transparent;
  font-size: var(--text-sm); color: var(--ink); font-family: var(--font-sans); width: 100%;
}
.fleet-search input::-moz-placeholder { color: var(--muted); }
.fleet-search input::placeholder { color: var(--muted); }
/* ─────────────────────────────────────────────────────────────────────
   Gear index — page-scoped components.

   Ported from the White-label-design benchmark (m6-gear.html). WL is the
   visual source of truth; tokens are remapped to Dive-Management's palette
   (tokens.css). Structure (dv-page-band header + dv-toolbar + dv-table-wrap)
   is consumed from the shared component layer (components/header_band.css,
   account/divers.css). This sheet adds ONLY the genuinely page-specific bits:

   1. the category `--cat-*` color token set (WL hard-coded these hex values
      twice — once on the type-card swatch, once on the item-id dot; the spec
      flagged the duplication, so they are tokenized here as the single
      source of truth), and
   2. the `.type-card` summary tile + `.item-id` colored ID + `.svc-cell`
      service-date cell, which exist only on this page.

   Status badges use the synced `.status-pill` system (status_palette_helper
   `equipment_status_presentation`), NOT WL's `.dv-badge`.
   ───────────────────────────────────────────────────────────────────── */
/* ── Per-category color tokens ────────────────────────────────────────
   8 categories (Equipment::CATEGORIES). WL only swatched 6; the two extra
   DM categories (mask, smb) get their own hues so every row dot is distinct.
   Both the type-card swatch and the item-id dot reference these.
   v4: every hue derives from the system palette (the WL swatches were
   v3-era hex, incl. a banned purple). smb stays amber-orange — real
   SMBs are orange — via the amber ramp rather than an off-system hex. */
:root {
  /* P3-N (2026-06-29): category swatches no longer borrow status hues
     (Fins read as red/alert, Regulators as green/OK). One neutral swatch
     for every category — the label carries identity; red/green/amber stay
     reserved for real item status (serviceable / service-due / quarantined). */
  --cat-tank:      var(--muted-2);
  --cat-bcd:       var(--muted-2);
  --cat-regulator: var(--muted-2);
  --cat-suit:      var(--muted-2);
  --cat-fin:       var(--muted-2);
  --cat-computer:  var(--muted-2);
  --cat-mask:      var(--muted-2);
  --cat-smb:       var(--muted-2);
}
/* ── Type strip cards ─────────────────────────────────────────────────
   Category summary tiles above the table. Page-local — WL m6-gear only. */
.type-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.type-card:hover { border-color: var(--hairline-strong); }
.type-card.is-on { background: var(--accent-soft); border-color: var(--accent-border); }
.type-card .swatch {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 8px; vertical-align: middle;
}
.type-card .tname { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--ink); }
.type-card .tval  { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--ink); margin-top: 6px; }
.type-card .tval small { color: var(--muted); font-size: var(--text-xs); margin-left: 3px; }
.type-card .talert { font-size: var(--text-2xs); font-weight: 500; color: var(--briefing); letter-spacing: 0.02em; margin-top: 4px; }
.type-card .talert--muted { color: var(--muted); }
.type-card.is-on .talert { color: var(--accent); }
/* ── Item ID with category color dot ──────────────────────────────────
   mono identifier preceded by an 8px rounded square in the category hue. */
.item-id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.item-id::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.item-id.t-tank::before      { background: var(--cat-tank); }
.item-id.t-bcd::before       { background: var(--cat-bcd); }
.item-id.t-regulator::before { background: var(--cat-regulator); }
.item-id.t-suit::before      { background: var(--cat-suit); }
.item-id.t-fin::before       { background: var(--cat-fin); }
.item-id.t-computer::before  { background: var(--cat-computer); }
.item-id.t-mask::before      { background: var(--cat-mask); }
.item-id.t-smb::before       { background: var(--cat-smb); }
/* ── Service cell (last / next maintenance date) ──────────────────────
   Two-line: uppercase micro-label over a mono date. warn/urgent recolor the
   date when service is approaching / overdue. */
.svc-cell { display: flex; flex-direction: column; gap: 2px; }
.svc-cell .l { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.svc-cell .v { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }
.svc-cell .v.warn   { color: var(--briefing); }
.svc-cell .v.urgent { color: var(--cancelled); }
/* ── Registry table <900px (D20) ──────────────────────────────────────
   Intentional narrow layout instead of a squeezed 5-column table: the
   Next-service + Assigned columns drop out and their values re-stack as
   a second meta line under Description (`.gear-registry__stacked`,
   hidden on desktop). Horizontal scroll on the wrap stays as the
   fallback for anything still wider than the viewport. */
.gear-registry.dv-table-wrap { overflow-x: auto; }
.gear-registry__stacked { display: none; }
@media (max-width: 899px) {
  .gear-registry th:nth-child(4),
  .gear-registry td:nth-child(4),
  .gear-registry th:nth-child(5),
  .gear-registry td:nth-child(5) { display: none; }
  .gear-registry__stacked {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 8px;
         column-gap: 8px;
  }
}
/* account/ledger.css — page-scoped styles for the Ledger page.
   Shared primitives (.dv-page-band, .dv-toolbar, .chip, .dv-table-wrap,
   .status-pill) are defined in components/header_band.css + dashboard.css.
   Only ledger-specific rules live here. */
/* ── Date navigation arrows & Close-day button ────────────────────────
   Promoted to the shared button family in components/buttons.css. The arrows
   now use `.dv-btn dv-btn--secondary dv-btn--icon dv-btn--sm` (32px square,
   hairline outline) and Close-day uses `.dv-btn dv-btn--primary`. The former
   one-off `.ledger-nav-arrow` / `.ledger-close-btn` rules were removed. */
/* ── KPI stat card grid ───────────────────────────────────────────────
   Promoted to the shared boxed-stat component (.dv-stat-card-grid /
   .dv-stat-card / -label / -value) in components/stat_card.css. The Ledger
   day-summary now consumes those shared classes; the former .ledger-stat-*
   rules were removed (values carried over byte-for-byte). */
/* ── Transaction table row hover ─────────────────────────────────── */
.ledger-table-row {
  transition: background 120ms ease-out;
}
.ledger-table-row:hover {
  background: var(--hover-warm, var(--canvas));
}
/* ── Amount colours ───────────────────────────────────────────────── */
.ledger-amount--income {
  color: var(--green-700, #15803d);
}
.ledger-amount--refund {
  color: var(--red-600, #dc2626);
}
/* ── Payment method badge ─────────────────────────────────────────── */
.ledger-method-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-2, var(--muted));
  white-space: nowrap;
}
/* Method-specific tints (subtle, not loud) */
.ledger-method-badge--cash          { background: var(--confirmed-bg); border-color: var(--confirmed-border); color: var(--confirmed); }
.ledger-method-badge--credit_card,
.ledger-method-badge--debit_card    { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.ledger-method-badge--bank_transfer { background: var(--inwater-bg); border-color: var(--inwater-border); color: var(--inwater); }
.ledger-method-badge--online_payment{ background: var(--briefing-bg); border-color: var(--briefing-border); color: var(--briefing); }
.ledger-method-badge--agent_credit  { background: var(--pending-bg); border-color: var(--pending-border); color: var(--pending); }
/* ── Cash drawer count (day-close denomination grid, MR-D) ────────────
   Optional till count keyed before close. Token-clean, page-scoped. */
.ledger-close-card {
  padding: 16px 18px;
}
.ledger-close-card__head {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}
.ledger-close-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}
.ledger-drawer-count__head {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}
.ledger-drawer {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .ledger-drawer { grid-template-columns: 1fr; }
}
.ledger-drawer__section {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
}
.ledger-drawer__cur {
  margin-bottom: 10px;
}
.ledger-drawer__rows {
  display: grid;
  gap: 6px;
}
.ledger-drawer__row {
  display: grid;
  grid-template-columns: 1fr 84px;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.ledger-drawer__denom {
  color: var(--muted);
}
.ledger-drawer__qty {
  text-align: right;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* #312 — card reconciliation (POS statement vs recorded card) at close. */
.ledger-card-recon {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.ledger-card-recon__head {
  display: grid;
  gap: 2px;
}
.ledger-card-recon__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
}
.ledger-card-recon__recorded {
  display: grid;
  gap: 2px;
}
.ledger-card-recon__field {
  display: grid;
  gap: 4px;
  margin: 0;
}
.ledger-card-recon__input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ledger-card-recon__sym {
  position: absolute;
  left: 10px;
  color: var(--muted);
  pointer-events: none;
}
.ledger-card-recon__input {
  width: 140px;
  text-align: right;
  padding-left: 22px;
}
.ledger-card-recon__variance {
  width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════════
   Trip Run v4 — FULL-SCREEN tablet surface (account/dive_trips/run/show, layout
   "run"). Own icon rail + focus bar replace the account sidebar; a full-bleed
   sticky stepper, a centred stage flanked by a (reserved) dive-stops rail + a
   summary tray, and a pinned bottom action bar. Ported from prototype/run.css.
   Server-driven step flow unchanged. Tokens only, no dark:.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Shell layout ─────────────────────────────────────────────────────────── */
.run { min-height: 100vh; background: var(--canvas); color: var(--ink); display: flex; }
.run-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* App rail — the canonical collapsed DiveOS sidebar (diveos/_sidebar), pinned
   to its 68px icon strip. `.diveos-shell` is normally a full-width grid; inside
   the Run flex row we override it to hug just the rail so `.run-main` keeps the
   stage. The collapsed sidebar's own width/styles come from
   `.diveos-shell.is-rail-collapsed .diveos-sidebar` (diveos_shell.css). */
.run-appnav-shell {
  display: block;      /* not the shell grid — only the rail child sizes it */
  flex: 0 0 auto;
  min-height: 0;
}
/* Focus bar */
.run-focusbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 28px; min-height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.run-focusbar__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 6px 10px; border-radius: var(--radius-md);
  transition: background .12s, color .12s; flex-shrink: 0;
}
.run-focusbar__back:hover { background: var(--hover-warm); color: var(--ink); }
.run-focusbar__back .lucide { color: var(--muted-2); }
.run-focusbar__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.run-focusbar__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); letter-spacing: -0.01em; }
/* Full-bleed sticky stepper — the stepper itself centred. */
.run-stepper {
  position: sticky; top: 0; z-index: 15;
  padding: 16px 32px;
  background: var(--canvas); border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
}
.run-stepper__inner { max-width: 760px; margin: 0 auto; }
/* Content sits below the stepper: reserved rail / centred stage / summary. */
.run-shell {
  flex: 1;
  width: 100%; margin: 0 auto;
  padding: 32px 40px 0;
  display: grid;
  grid-template-columns: 260px minmax(720px, 800px) 300px;
  gap: 48px;
  justify-content: center;
  min-height: 0;
  align-items: start;
}
/* Explicit placement so a hidden rail doesn't let the stage collapse into it. */
.run-rail  { grid-column: 1; background: transparent; padding: 0; display: flex; flex-direction: column; position: sticky; top: var(--run-stick-top, 112px); }
.run-rail[hidden] { display: none; }
/* Comfortable reading cap: when the stage fills a wide tablet (tray dropped,
   grid track 1fr), the log columns stop stretching past --run-stage-cap. No
   effect on desktop, where the track is already ≤800px. */
.run-stage { grid-column: 2; min-width: 0; max-width: var(--run-stage-cap, 1200px); padding: 0 0 120px; }
.run-tray  { grid-column: 3; align-self: start; position: sticky; top: var(--run-stick-top, 112px); }
.run-tray__note { font-size: var(--text-xs); color: var(--muted); margin: 9px 0 0; line-height: 1.45; }
/* Pinned bottom action bar. */
.run-actionbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 40px; background: var(--surface);
  border-top: 1px solid var(--hairline); box-shadow: var(--shadow-md);
}
.run-actionbar__lead { display: flex; align-items: center; gap: 16px; min-width: 0; }
.run-actionbar__back-form { flex-shrink: 0; }
.run-actionbar__note { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); min-width: 0; }
.run-actionbar__note .lucide { color: var(--muted-2); }
.run-actionbar__note.is-warn { color: var(--briefing); }
.run-actionbar__note.is-warn .lucide { color: var(--briefing); }
.run-actionbar__cta { min-width: 180px; justify-content: center; }
.run-actionbar__cta:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
/* Mobile app bar + menu — hidden on tablet+ (shown in the ≤640 block). */
.run-appbar { display: none; }
.run-menu { display: none; }
.run-steptabs { display: none; }
/* ── Check-in .run-person rows (v4) ─────────────────────────────────────────
   Avatar + name/cert + aside actions, as a light card row. The check-in control
   stays the real checkbox (bound to the bulk form). A checked-in row carries a
   green inset. */
.run-list { display: flex; flex-direction: column; gap: 8px; }
.run-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 56px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.run-person.is-in { box-shadow: inset 3px 0 0 var(--confirmed); }
.run-person--absent { background: var(--surface-alt); }
.run-person__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.run-person__name { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.run-person--absent .run-person__name { color: var(--muted); }
.run-person__cert { font-size: var(--text-xs); color: var(--muted); }
.run-person__aside { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Guide <select> inside the accent .dv-bulkbar (Run log-&-assign). Surface fill
   so it reads on the accent bar. */
.run-bulkbar__select {
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  max-width: 200px;
}
/* ═══ Dive · log table (PR-D2, prototype run.css §log table) ═══
   One surface card like the check-in list: rows in a single card, hairline-
   separated, grid-aligned columns, green left accent once a diver is back.
   The container clips (overflow hidden) so the accent is a straight strip. */
.run-logtable {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.run-logrow {
  display: grid;
  /* sel · who(+guide) · depth · min · bar · gas · Back */
  grid-template-columns: 26px minmax(120px, 1.4fr) 84px 84px 84px 104px 92px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline-2);
}
.run-logrow:first-child { border-top: 0; }
/* Reopen list (#3) — a done stop's divers, each a full-row link that opens the
   detail sheet. Simple flex (name grows) — NOT the 7-col log grid, which
   crushed the name into its 26px checkbox column. */
.run-reopen-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden;
}
.run-reopen-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline-2);
  text-decoration: none; color: var(--ink);
  transition: background .12s;
}
.run-reopen-row:first-child { border-top: 0; }
.run-reopen-row:hover { background: var(--hover-warm); }
.run-reopen-row__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.run-reopen-row__name {
  font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-reopen-row__guide { font-size: var(--text-xs); color: var(--muted); }
.run-reopen-row__stat { font-size: var(--text-xs); color: var(--muted); flex-shrink: 0; }
.run-reopen-row__sign {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  min-width: 72px; flex-shrink: 0;
  font-size: var(--text-xs); color: var(--muted-2);
}
.run-reopen-row__sign.is-signed { color: var(--confirmed); font-weight: 500; }
.run-logrow.is-back { box-shadow: inset 3px 0 0 var(--confirmed); }
/* Select-all header (trips can have 20+ divers). */
.run-logtable__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 14px 10px;
}
.run-logtable__head-lbl { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
/* Check-in "select all" — a light header row above the guest list. */
.run-checkin-selectall { display: flex; align-items: center; gap: 10px; padding: 2px 14px 10px; }
.run-checkin-selectall__lbl { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
/* Portrait tablet (641–900): the 7-col grid bottoms out at ~640px and crushes
   the last column (Back) off-screen. Switch to a flex row that keeps the DESKTOP
   order (select · name · depth · min · bar · gas · Back) but lets the NAME
   shrink/truncate so the fixed fields — including Back — always fit. The phone
   grid below (≤640) then takes over for the one-line depth/min/bar layout. */
@media (max-width: 900px) {
  .run-logrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .run-logrow__who { flex: 1 1 150px; min-width: 0; }
  .run-logrow .diveos-input,
  .run-logrow > [data-controller="dv-select"] { flex: 0 1 auto; width: 72px; }
  .run-logrow > label:last-child { flex: 0 0 auto; }
}
/* Phones (≤640): a two-tier grid so depth/min/bar stay on ONE line instead of
   each stacking full-width. Row 1: checkbox + name. Row 2: the three number
   inputs, equal thirds. Row 3: gas mix (spans) + Back. Column 1 is the checkbox
   gutter. Overrides the ≤900 flex above so the phone layout wins. */
@media (max-width: 640px) {
  .run-logrow {
    display: grid;
    grid-template-columns: 22px 1fr 1fr 1fr;
    grid-template-areas:
      "chk who who  who"
      "gut dep dur  bar"
      "gut gas gas  back";
    align-items: center;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 10px;
    padding: 14px 12px;
  }
  .run-logrow > .diveos-check:first-child { grid-area: chk; }
  .run-logrow__who { grid-area: who; min-width: 0; }
  .run-logrow > input.diveos-input:nth-of-type(1) { grid-area: dep; }
  .run-logrow > input.diveos-input:nth-of-type(2) { grid-area: dur; }
  .run-logrow > input.diveos-input:nth-of-type(3) { grid-area: bar; }
  .run-logrow > [data-controller="dv-select"] { grid-area: gas; min-width: 0; }
  .run-logrow > .diveos-check:last-child { grid-area: back; justify-self: end; }
  .run-logrow > input.diveos-input { width: 100%; text-align: center; }
}
/* ═══ Dive · left stops rail (desktop ≥1132) ═══
   Detached floating card in the reserved rail column; states mirror the cards.
   The mobile .run-pills below take over ≤1131 (see the media query). */
.run-rail__stopswrap {
  align-self: start;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 12px 10px;
}
.run-rail__stops-hd {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); padding: 4px 8px 8px;
}
.run-rail__stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.run-rail__stop-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-radius: var(--radius-md); text-decoration: none; color: var(--muted);
  transition: background .12s;
}
.run-rail__stop-link:hover { background: var(--hover-warm); }
.run-rail__stop-num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: 700;
  background: var(--gray-100); color: var(--muted);
}
.run-rail__stop-body { display: flex; flex-direction: column; min-width: 0; }
.run-rail__stop-site { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.run-rail__stop-cap { font-size: var(--text-2xs); color: var(--muted); font-family: var(--font-mono); }
.run-rail__stop--done .run-rail__stop-num { background: var(--confirmed); color: var(--surface); }
.run-rail__stop--active .run-rail__stop-link { background: var(--accent-soft); }
.run-rail__stop--active .run-rail__stop-num { background: var(--accent); color: var(--surface); }
.run-rail__stop--active .run-rail__stop-site { color: var(--accent); }
.run-rail__stop--pending .run-rail__stop-site { color: var(--muted); }
/* ═══ Dive · stops pills (mobile ≤1131 — the rail's counterpart) ═══
   Jump-nav over the stop cards: done = confirmed tint + check, current =
   accent fill, pending = muted. Anchors only — no client stop state. */
.run-pills {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.run-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
.run-pill:hover { border-color: var(--accent-border); color: var(--ink); }
.run-pill.is-done { color: var(--confirmed); border-color: var(--confirmed-border); background: var(--confirmed-bg); }
.run-pill.is-current { color: var(--surface); background: var(--accent); border-color: var(--accent); }
/* ═══ Responsive — tablet → phone ═════════════════════════════════════════
   ≤1515: drop the summary tray (keep rail + stage).
   ≤1131: drop the rail (single stage); stepper stops sticking.
   ≤640:  mobile Focus Flow — app-bar chrome replaces sidebar/focusbar/stepper. */
@media (max-width: 1515px) {
  /* Tray drops here — hand the freed width to the stage instead of leaving a
     dead margin (tablet full-screen). Rail stays; stage grows to fill. The
     content inside caps at --run-stage-cap so the log columns don't sprawl. */
  .run-tray { display: none; }
  .run-shell { grid-template-columns: 260px minmax(0, 1fr); justify-content: stretch; }
}
@media (max-width: 1131px) {
  .run-shell { grid-template-columns: minmax(0, 1fr); padding: 24px 32px 0; }
  .run-rail { display: none; }
  .run-stage { grid-column: 1; min-width: 0; }
  /* Keep the stepper pinned on tablet too (it's the primary Run device). The
     earlier `position: static` here unpinned the only sticky header, so the whole
     header scrolled away on a tablet mid-roster. Matches the desktop behaviour:
     focusbar scrolls off, stepper stays put at the top. */
  .run-stepper { position: sticky; top: 0; }
  /* The rail is gone — the pills become the stops nav. */
  .run-pills { display: flex; }
}
@media (max-width: 640px) {
  .run-appnav-shell, .run-focusbar, .run-stepper { display: none; }
  .run-shell { grid-template-columns: 1fr; padding: 0; }
  .run-stage { grid-column: 1; padding: 16px 16px 110px; }

  .run-appbar {
    display: block; position: sticky; top: 0; z-index: 40;
    background: var(--surface); border-bottom: 1px solid var(--hairline);
  }
  .run-appbar__full { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
  .run-appbar__id { min-width: 0; }
  .run-appbar__kick { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
  .run-appbar__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--text-md); color: var(--ink); }

  .run-steptabs { display: flex; gap: 4px; padding: 0 8px; border-top: 1px solid var(--hairline-2); }
  .run-steptab {
    flex: 1; padding: 11px 4px; text-align: center;
    border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 600; color: var(--muted);
  }
  .run-steptab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

  .run-menu {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(17, 24, 39, .4);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .run-menu.is-open { opacity: 1; pointer-events: auto; }
  .run-menu__panel {
    width: 84%; max-width: 320px; height: 100%; background: var(--surface);
    padding: 20px 16px; box-shadow: var(--shadow-panel);
    transform: translateX(-100%); transition: transform .22s var(--ease-out-quart);
    display: flex; flex-direction: column; gap: 8px;
  }
  .run-menu.is-open .run-menu__panel { transform: translateX(0); }
  .run-menu__brand { padding: 4px 8px 16px; border-bottom: 1px solid var(--hairline); }
  .run-menu__brand-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--text-md); }
  .run-menu__brand-name .lucide { color: var(--accent); }
  .run-menu__brand-team { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }
  .run-menu__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .run-menu__item {
    display: flex; align-items: center; gap: 12px; padding: 13px 12px;
    border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm);
    color: var(--muted); text-decoration: none; min-height: 48px;
  }
  .run-menu__item .lucide { color: var(--muted-2); }
  .run-menu__item.is-active { background: var(--accent-soft); color: var(--accent); }
  .run-menu__item.is-active .lucide { color: var(--accent); }

  .run-actionbar { padding: 12px 16px; }
  .run-actionbar__cta { min-width: 120px; min-height: 44px; }
}
/* ═══ Dive step — stop pills are the sticky anchor ═══
   On the Dive step the operator scrolls a long per-diver log; keep the stop
   switcher pinned so they can jump between stops without scrolling back up.
   The header (app-bar on mobile, stepper on tablet) scrolls away — ONLY the
   pills stick. This replaces the old app-bar collapse, which changed the
   app-bar's height on scroll and reflowed the document 87px each time it
   toggled (a persistent judder near the top + a flicker loop at the bottom). */
@media (max-width: 1131px) {
  .run--dive .run-stepper { position: static; } /* tablet: don't pin the header */
  .run--dive .run-pills {
    position: sticky;
    top: 0;
    z-index: 16;
    /* match the surrounding form-section panel + bleed over its 16px side
       padding so the pinned strip spans the panel and masks cards scrolling
       under it. */
    background: var(--surface);
    margin: -2px -16px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hairline);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .run--dive .run-pills::-webkit-scrollbar { display: none; }
  .run--dive .run-pill { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .run--dive .run-appbar { position: static; } /* mobile: header scrolls away */
}
/* ═══ Dive · per-diver detail sheet (.dv-sheet override) ═══
   Base .dv-sheet (components/sheet.css) provides the overlay + is-open (bottom
   sheet ≤767); here it becomes a right-side drawer ≥768. Big-target guide pills
   + fields + signature for wet-hand on-deck entry. Tokens only. */
.run-detail-sheet .dv-sheet__panel { display: flex; flex-direction: column; }
/* The lazy-load turbo-frame sits between the panel and its head/body/foot;
   display:contents lets those be direct flex children so the body's
   flex:1 + internal scroll works and the foot (Save log) stays pinned +
   reachable (else it can push off-screen on a phone with the keyboard up). */
.run-detail-sheet turbo-frame#run_detail { display: contents; }
.run-detail-sheet .dv-sheet__body { flex: 1; overflow-y: auto; }
/* ≥641: full-height right-side drawer. Two fixes over the earlier version:
   - starts at 641 (not 768) so the 641–767 zone is a side drawer, not the base
     sheet's centered floating modal;
   - `max-height: none` overrides the base sheet's `max-height: 90vh` so the
     panel spans the FULL viewport height (it was short by 10vh before). */
@media (min-width: 641px) {
  .run-detail-sheet.dv-sheet { align-items: stretch; justify-content: flex-end; }
  .run-detail-sheet .dv-sheet__panel {
    width: 480px; max-width: 92vw; height: 100%; max-height: none; margin: 0;
    border-radius: 0; transform: translateX(100%);
  }
  .run-detail-sheet.is-open .dv-sheet__panel { transform: translateX(0); }
  .run-detail-sheet .dv-sheet__grip { display: none; }
}
.run-sheet__diver { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.run-sheet__lbl { margin: 0 0 8px; color: var(--muted-2); }
.run-sheet__guides { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.run-sheet__guide {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: var(--surface);
  font-size: var(--text-sm); font-weight: 600; color: var(--muted); cursor: pointer;
}
.run-sheet__guide:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.run-sheet__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.run-field { display: block; }
.run-field .dv-eyebrow { display: block; color: var(--muted-2); margin-bottom: 6px; }
.run-field__in { position: relative; display: flex; align-items: center; }
.run-field__in input {
  width: 100%; padding: 14px 44px 14px 16px;
  font-size: var(--text-lg); font-weight: 700; font-family: var(--font-mono); text-align: center;
  border: 1px solid var(--input-border); border-radius: var(--radius-lg);
  background: var(--input-bg); color: var(--ink);
}
.run-field__unit { position: absolute; right: 16px; color: var(--muted-2); font-family: var(--font-mono); font-size: var(--text-sm); }
.run-sign { margin-top: 20px; }
.run-sign__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
/* Signature pad fills the drawer's remaining height — a big, stable target for
   a wet, unstable hand signing at sea (was a small ~120px box with dead space
   below it on the full-height drawer). Scoped to the run drawer so the waiver
   reuse of the same signature component is untouched. The signature controller
   uses a ResizeObserver, so the canvas re-measures when it grows. */
.run-detail-sheet #run-detail-form { display: flex; flex-direction: column; min-height: 100%; }
.run-detail-sheet .run-sign { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.run-detail-sheet .dvsign-pad { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"] {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
/* The flex rule above is specificity (0,3,0) and would beat the .hidden utility
   (0,1,0), so switching to Type left the draw canvas visible ("Type doesn't
   change to typing"). This restores the toggle: .hidden must win here. */
.run-detail-sheet .dvsign-pad [data-signature-target="canvasWrapper"].hidden { display: none; }
.run-detail-sheet .sig-canvas-container {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 240px; max-width: none;
}
.run-detail-sheet .sig-canvas { flex: 1 1 auto; min-height: 0; height: auto; display: block; }
.run-logrow__who { text-decoration: none; }
.run-logrow__who:hover { color: var(--accent); }
/* ═══ Focus-bar Emergency button + emergency sheet ═══ */
.run-focusbar__emg {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--radius-md);
  border: 1px solid var(--cancelled-border); background: var(--cancelled-bg); color: var(--cancelled);
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.run-focusbar__emg:hover { border-color: var(--cancelled); }
.run-emg-sheet__head { display: flex; align-items: flex-start; gap: 12px; }
.run-emg-sheet__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--cancelled-bg); color: var(--cancelled);
}
.run-emg-sheet__stack { display: flex; flex-direction: column; min-width: 0; }
.run-emg-sheet__eyebrow { color: var(--cancelled); }
.run-emg-sheet__close { margin-left: auto; }
.run-emg-sheet__lead { font-size: var(--text-sm); color: var(--muted); margin: 12px 0 16px; line-height: 1.5; }
.run-emg-sheet__optform { width: 100%; }
.run-emg-sheet__opt {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--hairline); background: var(--surface); cursor: pointer;
  transition: border-color .12s;
}
.run-emg-sheet__opt:hover { border-color: var(--hairline-strong); }
.run-emg-sheet__opt--danger { border-color: var(--cancelled-border); background: var(--cancelled-bg); color: var(--cancelled); }
.run-emg-sheet__opt-t { display: block; font-weight: 600; font-size: var(--text-sm); }
.run-emg-sheet__opt-s { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.run-emg-sheet__opt--danger .run-emg-sheet__opt-s { color: var(--cancelled); }
/* ═══ Return · per-stop close-out rows ═══ */
.run-return-stops {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden;
}
.run-return-stop {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--hairline-2);
}
.run-return-stop:first-child { border-top: 0; }
.run-return-stop__t { font-size: var(--text-sm); color: var(--ink); }
/* ─── Trip Roster tab — v4 (PR-C interactions) ───────────────────────────────
   Ported from the Trip v4 prototype roster surface (pt-* → dv-*): the two
   roster card heads, the guide chips row, the dense diver manifest row-list,
   and the add-diver sheet internals. The multi-select popover itself is the
   global component (components/popover.css). Token discipline only. */
/* ── Card head shared by the Dive guides + Divers cards ─────────────────── */
.dv-rcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}
.dv-rcard__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--surface-alt); color: var(--muted);
}
.dv-rcard__ttl { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.dv-rcard__ttl h2 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.dv-rcard__count { font-size: var(--text-sm); color: var(--muted); }
.dv-rcard__count .mono { font-family: var(--font-mono); }
.dv-rcard__body { padding: 18px 20px; }
/* ── Dive guides — chips row + popover anchor ───────────────────────────── */
.dv-guides {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  position: relative;
}
.dv-guides__empty { font-size: var(--text-sm); color: var(--muted-2); }
/* The chips partial is stream-replaced wholesale; its wrapper must not break
   the flex row, so it renders as display:contents. */
.dv-guides__chips { display: contents; }
/* ── Diver manifest — dense borderless row-list ─────────────────────────── */
.dv-divers { display: flex; flex-direction: column; }
.dv-drow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 6px;
  border-top: 1px solid var(--hairline-2, var(--hairline));
  transition: background .12s;
}
.dv-drow:first-child { border-top: 0; }
.dv-drow:hover { background: var(--hover-warm); }
.dv-drow__body { flex: 1; min-width: 0; }
.dv-drow__name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
.dv-drow__name a { color: inherit; text-decoration: none; }
.dv-drow__name a:hover { color: var(--accent); }
.dv-drow__ref { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; color: var(--muted-2); }
.dv-drow__sub { font-size: var(--text-2xs); color: var(--muted-2); margin-top: 2px; }
.dv-drow__sub .mono { font-family: var(--font-mono); }
.dv-drow__act { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s; }
.dv-drow:hover .dv-drow__act,
.dv-drow:focus-within .dv-drow__act { opacity: 1; }
.dv-drow__act form { display: contents; }
.dv-drow__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border: 0; background: none; border-radius: var(--radius-pill);
  color: var(--muted-2); cursor: pointer; transition: background .12s, color .12s;
}
.dv-drow__x:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.dv-drow__chev {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted-2);
}
.dv-drow__chev:hover { color: var(--ink); }
/* ── Add-diver sheet (dv-sheet) internals ───────────────────────────────── */
.dv-addsheet__title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 2px;
}
.dv-addsheet__title h2 { margin: 0; }
.dv-addsheet .dv-sheet__body { padding-top: 16px; }
.dv-addsearch {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.dv-addsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.dv-addsearch .lucide { color: var(--muted-2); flex-shrink: 0; }
.dv-addsearch input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.dv-addsearch input::-moz-placeholder { color: var(--muted-2); }
.dv-addsearch input::placeholder { color: var(--muted-2); }
.dv-addgroup { margin-top: 14px; }
.dv-addgroup__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted-2);
  padding: 0 4px 4px;
}
.dv-addrow {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: var(--radius-sm);
}
.dv-addrow:hover { background: var(--hover-warm); }
.dv-addrow__body { flex: 1; min-width: 0; }
.dv-addrow__name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
.dv-addrow__sub { font-size: var(--text-2xs); color: var(--muted-2); }
.dv-addrow__sub .mono { font-family: var(--font-mono); }
.dv-addrow.is-added .dv-addrow__body { opacity: .5; }
.dv-addrow form { display: contents; }
.dv-addsheet__empty { padding: 20px; text-align: center; }
/* ─────────────────────────────────────────────────────────────────────
   Divers index — page-scoped components.

   Ported from the White-label-design benchmark (m3-divers.html). WL is the
   visual source of truth; tokens are remapped to Dive-Management's palette
   (tokens.css). Structure (page-header + dv-toolbar + dv-table-wrap) matches
   the benchmark; status badges use the synced `.status-pill` system, not WL's
   `.dv-badge`.
   ───────────────────────────────────────────────────────────────────── */
/* ── Page header / search box / table wrap ────────────────────────────
   Promoted to the shared component layer (components/header_band.css):
   `.dv-page-head`, `.search-wrap` (+ icon / input / placeholder / focus),
   `.dv-table-wrap` (+ table / thead / tbody / edge padding). Also consumed
   here via those named classes — no longer duplicated. The toolbar / chip /
   divider primitives live in the same shared sheet. */
/* Booking View Toggle Styles */
.booking-view-toggle {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
.toggle-group {
  display: flex;
  background-color: #f3f4f6;
  border-radius: 6px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  gap: 4px;
}
.toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background-color: transparent;
  color: #6b7280;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.toggle-btn:hover {
  background-color: #e5e7eb;
  color: #374151;
}
.toggle-btn.active {
  background-color: white;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Empty State — canonical definition lives in patterns.css
   (`.empty-state` + `.empty-state__icon` / `.empty-state__message`). The
   bookings empty states render via shared/patterns/_empty_state, so the
   page-scoped override (padding drift + hard-coded #6b7280) was redundant
   and has been removed. */
/* Responsive adjustments */
@media (max-width: 768px) {
  .toggle-group {
    width: 100%;
    justify-content: space-between;
  }

  .toggle-btn {
    flex: 1;
    justify-content: center;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   BOOKING DETAIL — m8 benchmark components (Phase 1)
   Ported from White-label m8-booking-detail.html (+ tokens.css). All rules
   are scoped under `.bk-detail` so they never collide with the global
   `.dv-badge` (trip_workflow.css), `.card-*` (public.css), or other pages.
   Tokens are DM-native (--surface, --hairline, --accent, etc.).
   ════════════════════════════════════════════════════════════════════════ */
/* ── Two-band header tab nav ──────────────────────────────────────────────
   `.page-tabs` / `.page-tab` / `.page-tab-count` were promoted (unscoped) to
   components/header_band.css so every detail header shares one tab component.
   `.bk-tabnav` (below) keeps the booking-specific sticky offset. */
/* ── Progress bar ─────────────────────────────────────────────────────── */
.bk-detail .dv-progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.bk-detail .dv-progress__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 999px;
}
/* ── Badge family (scoped — square + dot variants) ────────────────────── */
.bk-detail .dv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.bk-detail .dv-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.bk-detail .dv-badge--square { border-radius: 5px; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-2xs); padding: 3px 8px; }
.bk-detail .dv-badge--confirmed { background: var(--confirmed-bg); border-color: var(--confirmed-border); color: var(--confirmed); }
.bk-detail .dv-badge--pending   { background: var(--pending-bg);   border-color: var(--pending-border);   color: var(--pending); }
.bk-detail .dv-badge--briefing  { background: var(--briefing-bg);  border-color: var(--briefing-border);  color: var(--briefing); }
.bk-detail .dv-badge--cancelled { background: var(--cancelled-bg); border-color: var(--cancelled-border); color: var(--cancelled); }
/* ── Forked card shell (inline WL version) ────────────────────────────── */
.bk-detail .card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
}
/* Cards hosting a datepicker popover must let it escape the card bounds —
   the default overflow:hidden clips the "Schedule onto" calendar dropdown. */
.bk-detail .card.bk-overflow-visible {
  overflow: visible;
}
.bk-detail .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 0;
}
.bk-detail .card-head-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.bk-detail .card-head-left i,
.bk-detail .card-head-left svg { flex-shrink: 0; color: var(--muted-2); }
.bk-detail .card-head-right { display: flex; align-items: center; gap: 8px; }
.bk-detail .card-body { padding: 22px 24px; }
/* ── Guest hero card ──────────────────────────────────────────────────── */
.bk-detail .guest-hero-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}
.bk-detail .guest-hero { display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 20px; }
.bk-detail .guest-hero-avatar {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--sky-900) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--text-xl); font-weight: 600; font-family: var(--font-display);
}
.bk-detail .guest-hero-body { flex: 1; min-width: 0; }
.bk-detail .guest-hero-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bk-detail .guest-hero-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.bk-detail .guest-hero-edit-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--surface);
  font-size: var(--text-xs); font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap;
  flex-shrink: 0; text-decoration: none;
}
.bk-detail .guest-hero-edit-btn:hover { background: var(--canvas); }
.bk-detail .guest-hero-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: var(--text-sm); color: var(--muted); }
.bk-detail .guest-hero-country { font-size: var(--text-sm); color: var(--muted); }
.bk-detail .guest-hero-cert {
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--confirmed-bg); color: var(--confirmed); border: 1px solid var(--confirmed-border);
}
.bk-detail .guest-hero-contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bk-detail .guest-hero-contact-item {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 10px; background: var(--surface);
  text-decoration: none;
}
.bk-detail .guest-hero-contact-item:hover { color: var(--ink); }
.bk-detail .guest-hero-stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hairline); margin: 0 24px; }
.bk-detail .guest-hero-stat-cell { padding: 14px 16px; border-right: 1px solid var(--hairline); }
.bk-detail .guest-hero-stat-cell:first-child { padding-left: 24px; }
.bk-detail .guest-hero-stat-cell:last-child { border-right: none; padding-right: 24px; }
.bk-detail .guest-hero-stat-lbl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.bk-detail .guest-hero-stat-val { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 3px; }
.bk-detail .stat-month { font-size: var(--text-sm); font-weight: 400; color: var(--muted); font-family: var(--font-sans); }
/* Standalone trip stat band (no guest body above it) — drop the divider
   border/side-margins the integrated variant used; pad inside the card. */
.bk-detail .guest-hero-stat-strip--standalone { border-top: none; margin: 0; padding: 4px 0; }
/* ── Header contact line (Band 1) ─────────────────────────────────────── */
.contact-line,
.bk-contact-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 8px; font-size: var(--text-sm); color: var(--muted);
}
.bk-contact-id { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.bk-contact-dot { font-size: var(--text-xl); line-height: 0; color: var(--muted-2); }
.bk-contact-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.bk-contact-item i,
.bk-contact-item svg { color: var(--muted-2); flex-shrink: 0; }
.bk-contact-pref { color: var(--accent); }
.bk-contact-pref i,
.bk-contact-pref svg { color: var(--accent); }
/* ── Trip-plan strip ──────────────────────────────────────────────────── */
.bk-detail .trip-plan-strip { display: grid; grid-template-columns: 130px 1fr 130px; align-items: center; gap: 20px; margin: 22px 0 22px; }
.bk-detail .trip-plan-track { position: relative; height: 116px; }
.bk-detail .trip-plan-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 2px; background: var(--accent-border); border-radius: 2px; }
.bk-detail .trip-plan-totals { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); display: inline-flex; gap: 6px; align-items: center; z-index: 2; }
.bk-detail .trip-plan-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.bk-detail .trip-plan-end { text-align: center; }
.bk-detail .trip-plan-end-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--accent); z-index: 2; }
.bk-detail .trip-plan-end-dot.l { left: 0; }
.bk-detail .trip-plan-end-dot.r { right: 0; left: auto; transform: translate(50%, -50%); }
.bk-detail .trip-plan-pin { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 3; }
.bk-detail .trip-plan-pin-mark { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.bk-detail .trip-plan-pin-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); position: absolute; top: 30px; left: 50%; white-space: nowrap; letter-spacing: 0.04em; transform: translateX(-50%); }
/* trip card def-list rows */
.bk-detail .lbl { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.bk-detail .tpc-d { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ink); letter-spacing: -0.018em; margin-top: 4px; line-height: 1; }
.bk-detail .tpc-ds { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
/* ── Dive-only Trip timeline — D1 dot track (compact; no accommodation) ──
   logged dive = filled accent dot, upcoming = outline. Single dive collapses
   to a one-liner. Many dives collapse onto the dot row. */
.bk-detail .trip-dive-solo { display: flex; align-items: center; gap: 10px; padding: 6px 0 2px; }
.bk-detail .trip-dive-solo .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); flex-shrink: 0; }
.bk-detail .trip-dive-solo .dot.done { background: var(--accent); }
.bk-detail .trip-dive-solo .dot.today { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bk-detail .trip-dive-solo .t { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.bk-detail .trip-dive-solo .s { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); margin-left: auto; }
.bk-detail .trip-dive { padding: 4px 0 2px; }
.bk-detail .trip-dive-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }
.bk-detail .trip-dive-h .n { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.bk-detail .trip-dive-h .l { font-size: var(--text-xs); color: var(--muted); }
.bk-detail .trip-dive-h .r { margin-left: auto; font-size: 10.5px; font-family: var(--font-mono); color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.05em; }
.bk-detail .trip-dive-track { position: relative; height: 13px; margin: 6px 5px 0; }
.bk-detail .trip-dive-line { position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; background: var(--accent-border); transform: translateY(-50%); border-radius: 2px; }
.bk-detail .trip-dive-dots { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; }
.bk-detail .trip-dive-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.bk-detail .trip-dive-dot.done { background: var(--accent); }
/* Today = current dive: filled accent + a soft accent halo so "now" reads
   distinctly from past (solid) and future (empty). #26 state coloring. */
.bk-detail .trip-dive-dot.today { background: var(--accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-soft); }
.bk-detail .trip-dive-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); }
.bk-detail .trip-dive-ends .e { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-detail .trip-dive-ends .e.r { text-align: right; }
/* dive dot — hover tooltip: date (+ site when assigned) */
.bk-detail .trip-dive-dot { position: relative; cursor: default; }
.bk-detail .trip-dive-dot:hover::after {
  content: attr(data-tip); position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: var(--text-xs); font-family: var(--font-mono);
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 30;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18); pointer-events: none;
}
.bk-detail .trip-dive-dot:hover::before {
  content: ""; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--ink); z-index: 30; pointer-events: none;
}
/* Booking-detail tab nav pins to the top on scroll (the identity band above
   scrolls away under it), so the tabs stay reachable on long panels. */
.bk-tabnav { position: sticky; top: 0; z-index: 20; }
.bk-detail .dl-grid { display: grid; gap: 0; }
.bk-detail .dl-row-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); }
.bk-detail .dl-row-item:last-child { border-bottom: none; }
.bk-detail .dl-row-item dt { color: var(--muted); }
.bk-detail .dl-row-item dd { color: var(--ink); font-weight: 500; text-align: right; margin: 0; }
/* ── Waivers & Documents rows ─────────────────────────────────────────── */
.bk-detail .waiver-diver-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.bk-detail .waiver-diver-row:last-child,
.bk-detail .waiver-diver-row.is-last { border-bottom: none; }
.bk-detail .waiver-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--sky-900));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; color: #fff; flex-shrink: 0;
}
.bk-detail .waiver-avatar.alt { background: linear-gradient(135deg, var(--sky-900), var(--accent)); }
.bk-detail .waiver-diver-info { flex: 1; min-width: 0; }
.bk-detail .waiver-diver-name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.bk-detail .waiver-diver-cert { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.bk-detail .waiver-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bk-detail .waiver-send-link { font-size: var(--text-xs); color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; text-decoration: none; }
/* Plan 003 — per-diver "Fit gear" action, separated from the waiver column. */
.bk-detail .waiver-fit-link { flex-shrink: 0; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--hairline); white-space: nowrap; }
/* Two aligned columns inside .waiver-badges: status pill + trailing slot.
   Grid (not flex) so every row's columns snap to the same widths regardless
   of badge text length ("Signed" vs "Valid waiver on file" vs "Not signed"). */
.bk-detail .waiver-badges { display: grid; grid-template-columns: 158px 80px; align-items: center; gap: 0; }
.bk-detail .wv-status { display: flex; justify-content: flex-end; }
.bk-detail .wv-trail { display: flex; align-items: center; justify-content: flex-end; padding-left: 8px; }
.bk-detail .wv-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
/* No-email hint when a diver can't be emailed (share the QR/copy instead). #35 */
.bk-detail .waiver-no-email { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
/* The inline QR/copy share (shared/waivers/_waiver_share) wraps to a full-width
   second line under the diver, indented past the 32px avatar + 12px gap. #35 */
.bk-detail .waiver-diver-row { flex-wrap: wrap; }
.bk-detail .waiver-diver-row > .wv-share { flex-basis: 100%; margin-left: 44px; }
/* ── Right rail: Balance card ─────────────────────────────────────────── */
.bk-detail .balance-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.bk-detail .balance-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 10px; }
.bk-detail .balance-head-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bk-detail .balance-paid-pct { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
.bk-detail .balance-body { padding: 0 20px 20px; }
.bk-detail .balance-amount { display: flex; align-items: baseline; gap: 2px; margin-bottom: 12px; }
.bk-detail .balance-dollars { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.bk-detail .balance-cents { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--muted); letter-spacing: -0.02em; }
.bk-detail .balance-due { font-size: var(--text-sm); color: var(--muted); margin-left: 6px; }
.bk-detail .balance-sub { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); margin-bottom: 16px; margin-top: 12px; }
.bk-detail .balance-sub span:first-child { color: var(--accent); font-weight: 500; }
.bk-detail .balance-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: var(--text-sm); font-weight: 600; border: none; cursor: pointer; text-decoration: none; }
.bk-detail .balance-cta:hover { background: var(--accent-strong); }
/* ── Right rail: Booking Summary grid ─────────────────────────────────── */
.bk-detail .bk-sum-grid { display: grid; grid-template-columns: 1fr 1fr; }
.bk-detail .bk-sum-cell { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.bk-detail .bk-sum-cell:nth-child(even) { border-right: none; }
.bk-detail .bk-sum-cell:nth-child(n+3) { border-bottom: none; }
.bk-detail .bk-sum-cell:nth-child(-n+2) { border-top: none; }
.bk-detail .bk-sum-icon { width: 32px; height: 32px; border-radius: var(--radius); background: var(--sky-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.bk-detail .bk-sum-body { display: flex; flex-direction: column; gap: 3px; }
.bk-detail .bk-sum-lbl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.bk-detail .bk-sum-val { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.bk-detail .bk-sum-val.is-text { font-size: var(--text-md); font-weight: 500; letter-spacing: -0.02em; }
/* ── Right rail: Access & Sharing toggles ─────────────────────────────── */
.bk-detail .sharing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.bk-detail .sharing-row:last-child { border-bottom: none; }
.bk-detail .sharing-label { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.bk-detail .sharing-desc { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
/* .dv-toggle removed (#16) — booking toggles now use shared/components/_toggle_switch. */
/* ════════════════════════════════════════════════════════════════════════
   BOOKING DETAIL — m8 benchmark components (Phase 2 — tab left columns)
   Invoices (inv-acc accordion + line-items table + fin totals).
   Ported 1:1 from design/booking-detail branch. All scoped under `.bk-detail`.
   ════════════════════════════════════════════════════════════════════════ */
/* ── Invoices: accordion ──────────────────────────────────────────────── */
.bk-detail .inv-acc { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.bk-detail .inv-acc-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: background 0.1s; }
.bk-detail .inv-acc-header:hover { background: var(--canvas); }
.bk-detail .inv-acc-chevron { color: var(--muted-2); flex-shrink: 0; transition: transform 0.2s ease; }
.bk-detail .inv-acc.is-open .inv-acc-chevron { transform: rotate(0deg); }
.bk-detail .inv-acc:not(.is-open) .inv-acc-chevron { transform: rotate(-90deg); }
.bk-detail .inv-acc-id { font-size: var(--text-sm); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.bk-detail .inv-acc-sep { color: var(--muted-2); font-size: var(--text-xs); }
.bk-detail .inv-acc-date { font-size: var(--text-xs); color: var(--muted); }
.bk-detail .inv-acc-spacer { flex: 1; }
.bk-detail .inv-acc-total { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.bk-detail .inv-acc-body { display: none; border-top: 1px solid var(--hairline); }
.bk-detail .inv-acc.is-open .inv-acc-body { display: block; }
/* ── Invoices: line-items table ───────────────────────────────────────── */
.bk-detail .inv-table-wrap { overflow-x: auto; }
.bk-detail .inv-table-wrap table { width: 100%; min-width: 100%; border-collapse: collapse; }
.bk-detail .inv-table-wrap thead tr { background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.bk-detail .inv-table-wrap thead th { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); padding: 10px 0; text-align: left; }
.bk-detail .inv-table-wrap thead th:first-child { padding-left: 18px; }
.bk-detail .inv-table-wrap thead th:last-child { padding-right: 18px; text-align: right; }
.bk-detail .inv-table-wrap thead th.col-num { text-align: right; }
.bk-detail .inv-table-wrap tbody tr { border-bottom: 1px solid var(--hairline-2); }
.bk-detail .inv-table-wrap tbody tr:last-child { border-bottom: none; }
.bk-detail .inv-table-wrap tbody td { padding: 13px 0; font-size: var(--text-sm); color: var(--ink); vertical-align: middle; }
.bk-detail .inv-table-wrap tbody td:first-child { padding-left: 18px; }
.bk-detail .inv-table-wrap tbody td:last-child { padding-right: 18px; text-align: right; }
.bk-detail .inv-table-wrap .li-desc { font-weight: 500; }
.bk-detail .inv-table-wrap .li-qty { color: var(--muted); font-size: var(--text-xs); text-align: right; font-family: var(--font-mono); }
.bk-detail .inv-table-wrap .li-unit { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); text-align: right; }
.bk-detail .inv-table-wrap .li-amount { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; text-align: right; }
.bk-detail .inv-table-wrap .li-remove { text-align: right; }
.bk-detail .inv-table-wrap .li-desc.inv-empty { color: var(--muted); font-weight: 400; text-align: center; padding: 22px 18px; }
.bk-detail .inv-li-remove { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--muted-2); transition: color 0.12s; }
.bk-detail .inv-li-remove:hover { color: var(--cancelled); }
/* ── Invoices: ancillary blocks ───────────────────────────────────────── */
.bk-detail .inv-add-form-wrap { padding: 14px 18px 0; }
/* ── Invoices: stacked summary (inside accordion body) ───────────────── */
.bk-detail .inv-acc-summary { border-top: 1px solid var(--hairline); padding: 12px 18px 14px; background: var(--surface); margin-top: 14px; }
.bk-detail .fin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
.bk-detail .inv-acc-summary .fin-row + .fin-row { border-top: 1px solid var(--hairline-2); }
.bk-detail .fin-lbl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.bk-detail .fin-val { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--muted); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bk-detail .inv-acc-summary .fin-row.semantic .fin-lbl { color: var(--muted); }
.bk-detail .inv-acc-summary .fin-row.semantic .fin-val { font-size: var(--text-md); font-weight: 500; }
.bk-detail .inv-acc-summary .fin-row.semantic .fin-val.paid { color: var(--confirmed); }
.bk-detail .inv-acc-summary .fin-row.semantic .fin-val.outstanding { color: var(--briefing); font-weight: 600; }
.bk-detail .inv-acc-summary .fin-row.total { padding-top: 11px; }
.bk-detail .inv-acc-summary .fin-row.total .fin-lbl { color: var(--ink); }
.bk-detail .inv-acc-summary .fin-row.total .fin-val { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
/* ── Invoices: payment method pills + actions ─────────────────────────── */
.bk-detail .inv-controls { padding: 14px 18px; border-top: 1px solid var(--hairline); }
.bk-detail .inv-controls-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.bk-detail .inv-pm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-detail .inv-pm-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); transition: background 0.12s, border-color 0.12s, color 0.12s; cursor: pointer; }
.bk-detail .inv-pm-pill:hover { background: var(--canvas); }
.bk-detail .inv-pm-pill.is-active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.bk-detail .inv-pm-note { margin-top: 8px; font-size: var(--text-xs); color: var(--briefing); }
.bk-detail .inv-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--hairline); }
/* ── Invoices: grand-total fin-card (WL .fin-card--c2r) ────────────────── */
/* Confirmed-green translucent wash (6% fill / 18% lines) + 3px top rule.
   Semantic rows: .paid = green, .outstanding = amber. Total = large + green. */
.bk-detail .fin-card--c2r {
  --fin-bg: color-mix(in srgb, var(--confirmed) 6%, transparent);
  --fin-border: color-mix(in srgb, var(--confirmed) 18%, transparent);
  background: var(--fin-bg);
  border: 1px solid var(--fin-border);
  border-top: 3px solid var(--confirmed);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column;
}
.bk-detail .fin-card--c2r .fin-row + .fin-row { border-top: 1px solid var(--fin-border); }
.bk-detail .fin-card--c2r .fin-row { padding: 10px 0; }
.bk-detail .fin-card--c2r .fin-row.secondary .fin-lbl { color: var(--muted-2); }
.bk-detail .fin-card--c2r .fin-row.secondary .fin-val { color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.bk-detail .fin-card--c2r .fin-row.semantic .fin-lbl { color: var(--muted); }
.bk-detail .fin-card--c2r .fin-row.semantic .fin-val { font-size: var(--text-md); font-weight: 500; }
.bk-detail .fin-card--c2r .fin-val.paid { color: var(--confirmed); }
.bk-detail .fin-card--c2r .fin-val.outstanding { color: var(--briefing); font-weight: 600; }
.bk-detail .fin-card--c2r .fin-row.total { border-top: 1px solid var(--fin-border); margin-top: 4px; padding-top: 14px; }
.bk-detail .fin-card--c2r .fin-row.total .fin-lbl { color: var(--ink); }
.bk-detail .fin-card--c2r .fin-row.total .fin-val { color: var(--confirmed); font-size: var(--text-2xl); font-weight: 700; }
/* ── Admin note — ONE consistent treatment across booking surfaces
   (detail Overview + slide-over drawer). Sky hue via the brand accent
   family (not a status color); typography from the detail page. ─────── */
.bk-admin-note {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.bk-admin-note__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.bk-admin-note__body {
  font-size: var(--text-sm);
  line-height: 1.625;
  color: var(--ink);
}
/* ── Booking quick-look drawer body — rendered inside the shared
   shared/patterns/_side_panel shell (#58). These rules style ONLY the body
   content (stat row + price breakdown); the panel chrome (width, scrim,
   slide animation, close X) comes from the shared .side-panel / .side-drawer
   CSS. Scoped under .side-panel__body so they never leak onto other
   surfaces. ─────────────────────────────────────────────────────────────── */
.side-panel__body .bk-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.side-panel__body .bk-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: var(--text-sm);
}
.side-panel__body .bk-price-row .v { font-variant-numeric: tabular-nums; }
/* Single rule per separation — never two stacked hairlines (WL panel). */
.side-panel__body .bk-price-row--rule {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 8px;
}
/* Branding settings — asset previews.
   The invoice logo is a light-on-dark mark shown on the invoice PDF's ink
   header tile, so preview it against a matching dark swatch (var(--ink)) rather
   than the white settings card, where a white logo would be invisible. */
.branding-logo-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--ink);
}
/* ============================================================
   account/booking_detail.css — Booking detail Overview redesign.

   Page-scoped components for the redesigned Overview tab: the sky
   "trip card" hero (header + layered waveband + vertical stay+dive
   timeline), the 2×2 booking summary, the paid-in-full / due balance
   card, the access & sharing toggles and the internal note.

   Ported 1:1 from the finalized Design/booking-detail prototype
   (booking_detail_components.css + booking_detail_timeline.css) but
   re-expressed entirely on DM's semantic tokens (var(--*)) — no raw
   Tailwind palette, no dark: variants. All numbers/money are Geist
   Mono (var(--font-mono)); headings are Inter (var(--font-display)).

   Scoped under .bk-detail so it never bleeds into other surfaces.
   ============================================================ */
/* Card body copy sits at the design-system 16px base. */
.bk-detail .card-body { font-size: var(--text-md); }
/* ── Trip card (dive schedule, editorial sky) ────────────── */
/* Special hero card: no card-head title — the sky date band is its title. */
.bk-detail .bd2-trip { position: relative; }
.bk-detail .bd2-trip-head { position: relative; background: var(--sky-50); padding: 28px 24px 18px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* NOTE: .diver / .bedart load external SVGs via <img>, so CSS `color`/`fill`
   can't reach them — the colour is baked into the .svg files themselves
   (app/assets/images/diveos/illustrations/{diver,bed}.svg, currently #CFF0FF).
   Edit the SVG to recolour. */
.bk-detail .bd2-trip-head .diver { position: absolute; top: -10px; right: 22px; width: 150px; height: 130px; transform-origin: top right; pointer-events: none; z-index: 1; }
.bk-detail .bd2-trip-head .bedart { position: absolute; width: 110px; height: 105px; transform-origin: top right; pointer-events: none; z-index: 1; }
.bk-detail .bd2-art { display: block; width: 100%; height: 100%; }
/* Hero date title = DM Display/H1 (Inter 28/600, -0.025em). */
.bk-detail .bd2-trip-title { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; color: var(--ink); line-height: 1.2; margin: 0; }
/* Hero subtitle = DM Body/Sub-Copy (Inter 13.5/Text-Muted). */
.bk-detail .bd2-trip-sub { position: relative; z-index: 2; font-size: var(--text-sm); color: var(--muted); margin-top: 8px; }
/* Layered sky waveband — static (locked: wavelength 72 / amplitude 16 /
   line-spacing 10 → height 73px). SVG is fully percent-encoded (no raw
   quotes) so it's valid CSS and never leaks into markup. Sky colours mirror
   tokens.css --sky-200…600 + --sky-100 sea fill. */
.bk-detail .bd2-trip-waves { height: 73px; background-color: var(--sky-50); background-repeat: repeat-x; background-position: center top; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2773%27%20viewBox%3D%270%200%2072%2073%27%3E%3Cpath%20d%3D%27M0%2051%20q18.0%20-16%2036.0%200%20t36.0%200%20V73%20H0%20Z%27%20fill%3D%27%23E0F2FE%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M0%2011%20q18.0%20-16%2036.0%200%20t36.0%200%27%20stroke%3D%27%23BAE6FD%27%2F%3E%3Cpath%20d%3D%27M0%2021%20q18.0%20-16%2036.0%200%20t36.0%200%27%20stroke%3D%27%237DD3FC%27%2F%3E%3Cpath%20d%3D%27M0%2031%20q18.0%20-16%2036.0%200%20t36.0%200%27%20stroke%3D%27%2338BDF8%27%2F%3E%3Cpath%20d%3D%27M0%2041%20q18.0%20-16%2036.0%200%20t36.0%200%27%20stroke%3D%27%230EA5E9%27%2F%3E%3Cpath%20d%3D%27M0%2051%20q18.0%20-16%2036.0%200%20t36.0%200%27%20stroke%3D%27%230284C7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.bk-detail .bd2-trip-body { background: var(--sky-100); padding: 18px 18px 32px; display: flex; flex-direction: column; gap: 14px; }
/* lodging room line under the summary (only with a stay) */
/* Lodging line = DM Body/Default (Inter 14) on Text/Secondary. */
.bk-detail .stay-headroom { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--text-sm); color: var(--text-secondary); }
.bk-detail .stay-headroom .i { color: var(--accent); display: inline-flex; }
.bk-detail .stay-headroom b { font-weight: 600; color: var(--ink); }
/* empty state when no dives scheduled */
/* Empty state = DM Body/SM (Inter 13). */
.bk-detail .bd2-trip-empty { font-size: var(--text-sm); color: var(--muted-2); padding: 6px 2px; }
/* ── Vertical stay + dive timeline (inside the trip card) ──────
   Inter-row spacing lives on the ROW (padding-bottom), not the card
   margin, so each grid track height == the card height. That lets us
   vertically centre the node/date against the card precisely. The
   connector bar bridges the gap by extending --tl-gap into the next row. */
.bk-detail .stay-tl { --tl-gap: 14px; padding: 2px 0 0; }
.bk-detail .stay-tl-row { display: grid; grid-template-columns: 48px 44px minmax(0, 1fr); -moz-column-gap: 14px; column-gap: 14px; }
.bk-detail .stay-tl-row:not(:last-child) { padding-bottom: var(--tl-gap); }
.bk-detail .stay-tl-row .g { text-align: right; line-height: 1; }
/* Date number = DM display stat scale (Inter 22/600, -0.02em — matches .tpc-d / .guest-hero-stat-val). */
.bk-detail .stay-tl-row .g .d { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
/* Month = DM Label/Stat-Card scale, in mono (10/600, 0.12em UPPER, Text/Muted). */
.bk-detail .stay-tl-row .g .m { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
/* Weekday = DM Mono/Count (11, tabular). */
.bk-detail .stay-tl-row .g .dow { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; }
.bk-detail .stay-tl-row .rail { position: relative; display: flex; justify-content: center; }
.bk-detail .stay-tl-row .rail::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: var(--hairline); top: 0; bottom: calc(-1 * var(--tl-gap)); }
.bk-detail .stay-tl-row:last-child .rail::before { bottom: 0; }
.bk-detail .stay-tl-row:only-child .rail::before { display: none; }
.bk-detail .stay-tl-row .node { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--hairline-strong); display: grid; place-items: center; color: var(--muted); }
.bk-detail .stay-tl-row .node svg { display: block; }
/* Node alignment — BASE = TOP: node + date flush with the card's top edge. */
.bk-detail .stay-tl-row .rail { align-items: flex-start; }
.bk-detail .stay-tl-row .g { padding-top: 13px; }
.bk-detail .stay-tl-row:first-child .rail::before { top: 20px; }
.bk-detail .stay-tl-row:last-child .rail::before { top: 0; height: 20px; bottom: auto; }
/* CENTER: node centred against the card; date gutter anchored to the
   node's TOP edge (height-independent: node half-height = 20px). */
.bk-detail .stay-tl.tl-center .stay-tl-row .rail { align-items: center; }
.bk-detail .stay-tl.tl-center .stay-tl-row .g { align-self: center; padding-top: 0; transform: translateY(calc(50% - 20px)); }
.bk-detail .stay-tl.tl-center .stay-tl-row:first-child .rail::before { top: 50%; }
.bk-detail .stay-tl.tl-center .stay-tl-row:last-child .rail::before { top: 0; height: 50%; bottom: auto; }
/* Single-line card (Check-out): centre its node, cap the connector at node centre. */
.bk-detail .stay-tl .stay-tl-row.single .rail { align-items: center; }
.bk-detail .stay-tl .stay-tl-row.single .g { align-self: center; padding-top: 0; transform: translateY(calc(50% - 20px)); }
.bk-detail .stay-tl .stay-tl-row.single:last-child .rail::before { top: 0; height: 50%; bottom: auto; }
.bk-detail .stay-tl .stay-tl-row.single:first-child .rail::before { top: 50%; height: auto; bottom: calc(-1 * var(--tl-gap)); }
.bk-detail .stay-tl-row.dive .node { color: var(--accent); border-color: var(--accent-border); }
.bk-detail .stay-tl-row.lodge .node { color: var(--accent); border-color: var(--accent-border); background: var(--sky-50); }
/* Mini card = DM card shell (Surface/Base, 1px Border/Hairline, radius-lg). No bespoke
   shadow — DM stat-cards rest on the border alone. */
.bk-detail .stay-tl-row .cardc { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 13px 18px; }
.bk-detail .stay-tl-row.lodge .cardc { background: var(--sky-50); border-color: var(--accent-border); }
/* Eyebrow = DM Label/Stat-Card scale in mono (11/600, 0.12em UPPER, Text/Muted). */
.bk-detail .stay-tl-row .ey { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Card title = DM tab-stat number role (Inter 15/600, -0.01em — the next display
   step below Panel-Title for in-card titling). */
.bk-detail .stay-tl-row .ti { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); margin-top: 5px; }
/* Detail = DM Mono/Numeric scale (Geist Mono 12, Text/Muted-2). */
.bk-detail .stay-tl-row .de { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); margin-top: 5px; }
/* sky-coloured timeline — connector / node ring / card border */
.bk-detail .stay-tl.sky .stay-tl-row .rail::before { background: var(--sky-300); }
/* Opaque node interior + a halo that masks the connector line behind the node
   (clean "break in the line"). The halo MUST match the surface the timeline
   sits on: sky-100 inside the Overview trip body (default), or the card surface
   when placed on a plain card (.on-surface, e.g. the Scheduled Dives tab). */
.bk-detail .stay-tl.sky .stay-tl-row .node { border-color: var(--sky-300); background: var(--sky-50); box-shadow: 0 0 0 3px var(--tl-halo, var(--sky-100)); z-index: 2; }
.bk-detail .stay-tl.on-surface { --tl-halo: var(--surface); }
.bk-detail .stay-tl.sky .stay-tl-row .cardc { border-color: var(--sky-400); }
.bk-detail .stay-tl.sky .stay-tl-row.lodge .node { border-color: var(--sky-300); }
.bk-detail .stay-tl.sky .stay-tl-row.lodge .cardc { border-color: var(--sky-400); }
.bk-detail .stay-tl.sky .stay-tl-row .g .dow { color: var(--sky-500); }
/* Stateful timeline (Scheduled Dives only — Overview omits .stateful):
   past = logged (green node + check + dimmed card), today = live (accent ring),
   future = default sky. */
.bk-detail .stay-tl.stateful .stay-tl-row.is-past .node { border-width: 2px; border-color: var(--confirmed); background: color-mix(in srgb, var(--confirmed) 12%, var(--surface)); color: var(--confirmed); }
.bk-detail .stay-tl.stateful .stay-tl-row.is-past .cardc { border-color: var(--confirmed-border); background: color-mix(in srgb, var(--confirmed) 4%, var(--surface)); }
.bk-detail .stay-tl.stateful .stay-tl-row.is-past .g .d { color: var(--muted-2); }
/* accent-light (sky-100) is OPAQUE — accent-soft was 8% alpha, which let the
   connector line show straight through the node. Opaque so the node masks it. */
.bk-detail .stay-tl.stateful .stay-tl-row.is-today .node { border-width: 2px; border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.bk-detail .stay-tl.stateful .stay-tl-row.is-today .cardc { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
.bk-detail .stay-tl.stateful .stay-tl-row.is-today .g .dow { color: var(--accent); font-weight: 600; }
/* Stateful connector — split into an incoming half (::before, above the node)
   and an outgoing half (::after, below the node), divided at the node centre so
   the (opaque) node masks the junction and each LEG takes its SOURCE node's
   state colour. Scoped to .stateful so the Overview trip card is untouched.
   A leg from a PAST node is green: the past row's outgoing + the next row's
   incoming (marked .prev-past) both go green; everything else stays sky. */
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row .rail::before,
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row .rail::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: var(--sky-300); z-index: 0;
}
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row .rail::before { top: 0; height: auto; bottom: 50%; }
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row .rail::after  { top: 50%; height: auto; bottom: calc(-1 * var(--tl-gap)); }
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row:first-child .rail::before { display: none; }
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row:last-child .rail::after { display: none; }
/* Past leg — desaturated sage: confirmed green cut with gray (not white) so it reads
   muted, not the neon emerald of the raw green ramp. More present than the node fill. */
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row.is-past .rail::after { background: color-mix(in srgb, var(--green-700) 38%, var(--gray-300)); }
.bk-detail .stay-tl.stateful.tl-center .stay-tl-row.prev-past .rail::before { background: color-mix(in srgb, var(--green-700) 38%, var(--gray-300)); }
/* Scheduled Dives card content — TIME is the hero (mono, large), site the
   subtitle, dive # the eyebrow, guide/gas a muted meta line. */
.bk-detail .stay-tl-row .cardc .sched-time { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.05; margin-top: 3px; }
.bk-detail .stay-tl-row .cardc .ti.site { font-size: var(--text-sm); margin-top: 3px; }
/* Guide/gas trails the site on ONE line — muted mono, middot-separated, so the
   site stays prominent and we don't burn a whole row on the guide. */
.bk-detail .stay-tl-row .cardc .ti.site .site-guide { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--muted); letter-spacing: 0; vertical-align: baseline; }
.bk-detail .stay-tl-row .cardc .ti.site .site-guide::before { content: "·"; margin-right: 2px; color: var(--muted-2); }
.bk-detail .stay-tl-row .cardc .ti.site .site-guide svg { color: var(--muted-2); flex-shrink: 0; }
/* Card-as-link: no underline, inherit the component's text colours, subtle
   sky hover border to signal it opens the trip. */
.bk-detail .stay-tl-row a.cardc { text-decoration: none; transition: border-color 0.12s ease; }
.bk-detail .stay-tl-row a.cardc:hover { border-color: var(--sky-600); }
/* ── 2×2 booking summary ─────────────────────────────────── */
.bk-detail .bd2-sum { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-top: 1px solid var(--hairline-2); }
.bk-detail .bd2-sum .q { padding: 18px 20px; border-top: 1px solid var(--hairline-2); border-left: 1px solid var(--hairline-2); display: flex; align-items: center; gap: 13px; }
.bk-detail .bd2-sum .q:nth-child(-n+2) { border-top: 0; }
.bk-detail .bd2-sum .q:nth-child(odd) { border-left: 0; }
.bk-detail .bd2-sum .tile { width: 40px; height: 40px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
/* Summary label = DM Label/Stat-Card (10/600, 0.12em UPPER, Text/Muted). */
.bk-detail .bd2-sum .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Summary value = DM Mono/Stat-Value (Geist Mono 22/600, 0 tabular, Text/Primary). */
.bk-detail .bd2-sum .v { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xl); letter-spacing: 0; color: var(--ink); margin-top: 3px; line-height: 1.05; font-feature-settings: "tnum"; }
/* Non-numeric value = DM tab-stat number (Inter 15/600, -0.01em). */
.bk-detail .bd2-sum .v.sm { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
/* ── Balance card (paid-in-full / due) ───────────────────── */
/* Percentage chip = DM Caption (12) emphasized; status colour from semantic tokens. */
.bk-detail .bd2-bal-pct { font-size: var(--text-xs); font-weight: 600; color: var(--confirmed); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bk-detail .bd2-bal-pct.partial { color: var(--accent); }
/* Balance hero figure = DM Mono/KPI-Value (Geist Mono 28, -0.02em, tabular). cents step
   down to DM Mono/Stat-Value (22). Label = DM Body/Default (14, Text/Muted). */
.bk-detail .bd2-bal-amt { line-height: 1; font-family: var(--font-mono); }
.bk-detail .bd2-bal-amt .d { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.02em; color: var(--ink); font-feature-settings: "tnum"; }
.bk-detail .bd2-bal-amt .cents { color: var(--muted-2); font-size: var(--text-xl); }
.bk-detail .bd2-bal-amt .lbl { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--muted); margin-left: 8px; }
/* Paid in full: the whole amount goes green (the bar stays green too) to
   reinforce the settled state. */
.bk-detail .bd2-bal-amt.paid .d,
.bk-detail .bd2-bal-amt.paid .cents,
.bk-detail .bd2-bal-amt.paid .lbl { color: var(--confirmed); }
/* Paid CTA is a quiet text link (not a button) — there's nothing to collect. */
.bk-detail .bd2-bal-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--accent); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; }
.bk-detail .bd2-bal-link:hover { text-decoration: underline; }
/* Progress bar = DM .dv-progress treatment (track Border/Hairline, radius-pill). */
.bk-detail .bd2-bal-bar { height: 8px; border-radius: var(--radius-pill); background: var(--hairline); margin-top: 18px; overflow: hidden; }
.bk-detail .bd2-bal-bar .fill { height: 100%; border-radius: var(--radius-pill); background: var(--confirmed); }
.bk-detail .bd2-bal-bar .fill.partial { background: var(--accent); }
/* Paid / of row = DM Body/Sub-Copy (13.5). */
.bk-detail .bd2-bal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: var(--text-sm); }
.bk-detail .bd2-bal-row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--confirmed); white-space: nowrap; }
.bk-detail .bd2-bal-row .of { color: var(--muted); }
.bk-detail .bd2-bal-row .of .mono { font-family: var(--font-mono); }
.bk-detail .bd2-bal-cta { margin-top: 16px; }
.bk-detail .bd2-bal-cta .dv-btn { width: 100%; }
/* Empty figure = DM display stat scale (Inter 22/600). */
.bk-detail .bd2-bal-empty { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--muted-2); margin-top: 14px; }
/* ── Access toggles ──────────────────────────────────────── */
.bk-detail .bd2-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hairline-2); }
.bk-detail .bd2-acc-row:first-of-type { border-top: 0; }
/* Toggle title = DM Body/Medium (14/500, Text/Primary). Sub = DM Caption (12, Text/Muted). */
.bk-detail .bd2-acc-row .t { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.bk-detail .bd2-acc-row .s { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
/* ── Header: inline Certified badge ──────────────────────── */
.bk-detail-cert { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--accent-border); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; color: var(--accent); background: var(--accent-softer); white-space: nowrap; }
.bk-detail-cert svg { display: block; }
/* ── Booked-dive card (Step 1) ───────────────────────────── */
/* The dive identity is the title; qty rides alongside it. Schedule lines
   (site · time) are additive enrichment beneath the title. */
.bk-detail .stay-tl-row .cardc .ti .qty { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); color: var(--muted-2); margin-left: 6px; letter-spacing: 0; }
/* Scheduled enrichment row — attributes grouped with 8px between each.
   Each .de-attr spans one attribute (icon + label); 4px within, 8px between. */
.bk-detail .stay-tl-row .de.sched { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--accent); }
.bk-detail .stay-tl-row .de.sched + .de.sched { margin-top: 3px; }
.bk-detail .stay-tl-row .de.sched .de-attr { display: inline-flex; align-items: center; gap: 4px; }
.bk-detail .stay-tl-row .de.sched svg { display: block; flex-shrink: 0; }
/* Not-scheduled state — quieter still (Text/Muted-2, no icon). */
/* "Not scheduled yet" reads as a quiet dashed status tag (clock + label). */
.bk-detail .stay-tl-row .de.unsched { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-style: normal; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-pill); padding: 3px 10px; }
.bk-detail .stay-tl-row .de.unsched svg { display: block; flex-shrink: 0; }
/* ── Waivers & Documents (WL "Waiver card") ──────────────── */
/* button_to wraps the link in a <form class="inline">;
   `display: contents` removes the form from the layout box tree so the
   <button> becomes a direct grid child of .waiver-badges and sits inline. */
.bk-detail .waiver-badges .inline { display: contents; }
.bk-detail .waiver-send-link svg { display: block; }
/* ── Body 2-col grid (tab panels + shared rail) ──────────────
   Desktop: fluid main + fixed 336px rail. Collapses to a single
   column at the 880px breakpoint (timeline first, then the rail's
   Balance / Booking summary / Access & sharing cards). */
.bk-detail-grid {
  display: grid;
  grid-template-columns: 1fr 336px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 16px;
  align-items: start;
}
/* ── Responsive: narrow pane (≤880px) ────────────────────────
   Body collapses to one column (timeline then rail); tab nav scrolls; the
   header stacks. CONTAINER query, not viewport: the page sits in the
   .diveos-main pane (viewport − 240px sidebar), so it must react to pane
   width. At a ~1024px window the pane is only ~784px — the 4-button action
   row crammed against the title — yet a viewport `max-width:880` never fired. */
@container (max-width: 880px) {
  .bk-detail-grid { grid-template-columns: 1fr; }

  /* Header stacks: identity block on top, actions wrap below (in flow — the
     FIXED phone bar stays a viewport ≤768 concern so it never spans under the
     sidebar). */
  .dv-page-band .bk-hero-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .bk-hero-actions { flex-wrap: wrap; }
  .bk-detail .bk-contact-line { flex-wrap: wrap; }

  .bk-detail.bk-tabnav .page-tabs,
  .bk-detail .bk-tabnav .page-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bk-detail.bk-tabnav .page-tabs::-webkit-scrollbar { display: none; }
  .bk-detail.bk-tabnav .page-tab { flex-shrink: 0; white-space: nowrap; }
}
/* (The tab-nav 72px-top-gap fix now lives generically on `nav.dv-page-band` in
   components/header_band.css — it covers this page's .bk-tabnav too.) */
/* ── Sticky action bar (≤768px — phones + tablet portrait) ────
   The 4 actions leave the header and pin to the bottom of the viewport, thumb-
   reachable while scrolling the long detail. "Send waiver" (primary) fills the
   row; Edit/Share collapse to icon buttons; Cancel stays a compact danger
   button. Mirrors the run/wizard/sheet sticky-footer pattern (safe-area aware).
   >768px keeps the desktop inline row. */
@media (max-width: 768px) {
  /* Header keeps only the identity block; actions move to the bar. */
  .dv-page-band .bk-hero-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .bk-detail .bk-contact-line { flex-wrap: wrap; }

  .bk-hero-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -6px 16px -10px rgba(2, 6, 23, 0.18);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* Drop the removable labels → Edit/Share icon-only, Cancel keeps "Cancel". */
  .bk-hero-actions .bk-act-label { display: none; }
  /* Every button in the bar centres its content (the dv-btn default is
     flex-start, which left-aligns the icon in a square button and the label in
     the wide primary). */
  .bk-hero-actions .dv-btn { justify-content: center; }
  /* Edit + Share: square icon buttons — 36×36 to match the button height. */
  .bk-hero-actions .dv-btn--secondary {
    flex: 0 0 auto;
    width: 36px;
    padding-left: 0;
    padding-right: 0;
  }
  /* Cancel (button_to → .inline form): compact danger, natural width. */
  .bk-hero-actions .inline:not(.bk-primary-action) { flex: 0 0 auto; display: flex; }
  /* Send waiver (primary form): fills the remaining width. */
  .bk-hero-actions .bk-primary-action { flex: 1 1 auto; display: flex; }
  .bk-hero-actions .bk-primary-action .dv-btn { width: 100%; }

  /* Clear the fixed bar so the last content isn't hidden behind it. Scope to the
     content <main> only — `.bk-detail` is ALSO a shared scoping class on the
     contact line + tab nav, so a bare `.bk-detail` padding-bottom would balloon
     those (the header gap bug). */
  main.bk-detail { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* ─── Status dot strip ──────────────────────────────────────────────── */
/* Small row of colored dots inside each day card, one per trip.
   Color maps to the trip's status_presentation key. */
.dv-dot-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}
.dv-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dv-status-dot[data-status-key="confirmed"] {
  background: var(--status-confirmed-bg);
  border: 1.5px solid var(--status-confirmed-border);
}
.dv-status-dot[data-status-key="briefing"] {
  background: var(--status-briefing-bg);
  border: 1.5px solid var(--status-briefing-border);
}
.dv-status-dot[data-status-key="in_water"] {
  background: var(--status-in-water-bg);
  border: 1.5px solid var(--status-in-water-border);
}
.dv-status-dot[data-status-key="returning"] {
  background: var(--status-returning-bg);
  border: 1.5px solid var(--status-returning-border);
}
.dv-status-dot[data-status-key="completed"] {
  background: var(--status-completed-bg);
  border: 1.5px solid var(--status-completed-border);
}
.dv-status-dot[data-status-key="cancelled"] {
  background: var(--status-cancelled-bg);
  border: 1.5px solid var(--status-cancelled-border);
}
.dv-status-dot[data-status-key="pending"] {
  background: var(--status-pending-bg);
  border: 1.5px solid var(--status-pending-border);
}
/* ─── Stops timeline ─────────────────────────────────────────────────── */
.dv-timeline {
  list-style: none;
  margin: 0;
  padding: 0 16px;
}
.dv-timeline__node {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 48px;
}
.dv-timeline__marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  padding-top: 2px;
}
.dv-timeline__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent-border);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}
/* Board node — stop zero of the itinerary (departure). Muted, not
   accent: it's context, not a logged dive. */
.dv-timeline__number--board {
  background: var(--surface-alt);
  border-color: var(--hairline-strong);
  color: var(--muted);
}
.dv-timeline__line {
  width: 1.5px;
  flex: 1;
  min-height: 16px;
  background: var(--hairline);
  margin-top: 4px;
}
.dv-timeline__content {
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
}
.dv-timeline__node--last .dv-timeline__content {
  padding-bottom: 8px;
}
.dv-timeline__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}
.dv-timeline__link:hover .dv-timeline__title {
  color: var(--accent);
}
.dv-timeline__link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}
.dv-timeline__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  transition: color 0.12s;
}
.dv-timeline__meta {
  font-size: var(--text-xs);
  color: var(--muted);
}
/* ─── Divers roster ──────────────────────────────────────────────────── */
.dv-roster {
  padding: 0 16px;
}
.dv-roster-group {
  margin-bottom: 12px;
}
.dv-roster-group__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.dv-roster-group__label {
  flex: 1;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dv-roster-group__count {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
/* Over the guide's max_diver_ratio — soft warning by design (D2):
   trust the instructor; warn, never block. */
.dv-roster-group__count--over {
  color: var(--briefing);
}
.dv-roster-group__placeholder {
  margin: 0;
  padding: 8px 0;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--muted-2);
}
.dv-roster-row--draggable {
  cursor: grab;
}
.dv-roster-row--draggable:active {
  cursor: grabbing;
}
.dv-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.dv-roster-row:last-child {
  border-bottom: none;
}
.dv-roster-row__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dv-roster-row__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-roster-row__cert {
  font-size: var(--text-xs);
  color: var(--muted);
}
.dv-roster-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dv-roster-row__checked-in {
  color: var(--confirmed);
  display: flex;
}
.dv-roster-guide-form {
  margin: 0;
}
.dv-roster-guide-select {
  height: 28px;
  padding: 0 8px;
  font-size: var(--text-xs);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  cursor: pointer;
}
.dv-roster-guide-select:hover {
  border-color: var(--hairline-strong);
}
.dv-roster-guide-select:focus-visible {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
/* 44px touch target on coarse pointers (DESIGN.md kept deviation —
   the ops lead runs this on an iPad at the dock). */
@media (pointer: coarse) {
  .dv-roster-guide-select {
    min-height: 44px;
  }
}
/* ═══ Gear-return board · overall progress (PR-E1, prototype return.css) ═══ */
.dv-return-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}
.dv-return-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--confirmed);
  transition: width .28s ease;
}
/* ═══ Return tab · full-width ═══
   End-of-trip gear check-in is not planning, so the Return tab drops the
   Plan/Roster right rail and the board spans the full width (matching the
   prototype). Keyed on the Return panel being the visible one (the tab-panel
   controller toggles [hidden]); :has re-evaluates live on tab switch. Only
   engages at lg+ where the two-column rail exists. */
@media (min-width: 1024px) {
  .trip-body:has([data-tab="return"][data-tab-panel-target="panel"]:not([hidden])) {
    grid-template-columns: 1fr;
  }
  .trip-body:has([data-tab="return"][data-tab-panel-target="panel"]:not([hidden])) .trip-rail {
    display: none;
  }
}
/* ═══ Plan rail · trip-equipment loadout card (PR-B1, prototype .pt-equip) ═══ */
.dv-equip { display: flex; flex-direction: column; gap: 12px; }
.dv-equip__row { display: flex; align-items: center; gap: 10px; }
.dv-equip__ic {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--muted);
  flex-shrink: 0;
}
.dv-equip__txt { flex: 1; min-width: 0; }
.dv-equip__name { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.dv-equip__sub { font-size: var(--text-xs); color: var(--muted); }
/* Checklist toggle — a check square at the row end (checked = loaded), same
   visual language as the popover's .dv-optcheck. Replaces the badge-as-button
   (pressing "PENDING" to load read as inverted). */
.dv-equip__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--hairline-strong); border-radius: 6px;
  background: var(--surface); color: var(--surface);
  cursor: pointer;
  transition: background .1s, border-color .1s, box-shadow .1s;
}
.dv-equip__check .lucide { opacity: 0; transition: opacity .1s; }
.dv-equip__check:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.dv-equip__check:hover .lucide { opacity: .45; color: var(--accent); }
.dv-equip__check.is-on { background: var(--confirmed); border-color: var(--confirmed); }
.dv-equip__check.is-on .lucide { opacity: 1; color: var(--surface); }
.dv-equip__check.is-on:hover { box-shadow: 0 0 0 3px var(--confirmed-bg); }
.dv-equip__check--static { cursor: default; }
.dv-equip__check--static:hover { border-color: var(--hairline-strong); box-shadow: none; }
.dv-equip__check--static:hover .lucide { opacity: 0; }
.dv-equip__check--static.is-on:hover .lucide { opacity: 1; color: var(--surface); }
/* Hybrid link: identifier link-out on a linked row's detail line. */
.dv-equip__sub a { color: var(--muted); text-decoration: none; }
.dv-equip__sub a:hover { color: var(--accent); }
/* Hover ✕ remove — same affordance as the roster row-list. */
.dv-equip__row form { display: contents; }
.dv-equip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 0; background: none; border-radius: var(--radius-pill);
  color: var(--muted-2); cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.dv-equip__row:hover .dv-equip__x,
.dv-equip__row:focus-within .dv-equip__x { opacity: 1; }
.dv-equip__x:hover { background: var(--cancelled-bg); color: var(--cancelled); }
/* Add-item foot: ghost trigger anchoring the .dv-pop picker. */
.dv-equip__foot { margin-top: 2px; }
.dv-equip__custom {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-top: 1px solid var(--hairline);
}
.dv-equip__custom input {
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  background: var(--surface); padding: 7px 10px;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.dv-equip__custom input::-moz-placeholder { color: var(--muted-2); }
.dv-equip__custom input::placeholder { color: var(--muted-2); }
.dv-equip__custom-actions { display: flex; justify-content: flex-end; }
/* ═══ Gear-return board · per-row status menu (PR-E2) ═══
   The status badge doubles as a <details> menu of the row's LEGAL moves.
   No JS: native details; the panel floats over the row. */
.dv-tag-menu { position: relative; display: inline-flex; }
.dv-tag-menu__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dv-tag-menu__summary::-webkit-details-marker { display: none; }
.dv-tag-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 150px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.08));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dv-tag-menu__opt,
.dv-tag-menu__panel form { display: flex; width: 100%; }
.dv-tag-menu__opt {
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.dv-tag-menu__opt:hover { background: var(--surface-alt); }
/* ═══ Generic slim progress bar (PR-B2 — Guest-fitting rail card) ═══ */
.dv-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}
.dv-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .28s ease;
}
/* ═══ Finalize pre-flight (PR-B3, prototype .pt-finalize/.pt-check) ═══ */
.dv-preflight { max-width: 560px; margin: 8px auto 0; }
.dv-preflight__rows { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.dv-preflight__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dv-preflight__row.is-warn { border-color: var(--pending-border); background: var(--pending-bg); }
.dv-preflight__ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.dv-preflight__row.is-warn .dv-preflight__ic { background: var(--surface); color: var(--pending); }
.dv-preflight__txt { flex: 1; min-width: 0; }
.dv-preflight__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dv-preflight__foot .note { flex: 1; min-width: 200px; font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
/* Tab-bar divider before Run (v4 prototype .pt-tab-div). */
.dv-tab__div {
  width: 1px;
  align-self: center;
  height: 18px;
  background: var(--hairline-strong);
  margin: 0 6px;
}
/* ─────────────────────────────────────────────────────────────────────
   Team (dive_instructors) — staff drawer, page-scoped primitives.

   The staff drawer (app/views/account/dive_instructors/_drawer.html.erb +
   drawer/*_tab.html.erb) renders inside the layout's `side_drawer`
   turbo-frame via the shared `shared/patterns/_side_panel` shell. The tab
   bodies are token-clean (semantic utilities only); the one primitive they
   need that the shared layer does NOT provide is the in-body section heading.

   Historically the drawer carried a page-local `.dv-field-title` that
   shadowed the canonical `.dv-field-title` in tokens.css. That collision is
   resolved by NOT redefining any `dv-*` name here: the tabs use the
   non-colliding `.field-section-title`, defined once below. It mirrors the
   canonical `.section-label` / `.side-panel__eyebrow` treatment (patterns.css)
   so drawer section heads read identically to the rest of the design system.
   ───────────────────────────────────────────────────────────────────── */
/* ── Drawer section heading ───────────────────────────────────────────
   Small uppercase label that separates field groups inside a drawer tab
   (Person / Availability / Certifications / Add certification / Recent
   assignments / Team notes). Matches .section-label, but the first heading
   in a tab body sits flush to the top (the side-panel body already supplies
   its own top padding). */
.field-section-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 20px 0 8px;
}
.side-panel__body > .field-section-title:first-child,
.field-section-title:first-child {
  margin-top: 0;
}
/* ── Overview summary — polished detail header + key/value rows ────────
   The Overview tab leads with a read-only SUMMARY (avatar + name + role +
   availability pill, then grouped key/value rows) before exposing the edit
   form. These primitives mirror the booking drawer (.bk-drawer-head /
   .bk-price-row) and divers/show (.dl-grid / .dl-row-item) so the staff
   drawer reads identically to the rest of the design system. Page-scoped to
   the staff drawer; named `tm-*` to avoid colliding with the `.bk-detail`-
   scoped card primitives in account/bookings.css. */
/* Identity header: avatar + name/role stack + availability pill */
.tm-summary-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.tm-summary-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--accent), var(--sky-900));
}
.tm-summary-id { min-width: 0; flex: 1; }
.tm-summary-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.tm-summary-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
/* Key/value rows — single hairline per separation (WL panel rule) */
.tm-dl { display: grid; gap: 0; }
.tm-dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
}
.tm-dl-row:last-child { border-bottom: none; }
.tm-dl-row dt {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-dl-row dd {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
  margin: 0;
  min-width: 0;
}
/* Collapsible edit form — keeps edit affordances without the tab reading
   as a bare form. The <summary> is the trigger; native marker is hidden. */
.tm-edit { margin-top: 20px; }
.tm-edit > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  padding: 6px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tm-edit > summary::-webkit-details-marker { display: none; }
.tm-edit > summary:hover { color: var(--accent-strong); }
.tm-edit > summary .tm-edit-chevron { transition: transform 0.15s ease; }
.tm-edit[open] > summary .tm-edit-chevron { transform: rotate(180deg); }
.tm-edit[open] > summary { margin-bottom: 4px; }
/* Leads — Side panel drawer body (#194).
   The drawer chrome (header eyebrow/title/status, sticky action bar, slide
   animation, close X) is inherited from the shared .side-panel / .side-drawer
   substrate. These rules only style the lead-specific body: the contact-first
   channel row, dense fact list, and notes block — matching
   Design/mockups/194-leads-modal/mockup-drawer.html. Tokens only. */
/* Identity chip row (avatar + email/phone). */
.lead-drawer__ident {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.lead-drawer__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-md);
  flex: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.lead-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* 3-up tap-to-act channel row. */
.lead-drawer__channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 18px;
}
.lead-drawer__chan {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.lead-drawer__chan span {
  font-size: var(--text-xs);
  font-weight: 600;
}
.lead-drawer__chan small {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.2;
  max-width: 100%;
}
.lead-drawer__chan:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.lead-drawer__chan.is-preferred {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.lead-drawer__chan.is-empty {
  color: var(--muted-2);
  cursor: default;
}
.lead-drawer__chan.is-empty:hover {
  border-color: var(--border);
  background: transparent;
  color: var(--muted-2);
}
/* Dense fact list — spacing only; the rows are the .dv-desclist component. */
.lead-drawer__facts {
  margin: 0 0 18px;
}
/* Notes block. */
.lead-drawer__notes {
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: 10px;
}
.lead-drawer__notes .dv-eyebrow {
  display: block;
  margin-bottom: 6px;
}
/* #194 — whole-card click opens the lead drawer (stretched link). The name
   link's ::after covers the entire card; the action row (Edit/Delete) is
   raised above it so those stay independently clickable. Native HTML5 drag on
   the kanban-card is unaffected — the browser suppresses the click after a drag. */
.lead-card-clickable { position: relative; }
.lead-card-clickable__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lead-card-clickable__action { position: relative; z-index: 2; }
/* The name is the stretched link but must read as plain card text — no link
   colour/underline. The whole card carries the hover affordance instead. */
.lead-card-clickable__link,
.lead-card-clickable__link:hover,
.lead-card-clickable__link:focus {
  color: inherit;
  text-decoration: none;
}
.kanban-card.lead-card-clickable:hover { background: var(--surface-alt); }
/* #194 — inline email capture: the Email fact row becomes a labelled field for
   emailless leads; the footer's disabled Convert button submits it. Sits with
   the fact list (hairline separator matches .dv-desclist row rhythm). */
.lead-drawer__email-capture {
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.lead-drawer__email-capture__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-bottom: 2px;
}
.lead-drawer__email-capture p { margin: 0 0 8px; }
/* ── Org (multi-outlet) dashboard ─────────────────────────────────────────
   Aggregate hero (oversized portfolio totals) + full-bleed per-outlet strip.
   Numerics use .dv-figure (Geist Mono); all colour via semantic tokens. */
.org-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 640px) {
  .org-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .org-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.org-hero__figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
/* Per-outlet strip. Full-bleed rows, hairline-separated. */
/* One contained card holding every outlet as a hairline-separated row —
   reads as a structured list, not a set of floating cards (a single outlet no
   longer looks like it's drifting next to a left-hand label). */
.org-outlets { margin-top: var(--space-5); }
.org-outlets__list {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.org-outlet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  text-decoration: none;
  transition: background 0.12s ease;
}
.org-outlet-row + .org-outlet-row { border-top: 1px solid var(--hairline); }
.org-outlet-row:hover { background: var(--surface-alt); }
.org-outlet-row__id { min-width: 0; }
.org-outlet-row__name {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Right cluster: KPI list + open-pill + chevron. */
.org-outlet-row__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.org-outlet-row__kpis {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  text-align: right;
  margin: 0;
}
.org-outlet-row__kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
/* ── Cockpit: controls ─────────────────────────────────────────────────── */
.cockpit-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.cockpit-controls__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.cockpit-presets {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.cockpit-preset {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.cockpit-preset:hover { color: var(--ink); }
.cockpit-preset.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.cockpit-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.cockpit-range__date { width: auto; }
/* ── Cockpit: KPI grid ─────────────────────────────────────────────────── */
.cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .cockpit-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cockpit-kpi__figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: var(--space-1);
}
.cockpit-kpi__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cockpit-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}
.cockpit-delta--up   { color: var(--confirmed); background: var(--confirmed-bg); }
.cockpit-delta--down { color: var(--cancelled); background: var(--cancelled-bg); }
.cockpit-delta--flat { color: var(--text-muted); background: var(--surface-alt); }
/* ── Cockpit: charts grid ──────────────────────────────────────────────── */
.cockpit-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .cockpit-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Customer stat trio (3-up on desktop). */
@media (min-width: 768px) {
  .cockpit-kpis--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ── Cockpit: source table (inside a chart card) ───────────────────────────── */
.cockpit-table-wrap { overflow-x: auto; }
.cockpit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.cockpit-table th,
.cockpit-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.cockpit-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cockpit-table td { color: var(--ink); }
.cockpit-table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cockpit-table tbody tr:last-child td { border-bottom: none; }
/* ─────────────────────────────────────────────────────────────────────
   Waiver form — public single-scroll + responsive rail (GitLab #2).
   Token-clean; scoped to .waiver-shell so it never leaks into account/*.
   ───────────────────────────────────────────────────────────────────── */
.waiver-shell {
  display: block;
}
/* Form column caps at ~640px per the approved design; centered on mobile. */
.waiver-form-col {
  width: 100%;
  max-width: 40rem; /* 640px */
  margin-inline: auto;
}
/* Rail is desktop-only; collapses under 1024px (its progress role moves to
   the sticky top bar rendered inside the form column). */
.waiver-rail {
  display: none;
}
@media (min-width: 1024px) {
  /* The engine <main> clamps content to max-w-3xl (48rem/768px); the rail
     layout needs ~63rem. Break out of the clamp and re-center on the viewport
     so the 320px rail + 640px form both fit without touching the layout. */
  .waiver-shell {
    display: grid;
    grid-template-columns: 20rem minmax(0, 40rem); /* 320px rail + 640px form */
    gap: 3rem;
    justify-content: center;
    align-items: start;
    width: 63rem;
    max-width: calc(100vw - 3rem);
    margin-inline: calc(50% - 31.5rem);
  }

  .waiver-rail {
    display: block;
  }

  .waiver-form-col {
    margin-inline: 0;
  }

  .waiver-rail__inner {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* The waiver-shell breaks out of the engine's max-w-3xl (768px) to 63rem so
     the rail + form fit, re-centering on the viewport. Widen the engine header
     + footer to the SAME 63rem so their OUTER box lines up with the shell.
     Also zero the Tailwind px-4/px-6 gutter here: .waiver-shell itself has NO
     side padding (its 320px rail / 640px form sit flush against the box edge),
     so keeping the header/footer's own padding left their CONTENT — the logo,
     the copyright line — inset ~24px past the rail/form even though the outer
     boxes matched. Applied only on waiver step pages via
     content_for(:engine_shell_wide). */
  .engine-shell-wide {
    max-width: 63rem;
    /* !important: Tailwind's utility layer (px-4/sm:px-6, also on this element)
       is reordered to always win over plain CSS regardless of source order, so
       a bare override here is silently ignored without it. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.waiver-rail__note {
  border-left: 2px solid var(--accent-border);
  padding-left: 0.875rem;
}
.waiver-rail__privacy {
  margin-top: 0.25rem;
}
/* ── Vertical scroll-spy step list ─────────────────────────────────── */
.waiver-rail-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.waiver-rail-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md, 8px);
}
.waiver-rail-step__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--hairline);
  background-color: var(--surface);
  color: var(--muted-2);
}
.waiver-rail-step__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-2);
}
.waiver-rail-step.is-done .waiver-rail-step__marker {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.waiver-rail-step.is-done .waiver-rail-step__label {
  color: var(--ink);
}
.waiver-rail-step.is-current {
  background-color: var(--accent-soft);
}
.waiver-rail-step.is-current .waiver-rail-step__marker {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.waiver-rail-step.is-current .waiver-rail-step__label {
  color: var(--accent);
  font-weight: 600;
}
/* Public packages storefront (/book/:shop/packages) — a public marketing page.
   Uses DiveOS foundation (.dv-btn / .dv-badge / .dv-eyebrow / .dv-* text styles
   + semantic tokens) wherever it maps; keeps bespoke bc-* ONLY for the
   marketing-specific layout (photo-mosaic hero, photo-overlay cards, full-bleed
   gallery) that has no foundation equivalent. */
.bc {
  /* Local marketing vars mapped onto DiveOS semantic tokens (closest match). */
  --nk: var(--ink);
  --tx: var(--gray-600);
  --mut: var(--muted);
  --mut2: var(--muted-2);
  --line: var(--hairline);
  --line2: var(--surface-alt);
  --bg: #E9F1FA;              /* marketing blue page tint — no foundation token */
  --surf: var(--surface);
  --acc: var(--accent);
  --acc-strong: var(--accent-strong);
  --acc-soft: var(--accent-soft);
  background: var(--bg);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}
.bc * { box-sizing: border-box; }
.bc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* Marketing weights: headings heavier (700) + buttons 600, matching the
   Packages Handover (the foundation defaults are 600 / 500). */
.bc .dv-display, .bc .dv-h2, .bc .dv-h3, .bc .dv-h4 { font-weight: 700; }
.bc .dv-btn { font-weight: 600; }
/* Keep an eyebrow's icon + text on one line. */
.bc .dv-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
/* Two-tone marketing headings: the <em> highlight uses the accent. */
.bc .dv-display em, .bc .dv-h2 em, .bc .dv-h3 em { color: var(--accent); font-style: normal; }
/* Marketing hero heading runs larger than the app display scale. */
.bc-hm-card .dv-display { font-size: 40px; line-height: 1.08; }
.bc-sub { color: var(--mut); max-width: 560px; margin: 12px auto 0; }
/* Full-width buttons in card / offering feet. */
.bc-card-foot .dv-btn, .bc-off-body .dv-btn { width: 100%; }
/* checklist */
.mkt-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.mkt-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tx); line-height: 1.45; }
.mkt-checks li svg { color: var(--acc); flex: none; margin-top: 1px; }
/* nav */
.bc-nav { position: sticky; top: 0; z-index: 40; background: rgba(219,233,247,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bc-nav .bc-wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.bc-brand { display: flex; align-items: center; gap: 10px; }
.bc-brand__mark { width: 38px; height: 38px; border-radius: 10px; background: var(--acc); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.bc-brand__name { color: var(--nk); font-weight: 700; font-size: 16px; line-height: 1.05; }
.bc-brand__tag { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut2); }
.bc-navcta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.bc-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mut); }
/* hero mosaic */
.bc-hm { background: transparent; padding: 44px 0 8px; }
.bc-hm-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.bc-hm-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 238px; gap: 14px; }
.bc-hm-tile { position: relative; border-radius: 18px; overflow: hidden; background: var(--line2); }
.bc-hm-tile img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.bc-hm-tile.bc-hm-t1 { grid-column: span 2; grid-row: span 2; }
.bc-hm-tile.bc-hm-t4 { grid-column: span 2; }
.bc-hm-cap { position: absolute; left: 14px; bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(15,23,42,.55); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
.bc-hm-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; max-width: calc(100% - 120px); background: var(--surf); border-radius: 22px; box-shadow: 0 24px 70px rgba(15,23,42,.20); padding: 36px; text-align: center; }
.bc-hm-card .dv-display { margin-top: 12px; }
.bc-hm-card p { color: var(--tx); font-size: 16px; line-height: 1.6; margin: 16px auto 0; max-width: 400px; }
.bc-hm-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
/* trust strip */
.bc-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); margin-top: 24px; }
.bc-strip .bc-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 16px 24px; }
.bc-strip span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mut); }
.bc-strip svg { color: var(--acc); }
/* section shell */
.bc-sec { padding: 68px 0; }
.bc-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
/* package cards */
.bc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.bc-card { display: flex; flex-direction: column; height: 100%; background: var(--surf); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(15,23,42,.05); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.bc-card.is-feat { border: 2px solid var(--acc); box-shadow: 0 22px 55px rgba(3,105,161,.14); }
/* Photo hero extends behind the title + price (white), over a dark gradient. */
.bc-card-media { position: relative; height: 340px; background: var(--line2); overflow: hidden; }
.bc-card-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.16,.68,.24,1); }
.bc-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 22%, rgba(15,23,42,.18) 46%, rgba(15,23,42,.62) 74%, rgba(15,23,42,.86) 100%); transition: opacity .3s ease; }
.bc-card-hero { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
/* Immersive hover: card lifts, photo slow-zooms, title/price rise, gradient deepens. */
.bc-card:hover { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(15,23,42,.18); }
.bc-card.is-feat:hover { box-shadow: 0 36px 78px rgba(3,105,161,.26); }
.bc-card:not(.is-feat):hover { border-color: var(--acc); }
.bc-card:hover .bc-card-media img { transform: scale(1.1); }
.bc-card:hover .bc-card-scrim { opacity: .82; }
.bc-card:hover .bc-card-hero { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .bc-card, .bc-card-media img, .bc-card-hero, .bc-card-scrim { transition: none; }
  .bc-card:hover { transform: none; }
  .bc-card:hover .bc-card-media img { transform: none; }
}
.bc-days-chip { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nk); background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.bc-card-ribbon { position: absolute; top: 14px; right: 14px; z-index: 2; }
.bc-card-hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 22px 24px; text-align: center; color: #fff; }
.bc-card-title { color: #fff; font-weight: 700; letter-spacing: -.02em; font-size: 18px; line-height: 1.25; margin: 0; }
.bc-card-price { margin-top: 8px; }
.bc-card-price b { display: block; color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.bc-card-price span { display: block; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 5px; }
.bc-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.bc-card-blurb { color: var(--mut); font-size: 14px; line-height: 1.5; margin: 0 0 16px; text-align: center; }
.bc-card-foot { margin-top: auto; padding-top: 22px; }
/* instagram / gallery — full bleed */
.bc-gram { padding: 44px 0 60px; }
.bc-gram-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.bc-gram-head h2 { margin-top: 8px; }
.bc-gram-head p { color: var(--mut); font-size: 15px; margin: 8px 0 0; }
.bc-gram-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.bc-gram-grid.full { grid-template-columns: repeat(8, 1fr); }
.bc-gram-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--line2); display: block; }
.bc-gram-tile img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bc-gram-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; background: rgba(3,105,161,.4); transition: opacity .25s ease; }
.bc-gram-tile:hover .bc-gram-ov { opacity: 1; }
.bc-gram-tile:hover img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .bc-gram-tile img { transition: none; } .bc-gram-tile:hover img { transform: none; } }
/* custom quote */
.bc-cust { background: var(--bg); }
.bc-cust .bc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.bc-cust-media { aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: var(--line2); }
.bc-cust-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.bc-cust h2 { margin-top: 12px; }
.bc-cust p { color: var(--tx); font-size: 16px; line-height: 1.6; margin: 16px 0 0; }
.bc-cust-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
/* offerings */
.bc-off-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bc-off-card { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.bc-off-media { position: relative; height: 150px; background: var(--line2); }
.bc-off-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.bc-off-tag { position: absolute; top: 12px; left: 12px; }
.bc-off-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.bc-off-body p { color: var(--mut); font-size: 14px; line-height: 1.55; margin: 10px 0 18px; flex: 1; }
/* footer */
.bc-foot { border-top: 1px solid var(--line); background: #D8E6F4; padding: 56px 0 0; }
.bc-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; }
.bc-foot-desc { color: var(--mut); font-size: 14px; line-height: 1.6; margin: 16px 0 0; max-width: 360px; }
.bc-foot-h { color: var(--nk); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
.bc-contact { display: flex; gap: 10px; margin-bottom: 13px; font-size: 14px; color: var(--tx); align-items: flex-start; }
.bc-contact svg { color: var(--acc); flex: none; margin-top: 2px; }
.bc-foot-bottom { border-top: 1px solid var(--line); margin-top: 44px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--mut2); }
.bc-foot-bottom .dv-figure { letter-spacing: .08em; }
@media (max-width: 960px) {
  /* Roomier edge gutters on smaller screens. */
  .bc-wrap, .bc-hm-inner { padding-left: 32px; padding-right: 32px; }
  .bc-hm-card { position: static; transform: none; width: 100%; max-width: none; margin-top: 16px; box-shadow: 0 12px 30px rgba(15,23,42,.1); }
  .bc-grid, .bc-off-grid, .bc-foot-grid { grid-template-columns: 1fr; }
  .bc-cust .bc-wrap { grid-template-columns: 1fr; }
  .bc-gram-grid, .bc-gram-grid.full { grid-template-columns: repeat(4, 1fr); }
  .bc-hm-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .bc-hm-tile.bc-hm-t1, .bc-hm-tile.bc-hm-t4 { grid-column: span 2; grid-row: auto; }
}
/* DiveOS — segmented control selected state.
   The BT `shared/fields/buttons` partial (Status, Chop level, etc.) is used
   unejected, so its selected button paints in the BT default blue (#3b82f6).
   Re-point it at the DiveOS accent so the app has ONE accent color, not two. */
.btn-toggle:has(input:checked) .button-alternative {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-toggle:has(input:checked) .button-alternative:hover {
  background-color: var(--accent-strong, var(--accent)) !important;
}
/* DiveOS — BT primary button (the `.button` token emitted by
   `first_button_primary`, used by ~47 scaffolded CTAs like "Add Dive Trip")
   defaults to the BT blue #3b82f6. Hand-written DiveOS CTAs use explicit
   bg-accent, so the two clash. Re-point the primary to the DiveOS accent. The
   `.button` token is distinct from `.button-secondary`/`.button-alternative`,
   so those variants are untouched. */
a.button:not(.button-secondary):not(.button-alternative),
button.button:not(.button-secondary):not(.button-alternative) {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
a.button:not(.button-secondary):not(.button-alternative):hover,
button.button:not(.button-secondary):not(.button-alternative):hover {
  background-color: var(--accent-strong, var(--accent)) !important;
}
/* Dashboard Layout Containers */
.dashboard-upper-container {
  /* margin-bottom: 32px !important; */
}
/* Margins between sections in the lower dashboard container */
.dashboard-lower-container>* {
  margin-bottom: 32px !important;
}
.dashboard-lower-container>*:last-child {
  margin-bottom: 0 !important;
}
/* Table Improvements */
.table {
  background-color: transparent !important;
  border-collapse: separate !important;
  /* Required for sticky header borders and box-shadow */
  border-spacing: 0 !important;
}
/* Zebra Striping - Light Mode */
.table-striped tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}
.table-striped tbody tr:nth-child(odd) {
  background-color: transparent !important;
}
/* --- Sticky Header ---
   Fixes the header to the top of the table container for vertical scrolling.
*/
/* Sticky Header */
.table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background-color: white !important;
  transition: box-shadow 0.2s ease !important;
  border-bottom: 1px solid #e5e7eb !important;
}
/* Ensure the sentinel doesn't affect layout */
.sticky-sentinel {
  height: 1px;
  width: 100%;
  margin-top: -1px;
  visibility: hidden;
  pointer-events: none;
}
/* --- Dual Sticky Columns ---
   Fixes the Checkbox (1st) and Name (2nd) columns to the left for horizontal scrolling.
*/
/* Dual Sticky Columns (Checkbox + Identity) */
/* Column 1 (Checkbox) - No shadow on this one */
.table thead th:nth-child(1),
.table tbody td:nth-child(1) {
  position: sticky !important;
  left: 0 !important;
  z-index: 26 !important;
  background-color: white !important;
}
/* Column 2 (Name/Identity) - This one carries the shadow */
.table thead th:nth-child(2) {
  position: sticky !important;
  z-index: 25 !important;
  background-color: white !important;
}
.table tbody td:nth-child(2) {
  position: sticky !important;
  z-index: 25 !important;
  background-color: white !important;
  overflow: visible !important;
}
.table thead th:nth-child(2) {
  z-index: 31 !important;
}
/* --- Column Shadow (Left Side) ---
   Creates a vertical indicator line on the edge of the second (sticky) column.
   Toggled by the Stimulus controller when horizontal scroll is > 0.
*/
/* Shadow line when horizontally scrolled (on child 2) - Continuous Line effect */
.table thead th:nth-child(2)::after,
.table tbody td:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: transparent;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
}
/* --- Light Mode Shadow --- */
.has-horizontal-shadow .table thead th:nth-child(2)::after,
.has-horizontal-shadow .table tbody td:nth-child(2)::after {
  /* This controls the slightly visible 1px line on the edge of the column */
  background: rgba(91, 91, 91, 0.1);

  /* This controls the actual "glow/shadow" effect (offset-x, offset-y, blur, color) */
  box-shadow: 1px 0 12px rgba(41, 41, 41, 0.5);
}
/* --- Container Shadow (Right Side) ---
   Persistent indicator on the right edge of the container to show hidden content.
   Toggled by the Stimulus controller and fixed to the parent container boundary.
*/
/* --- Persistent Right-side Scroll Indicator Shadow --- */
/* The parent of the scroll container needs relative positioning for the fixed overlay */
.table-scroll-container--can-scroll-right {
  position: relative;
}
.table-scroll-container--can-scroll-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.3s ease;
  opacity: 1;
  /* Persistent until end */
  box-shadow: none;
  /* Reduced alpha values (0.6 -> 0.3) for more transparency */
  background: #ffffff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 90%, rgba(255, 255, 255, 1) 100%);
}
/* --- Background Overrides for Sticky Columns ---
   Sticky columns must have a solid background color (opaque) so that 
   the rest of the table content doesn't "bleed through" behind them.
*/
/* Solid backgrounds for all rows in sticky group */
.table tbody tr td:nth-child(1),
.table tbody tr td:nth-child(2) {
  background-color: white !important;
}
/* Striped overrides */
.table-striped tbody tr:nth-child(even) td:nth-child(1),
.table-striped tbody tr:nth-child(even) td:nth-child(2) {
  background-color: #f9fafb !important;
}
/* Hover highlights */
.table tbody tr:hover td,
.table tbody tr:hover td:nth-child(1),
.table tbody tr:hover td:nth-child(2) {
  background-color: #ebf1fd !important;
}
/* Pin the primary body base to 14px (DiveOS --text-sm). Named text roles
   override per patterns.css; this stops stray/unstyled text defaulting to the
   BT theme base (15/16px). */
body { font-size: var(--text-sm); }
.\*\:bg-gray-100 > *{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.\*\:bg-white > *{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}
.file\:rounded-md::file-selector-button{
  border-radius: 0.375rem;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-accent-soft::file-selector-button{
  background-color: var(--accent-soft, rgba(3,105,161,0.08));
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button{
  font-weight: 500;
}
.file\:text-accent::file-selector-button{
  color: var(--accent, #0369A1);
}
.placeholder\:font-sans::-moz-placeholder{
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.placeholder\:font-sans::placeholder{
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.placeholder\:text-muted-2::-moz-placeholder{
  color: var(--muted-2, #9CA3AF);
}
.placeholder\:text-muted-2::placeholder{
  color: var(--muted-2, #9CA3AF);
}
.first\:mt-1\.5:first-child{
  margin-top: 0.375rem;
}
.first\:border-t-0:first-child{
  border-top-width: 0px;
}
.last\:mb-0:last-child{
  margin-bottom: 0px;
}
.last\:border-0:last-child{
  border-width: 0px;
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.empty\:hidden:empty{
  display: none;
}
.focus-within\:bg-\[var\(--hover-warm\)\]:focus-within{
  background-color: var(--hover-warm);
}
.hover\:border-accent:hover{
  border-color: var(--accent, #0369A1);
}
.hover\:border-confirmed-border:hover{
  border-color: var(--confirmed-border, #BBF7D0);
}
.hover\:border-hairline-strong:hover{
  border-color: var(--hairline-strong, #D1D5DB);
}
.hover\:bg-\[var\(--hover-warm\)\]:hover{
  background-color: var(--hover-warm);
}
.hover\:bg-accent:hover{
  background-color: var(--accent, #0369A1);
}
.hover\:bg-accent-soft:hover{
  background-color: var(--accent-soft, rgba(3,105,161,0.08));
}
.hover\:bg-accent-strong:hover{
  background-color: var(--accent-strong, #075985);
}
.hover\:bg-base-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-base-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-briefing-bg:hover{
  background-color: var(--briefing-bg, #FFFBEB);
}
.hover\:bg-cancelled-bg:hover{
  background-color: var(--cancelled-bg, #FFF1F2);
}
.hover\:bg-canvas:hover{
  background-color: var(--canvas, #F9FAFB);
}
.hover\:bg-confirmed:hover{
  background-color: var(--confirmed, #15803D);
}
.hover\:bg-confirmed-bg:hover{
  background-color: var(--confirmed-bg, #F0FDF4);
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-hairline:hover{
  background-color: var(--hairline, #E5E7EB);
}
.hover\:bg-primary-600:hover{
  background-color: var(--primary-600);
}
.hover\:bg-purple-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface:hover{
  background-color: var(--surface, #FFFFFF);
}
.hover\:bg-surface-alt:hover{
  background-color: var(--surface-alt, #F3F4F6);
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-opacity-10:hover{
  --tw-bg-opacity: 0.1;
}
.hover\:bg-opacity-20:hover{
  --tw-bg-opacity: 0.2;
}
.hover\:text-accent:hover{
  color: var(--accent, #0369A1);
}
.hover\:text-accent-strong:hover{
  color: var(--accent-strong, #075985);
}
.hover\:text-base-500:hover{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.hover\:text-base-700:hover{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-base-900:hover{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-500:hover{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-900:hover{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.hover\:text-cancelled:hover{
  color: var(--cancelled, #9F1239);
}
.hover\:text-confirmed:hover{
  color: var(--confirmed, #15803D);
}
.hover\:text-gray-400:hover{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.hover\:text-ink:hover{
  color: var(--ink, #111827);
}
.hover\:text-muted:hover{
  color: var(--muted, #6B7280);
}
.hover\:text-primary-600:hover{
  color: var(--primary-600);
}
.hover\:text-red-600:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-800:hover{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary-600:hover{
  color: var(--secondary-600);
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:no-underline:hover{
  text-decoration-line: none;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-inner:hover{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-sm:hover{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-2:hover{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:ring-accent:hover{
  --tw-ring-color: var(--accent, #0369A1);
}
.hover\:file\:bg-accent-soft::file-selector-button:hover{
  background-color: var(--accent-soft, rgba(3,105,161,0.08));
}
.focus\:border-accent:focus{
  border-color: var(--accent, #0369A1);
}
.focus\:border-accent-strong:focus{
  border-color: var(--accent-strong, #075985);
}
.focus\:border-blue-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-primary-500:focus{
  border-color: var(--primary-500);
}
.focus\:border-red-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:bg-canvas:focus{
  background-color: var(--canvas, #F9FAFB);
}
.focus\:shadow:focus{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:outline-2:focus{
  outline-width: 2px;
}
.focus\:-outline-offset-2:focus{
  outline-offset: -2px;
}
.focus\:outline-accent:focus{
  outline-color: var(--accent, #0369A1);
}
.focus\:outline-blue-600:focus{
  outline-color: #2563eb;
}
.focus\:ring:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-inset:focus{
  --tw-ring-inset: inset;
}
.focus\:ring-accent:focus{
  --tw-ring-color: var(--accent, #0369A1);
}
.focus\:ring-blue-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-500:focus{
  --tw-ring-color: var(--primary-500);
}
.focus\:ring-primary-600:focus{
  --tw-ring-color: var(--primary-600);
}
.focus\:ring-red-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-white:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.focus\:ring-opacity-50:focus{
  --tw-ring-opacity: 0.5;
}
.focus\:ring-offset-0:focus{
  --tw-ring-offset-width: 0px;
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}
.focus\:ring-offset-canvas:focus{
  --tw-ring-offset-color: var(--canvas, #F9FAFB);
}
.focus-visible\:outline:focus-visible{
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}
.focus-visible\:outline-\[var\(--accent-strong\)\]:focus-visible{
  outline-color: var(--accent-strong);
}
.active\:cursor-grabbing:active{
  cursor: grabbing;
}
.disabled\:bg-base-200:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-canvas:disabled{
  background-color: var(--canvas, #F9FAFB);
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.disabled\:dark:disabled .pcr-app{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled .pcr-app .pcr-interaction .pcr-result{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.disabled\:dark:disabled .pcr-app .pcr-interaction .pcr-result:focus {
          box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 3px var(--primary-500);
        }
.disabled\:dark:disabled .daterangepicker{
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled .daterangepicker::before {
        border-bottom-color: #0f172a;
      }
.disabled\:dark:disabled .daterangepicker::after {
        border-bottom-color: #1e293b;
      }
.disabled\:dark:disabled .daterangepicker .calendar-table{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.disabled\:dark:disabled .daterangepicker .calendar-table .available span{
  border-color: var(--primary-500);
}
.disabled\:dark:disabled .daterangepicker .drp-buttons {
        border-top-color: #0f172a;
        --tw-text-opacity: 1;
        color: rgb(203 213 225 / var(--tw-text-opacity, 1));
      }
.disabled\:dark:disabled .daterangepicker th.available:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled .daterangepicker td.off{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.disabled\:dark:disabled .daterangepicker td.off { color: #fff; }
.disabled\:dark:disabled .daterangepicker td.available:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled .daterangepicker .hourselect,.disabled\:dark:disabled .daterangepicker .minuteselect,.disabled\:dark:disabled .daterangepicker .ampmselect{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1)) !important;
}
.disabled\:dark:disabled .iti__country-list{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled .select2-container .select2-selection__rendered{
  --tw-text-opacity: 1 !important;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1)) !important;
}
.disabled\:dark:disabled .select2-container .select2-dropdown{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled .select2-container .select2-search__field{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:dark:disabled .select2-container .select2-selection--multiple,.disabled\:dark:disabled .select2-container .select2-selection--single{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:dark:disabled .select2-container .select2-selection--multiple:focus,.disabled\:dark:disabled .select2-container .select2-selection--single:focus{
  --tw-ring-color: var(--primary-500) !important;
}
.disabled\:dark:disabled .select2-container .select2-selection--multiple,.disabled\:dark:disabled .select2-container .select2-selection--single{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:dark:disabled .select2-container .select2-selection--multiple:focus,.disabled\:dark:disabled .select2-container .select2-selection--single:focus{
  --tw-ring-color: var(--primary-500) !important;
}
.disabled\:dark:disabled .select2-container .select2-selection--multiple,.disabled\:dark:disabled .select2-container .select2-selection--single{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.disabled\:dark:disabled .select2-container .select2-selection__choice{
  border-color: var(--primary-500) !important;
  background-color: var(--primary-500) !important;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.disabled\:dark:disabled .select2-container .select2-selection__choice { color: #fff; }
.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove { color: #fff; }
.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove:hover { color: #fff; }
.disabled\:dark:disabled .select2-container .select2-results__option{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.disabled\:dark:disabled trix-editor{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:dark:disabled trix-editor:focus,.disabled\:dark:disabled trix-editor:active{
  border-color: var(--primary-500) !important;
}
.disabled\:dark:disabled trix-toolbar{
  opacity: 0.5 !important;
}
.disabled\:dark:disabled trix-toolbar.visible{
  opacity: 1 !important;
}
.disabled\:dark:disabled trix-toolbar .trix-button-group,.disabled\:dark:disabled trix-toolbar .trix-button{
  --tw-border-opacity: 1 !important;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)) !important;
}
.disabled\:dark:disabled trix-toolbar .trix-button:disabled::before{
  opacity: 0.25;
}
.disabled\:dark:disabled trix-toolbar .trix-dialog{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  --tw-shadow-color: #0f172a !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}
.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-button--dialog{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-button--dialog { color: #fff; }
.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-input--dialog{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-input--dialog:focus{
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}
.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-input--dialog:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.disabled\:dark:disabled .tribute-container ul{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:dark:disabled .trix-dialogs{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:dark:disabled .trix-content a[href^="bullettrain://"]{
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.booking-step-indicator.disabled\:dark:disabled .trix-content a[href^="bullettrain://"] { color: #fff; }
.disabled\:dark:disabled .ck {
      --ck-color-base-background: #1e293b;
      --ck-color-base-border: #0f172a;
      --ck-color-toolbar-background: #1e293b;
      --ck-color-toolbar-border: #0f172a;
      --ck-color-text: #cbd5e1;
    }
.disabled\:dark:disabled .ck .ck-editor__editable:not(.ck-editor__nested-editable){
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:dark:disabled .ck .ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:\[--code-editor-background\:theme\(\'colors\.base\.200\'\)\]:disabled{
  --code-editor-background: #e2e8f0;
}
.group[open] .group-open\:hidden{
  display: none;
}
.group:hover .group-hover\:visible{
  visibility: visible;
}
.group\/item:hover .group-hover\/item\:translate-x-3{
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-3{
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-accent{
  color: var(--accent, #0369A1);
}
.group:hover .group-hover\:text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline{
  text-decoration-line: underline;
}
.group:hover .group-hover\:no-underline{
  text-decoration-line: none;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.dark .group:hover .group-hover\:visibletrix-toolbar{
  opacity: 1 !important;
}
.peer[open] ~ .peer-open\:hidden{
  display: none;
}
.has-\[\:checked\]\:border-accent:has(:checked){
  border-color: var(--accent, #0369A1);
}
.has-\[\:checked\]\:bg-accent-soft:has(:checked){
  background-color: var(--accent-soft, rgba(3,105,161,0.08));
}
.has-\[\:checked\]\:text-accent:has(:checked){
  color: var(--accent, #0369A1);
}
.has-\[\:focus-visible\]\:ring-2:has(:focus-visible){
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.has-\[\:focus-visible\]\:ring-accent:has(:focus-visible){
  --tw-ring-color: var(--accent, #0369A1);
}
.has-\[\:focus-visible\]\:ring-offset-2:has(:focus-visible){
  --tw-ring-offset-width: 2px;
}
.aria-selected\:border-accent[aria-selected="true"]{
  border-color: var(--accent, #0369A1);
}
.aria-selected\:font-semibold[aria-selected="true"]{
  font-weight: 600;
}
.aria-selected\:text-accent[aria-selected="true"]{
  color: var(--accent, #0369A1);
}
@media (min-width: 640px){
  .sm\:bottom-40{
    bottom: 10rem;
  }
  .sm\:order-none{
    order: 0;
  }
  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .sm\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .sm\:col-span-4{
    grid-column: span 4 / span 4;
  }
  .sm\:col-span-5{
    grid-column: span 5 / span 5;
  }
  .sm\:col-span-6{
    grid-column: span 6 / span 6;
  }
  .sm\:col-span-7{
    grid-column: span 7 / span 7;
  }
  .sm\:col-span-8{
    grid-column: span 8 / span 8;
  }
  .sm\:m-10{
    margin: 2.5rem;
  }
  .sm\:-mx-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .sm\:mx-4{
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .sm\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }
  .sm\:mb-0{
    margin-bottom: 0px;
  }
  .sm\:mt-0{
    margin-top: 0px;
  }
  .sm\:block{
    display: block;
  }
  .sm\:inline{
    display: inline;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:grid{
    display: grid;
  }
  .sm\:inline-grid{
    display: inline-grid;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:w-40{
    width: 10rem;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:w-full{
    width: 100%;
  }
  .sm\:max-w-md{
    max-width: 28rem;
  }
  .sm\:max-w-sm{
    max-width: 24rem;
  }
  .sm\:flex-shrink-0{
    flex-shrink: 0;
  }
  .sm\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:items-start{
    align-items: flex-start;
  }
  .sm\:items-end{
    align-items: flex-end;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-start{
    justify-content: flex-start;
  }
  .sm\:justify-end{
    justify-content: flex-end;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:gap-3{
    gap: 0.75rem;
  }
  .sm\:gap-4{
    gap: 1rem;
  }
  .sm\:rounded-2xl{
    border-radius: 1rem;
  }
  .sm\:rounded-md{
    border-radius: 0.375rem;
  }
  .sm\:bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .sm\:bg-gradient-to-br{
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }
  .sm\:p-5{
    padding: 1.25rem;
  }
  .sm\:p-6{
    padding: 1.5rem;
  }
  .sm\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .sm\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .sm\:py-14{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .sm\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .sm\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .sm\:pl-0{
    padding-left: 0px;
  }
  .sm\:pl-8{
    padding-left: 2rem;
  }
  .sm\:pr-10{
    padding-right: 2.5rem;
  }
  .sm\:pr-6{
    padding-right: 1.5rem;
  }
  .sm\:text-right{
    text-align: right;
  }
  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:shadow{
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 768px){
  .md\:relative{
    position: relative;
  }
  .md\:top-0\.5{
    top: 0.125rem;
  }
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .md\:mt-8{
    margin-top: 2rem;
  }
  .md\:block{
    display: block;
  }
  .md\:inline{
    display: inline;
  }
  .md\:flex{
    display: flex;
  }
  .md\:hidden{
    display: none;
  }
  .md\:h-14{
    height: 3.5rem;
  }
  .md\:h-auto{
    height: auto;
  }
  .md\:h-screen{
    height: 100vh;
  }
  .md\:w-1\/4{
    width: 25%;
  }
  .md\:w-14{
    width: 3.5rem;
  }
  .md\:w-2\/5{
    width: 40%;
  }
  .md\:w-3\/5{
    width: 60%;
  }
  .md\:w-80{
    width: 20rem;
  }
  .md\:w-full{
    width: 100%;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:flex-row{
    flex-direction: row;
  }
  .md\:items-center{
    align-items: center;
  }
  .md\:justify-between{
    justify-content: space-between;
  }
  .md\:overflow-y-scroll{
    overflow-y: scroll;
  }
  .md\:rounded-lg{
    border-radius: 0.5rem;
  }
  .md\:rounded-l-lg{
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }
  .md\:rounded-t-lg{
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }
  .md\:rounded-tl-lg{
    border-top-left-radius: 0.5rem;
  }
  .md\:border-l-2{
    border-left-width: 2px;
  }
  .md\:border-none{
    border-style: none;
  }
  .md\:bg-gradient-to-br{
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }
  .md\:p-5{
    padding: 1.25rem;
  }
  .md\:p-8{
    padding: 2rem;
  }
  .md\:text-\[0\.75rem\]{
    font-size: 0.75rem;
  }
  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 1024px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .lg\:m-20{
    margin: 5rem;
  }
  .lg\:-ml-px{
    margin-left: -1px;
  }
  .lg\:-mr-px{
    margin-right: -1px;
  }
  .lg\:-mt-5{
    margin-top: -1.25rem;
  }
  .lg\:mb-0{
    margin-bottom: 0px;
  }
  .lg\:block{
    display: block;
  }
  .lg\:inline-block{
    display: inline-block;
  }
  .lg\:flex{
    display: flex;
  }
  .lg\:hidden{
    display: none;
  }
  .lg\:w-4\/5{
    width: 80%;
  }
  .lg\:w-96{
    width: 24rem;
  }
  .lg\:max-w-md{
    max-width: 28rem;
  }
  .lg\:shrink-0{
    flex-shrink: 0;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1fr_320px\]{
    grid-template-columns: 1fr 320px;
  }
  .lg\:rounded-l-none{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .lg\:border-l{
    border-left-width: 1px;
  }
  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1280px){
  .xl\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .xl\:grid{
    display: grid;
  }
  .xl\:w-52{
    width: 13rem;
  }
  .xl\:w-auto{
    width: auto;
  }
  .xl\:flex-none{
    flex: none;
  }
  .xl\:flex-shrink-0{
    flex-shrink: 0;
  }
  .xl\:flex-row{
    flex-direction: row;
  }
  .xl\:items-start{
    align-items: flex-start;
  }
  .xl\:justify-between{
    justify-content: space-between;
  }
  .xl\:gap-6{
    gap: 1.5rem;
  }
  .xl\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .xl\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.dark\:divide-base-700\/5:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(51 65 85 / 0.05);
}
.dark\:border-base-300\/10:where(.dark, .dark *){
  border-color: rgb(203 213 225 / 0.1);
}
.dark\:border-base-500:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}
.dark\:border-base-500\/5:where(.dark, .dark *){
  border-color: rgb(100 116 139 / 0.05);
}
.dark\:border-base-600:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.dark\:border-base-900:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-red-700:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.dark\:bg-base-50\/10:where(.dark, .dark *){
  background-color: rgb(248 250 252 / 0.1);
}
.dark\:bg-base-700:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:bg-base-700\/50:where(.dark, .dark *){
  background-color: rgb(51 65 85 / 0.5);
}
.dark\:bg-base-800:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-base-900:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-black\/10:where(.dark, .dark *){
  background-color: rgb(0 0 0 / 0.1);
}
.dark\:bg-blue-900\/30:where(.dark, .dark *){
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-red-700:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-700\/40:where(.dark, .dark *){
  background-color: rgb(185 28 28 / 0.4);
}
.dark\:bg-red-900:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.dark\:from-base-700:where(.dark, .dark *){
  --tw-gradient-from: #334155 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-base-700\/50:where(.dark, .dark *){
  --tw-gradient-from: rgb(51 65 85 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-base-800:where(.dark, .dark *){
  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-primary-900:where(.dark, .dark *){
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:to-base-800:where(.dark, .dark *){
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}
.dark\:to-primary-600:where(.dark, .dark *){
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}
.dark\:text-base-200:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:text-base-300:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:text-base-400:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark\:text-base-500:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark\:text-base-600:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.dark\:text-base-800:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-500:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.dark\:text-primary-300:where(.dark, .dark *){
  color: var(--primary-300);
}
.dark\:text-red-100:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.dark\:text-white:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:shadow:where(.dark, .dark *){
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:shadow-black:where(.dark, .dark *){
  --tw-shadow-color: #000;
  --tw-shadow: var(--tw-shadow-colored);
}
.dark\:ring-transparent:where(.dark, .dark *){
  --tw-ring-color: transparent;
}
.dark\:ring-offset-base-700:where(.dark, .dark *){
  --tw-ring-offset-color: #334155;
}
.dark\:ring-offset-base-900:where(.dark, .dark *){
  --tw-ring-offset-color: #0f172a;
}
.dark\:\[--code-editor-background\:theme\(\'colors\.base\.800\'\)\]:where(.dark, .dark *){
  --code-editor-background: #1e293b;
}
.dark\:\*\:bg-base-700 > *:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:\*\:bg-base-900 > *:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-base-400:hover:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-base-700:hover:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-900\/30:hover:where(.dark, .dark *){
  background-color: rgb(30 58 138 / 0.3);
}
.hover\:dark\:bg-base-700:where(.dark, .dark *):hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:text-blue-100:hover:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.disabled\:dark\:bg-base-700:where(.dark, .dark *):disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.disabled\:dark\:\[--code-editor-background\:theme\(\'colors\.base\.700\'\)\]:where(.dark, .dark *):disabled{
  --code-editor-background: #334155;
}
.group:hover .dark\:group-hover\:bg-base-700\/25:where(.dark, .dark *){
  background-color: rgb(51 65 85 / 0.25);
}
.group:hover .dark\:group-hover\:text-base-100:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  .sm\:dark\:bg-base-700:where(.dark, .dark *){
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }
  .sm\:dark\:shadow-lg:where(.dark, .dark *){
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media print{
  .print\:block{
    display: block;
  }
  .print\:hidden{
    display: none;
  }
  .print\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .print\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .print\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .print\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .print\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .print\:shadow-none{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{
  display: none;
}
.\[\&_p\]\:mb-2 p{
  margin-bottom: 0.5rem;
}