/* 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);
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.button, .os-text-white) { 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);
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.button-color, .os-text-white) { 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);
}
:is(.equipment-item-actions, .os-equipment-item-actions) :is(.button-color, .os-button) {
  font-size: var(--text-sm);
}
:is(.button-color, .os-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);
}
:is(.button-color, .os-button):hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
:is(.button-color, .os-button):is(.button-red, .os-button-red) {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
:is(.button-color, .os-button):is(.button-red, .os-button-red):hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
a:is(.button-color, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)), button:is(.button-color, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a:is(.button-color, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover, button:is(.button-color, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-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);
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.btn-toggle input[type=checkbox]:checked + button, .os-text-white),:is(.booking-step-indicator, .os-booking-step-indicator):is( .btn-toggle input[type=radio]:checked + button, .os-text-white) { 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);
}
:is(.equipment-item-actions, .os-equipment-item-actions) :is(.btn-toggle input[type=checkbox]:checked + button, .os-button),:is(.equipment-item-actions, .os-equipment-item-actions) :is( .btn-toggle input[type=radio]:checked + button, .os-button) {
  font-size: var(--text-sm);
}
:is(.btn-toggle input[type=checkbox]:checked + button, .os-button),:is( .btn-toggle input[type=radio]:checked + button, .os-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);
}
:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):hover,:is( .btn-toggle input[type=radio]:checked + button, .os-button):hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):is(.button-red, .os-button-red),:is( .btn-toggle input[type=radio]:checked + button, .os-button):is(.button-red, .os-button-red) {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):is(.button-red, .os-button-red):hover,:is( .btn-toggle input[type=radio]:checked + button, .os-button):is(.button-red, .os-button-red):hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
a:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)), button:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)),a:is( .btn-toggle input[type=radio]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)), button:is( .btn-toggle input[type=radio]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover, button:is(.btn-toggle input[type=checkbox]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover,a:is( .btn-toggle input[type=radio]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover, button:is( .btn-toggle input[type=radio]:checked + button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-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));
}
 :is(.pagy a:not(.gap), .os-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;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
}
 :is(.pagy a:not(.gap), .os-button-alternative):hover {
  color: var(--text-primary);
  background: var(--surface-alt);
  border-color: var(--border);
}
:is(.btn-toggle, .os-btn-toggle):has(input:checked) :is(.pagy a:not(.gap), .os-button-alternative) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
:is(.btn-toggle, .os-btn-toggle):has(input:checked) :is(.pagy a:not(.gap), .os-button-alternative):hover {
  background-color: var(--accent-strong, var(--accent));
}
a:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.pagy a:not(.gap), .os-button-alternative)), button:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.pagy a:not(.gap), .os-button-alternative)) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.pagy a:not(.gap), .os-button-alternative)):hover, button:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.pagy a:not(.gap), .os-button-alternative)):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);
      }
:is(.booking-step-indicator, .os-booking-step-indicator):is(.pagy a:not(.gap):not([href]), .os-text-white) { 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);
}
:is(.equipment-item-actions, .os-equipment-item-actions) :is(.pagy a:not(.gap):not([href]), .os-button) {
  font-size: var(--text-sm);
}
:is(.pagy a:not(.gap):not([href]), .os-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);
}
:is(.pagy a:not(.gap):not([href]), .os-button):hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
:is(.pagy a:not(.gap):not([href]), .os-button):is(.button-red, .os-button-red) {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
:is(.pagy a:not(.gap):not([href]), .os-button):is(.button-red, .os-button-red):hover {
  color: #fff;
  background: var(--red-700);
  border-color: var(--red-700);
}
a:is(.pagy a:not(.gap):not([href]), .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)), button:is(.pagy a:not(.gap):not([href]), .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)) {
  background-color: var(--accent);
  border-color: var(--accent);
}
a:is(.pagy a:not(.gap):not([href]), .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover, button:is(.pagy a:not(.gap):not([href]), .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-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;
        }
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden) { display: none; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden) { display: none; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden))) :is(.st-cover-edit, .os-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);
}
:is(.diver-cards, .os-diver-cards):is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden) {
  display: none;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.pagy a:not(.gap):not([href]):not([aria-current]), .os-hidden) { 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;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.bulk-action-unavailable, .os-hidden) { display: none !important; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.bulk-action-unavailable, .os-hidden) { display: none !important; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-action-unavailable, .os-hidden))) {
  border-style: solid !important; border-color: var(--hairline) !important; background: transparent !important; overflow: hidden !important; height: 200px !important;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-action-unavailable, .os-hidden))):hover { border-color: var(--hairline) !important; background: transparent !important; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-action-unavailable, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block !important; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-action-unavailable, .os-hidden))) :is(.st-cover-edit, .os-st-cover-edit) {
  position: absolute !important; right: 12px !important; bottom: 12px !important; pointer-events: none !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important;
  font-size: var(--text-xs) !important; font-weight: 600 !important; color: var(--ink) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important; backdrop-filter: blur(6px) !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-pill) !important; box-shadow: var(--shadow-sm) !important;
}
:is(.diver-cards, .os-diver-cards):is(.bulk-action-unavailable, .os-hidden) {
  display: none !important;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.bulk-action-unavailable, .os-hidden) { display: none !important; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.bulk-action-unavailable, .os-hidden) { display: none !important; }
.bulk-actions-selectable-item-checkbox-wrapper{
  display: none;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden) { display: none; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden) { display: none; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden))) :is(.st-cover-edit, .os-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);
}
:is(.diver-cards, .os-diver-cards):is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden) {
  display: none;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.bulk-actions-selectable-item-checkbox-wrapper, .os-hidden) { display: none; }
.bulk-actions .bulk-actions-checkbox-cell{
  width: 1rem;
  padding-right: 0px;
}
.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle{
  display: none;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden) { display: none; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden) { display: none; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden))) :is(.st-cover-edit, .os-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);
}
:is(.diver-cards, .os-diver-cards):is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden) {
  display: none;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle, .os-hidden) { 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;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden) { display: none; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden) { display: none; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden))) :is(.st-cover-edit, .os-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);
}
:is(.diver-cards, .os-diver-cards):is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden) {
  display: none;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.bulk-actions.selectable-available:not(.selectable) .bulk-action, .os-hidden) { display: none; }
.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell{
  display: none;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden) { display: none; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden) { display: none; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden))) :is(.st-cover-edit, .os-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);
}
:is(.diver-cards, .os-diver-cards):is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden) {
  display: none;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell, .os-hidden) { display: none; }
.bulk-actions.selectable .bulk-action-single{
  display: none;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.bulk-actions.selectable .bulk-action-single, .os-hidden) { display: none; }
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.bulk-actions.selectable .bulk-action-single, .os-hidden) { display: none; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable .bulk-action-single, .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable .bulk-action-single, .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable .bulk-action-single, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.bulk-actions.selectable .bulk-action-single, .os-hidden))) :is(.st-cover-edit, .os-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);
}
:is(.diver-cards, .os-diver-cards):is(.bulk-actions.selectable .bulk-action-single, .os-hidden) {
  display: none;
}
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.bulk-actions.selectable .bulk-action-single, .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.bulk-actions.selectable .bulk-action-single, .os-hidden) { 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;
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.select2-container .select2-dropdown, .os-border-2) {
  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;
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.select2-container--default .select2-results__option[aria-selected=true], .os-text-white) { 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 !important;
}
.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-\[calc\(50\%\+20px\)\]{
  left: calc(50% + 20px);
}
.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-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-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-32{
  height: 8rem;
}
.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-\[220px\]{
  max-width: 220px;
}
.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;
}
.self-center{
  align-self: center;
}
.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;
}
.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;
}
.lowercase{
  text-transform: lowercase;
}
.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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.dark .daterangepicker td.off, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.dark .select2-container .select2-selection__choice, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.dark .select2-container .select2-selection__choice .select2-selection__choice__remove, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.dark .select2-container .select2-selection__choice .select2-selection__choice__remove:hover, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.dark trix-toolbar .trix-dialog .trix-button--dialog, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.dark .trix-content a[href^="bullettrain://"], .os-text-white) { 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;
}
:is(.wz-adddate, .os-wz-adddate):is(.electron .electron-mobile-only, .os-block),:is(.wz-adddate, .os-wz-adddate):is( .todesktop .electron-mobile-only, .os-block) { display: block; }
:is(.wz-adddate, .os-wz-adddate):is(.electron .electron-mobile-only, .os-block) :is(.wz-adddate-btn, .os-wz-adddate-btn),:is(.wz-adddate, .os-wz-adddate):is( .todesktop .electron-mobile-only, .os-block) :is(.wz-adddate-btn, .os-wz-adddate-btn) { width: 100%; justify-content: center; height: 42px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
:is(.wz-adddate, .os-wz-adddate):is(.electron .electron-mobile-only, .os-block) :is(.wz-menu, .os-wz-menu),:is(.wz-adddate, .os-wz-adddate):is( .todesktop .electron-mobile-only, .os-block) :is(.wz-menu, .os-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.
 */
/* Self-hosted webfonts (woff2 face declarations) — replaces the former remote
   Google Fonts imports. A consuming app tightened its CSP to `font_src :self`
   with no external stylesheet host, which blocked the remote font import and
   dropped the type. Fonts now ship in the gem (app/assets/fonts, on the engine
   asset path) and resolve via Propshaft's url() rewriting. Declared here at the
   top of the token entry so the face rules land near the top of the flattened
   bundle, ahead of any rule that uses the families. Material Symbols was dropped
   (dead — no consumer). */
/* THE @import STATEMENTS MUST STAY FIRST. CSS ignores any `@import` that
   appears after another statement, and `@font-face` counts. From v0.16.1 —
   when the fonts were self-hosted and these face rules were added ABOVE the
   imports — both token imports became invalid, so a consumer that loads THIS
   FILE (rather than the flattened bundle) silently lost the entire token
   layer: every primitive and every semantic role.

   It stayed invisible for thirteen releases because the two consumers load
   os-ds differently. arena-ops loads the flattened `os_ds.css`, where the
   builder has already inlined these imports, so it is unaffected. DiveOS
   imports the SOURCE files through postcss-import, which honoured the spec,
   dropped both, and left `--accent`, `--ink`, `--surface` and every scale
   undefined. Its Tailwind theme hardcodes fallbacks (`var(--accent, #0369A1)`)
   so utilities kept working — but os-ds components carry no fallback, so
   `.dv-btn--primary` computed a TRANSPARENT background there.

   Found by rendering the real app, not by reading CSS: the class-level diff
   between versions reported zero regressions, because tokens are not classes. */
/*
 * 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;

  /* ─── Control size scale — the height of an INTERACTIVE control ──────
     Every control in the system (button, input, select, filter pill,
     segmented option) is one of seven heights. Before this scale they were
     seven independent LITERALS, re-typed per component: .os-btn 36px,
     --sm 32px, --field 46px, --touch 48px, and forms.css / dv_select.css
     spelling those same four numbers again from memory. Nothing tied them
     together, so "the field height" was a number you had to know rather
     than a token you could read — and the numbers had already begun to
     drift (dv_select's small variant is 34px, not the 32px --sm it means).

     WHY a scale AND a resolved trio (below), rather than one token per
     component: a control's height is a property of the SURFACE it sits on,
     not of the control. A desk admin table wants 36px; a handheld used
     one-handed on a boat, in sun, wants 48px. The alternative — adding a
     `--field` twin to each component — is N patches that drift apart, which
     is exactly how we got here. Density is set ONCE on a layout wrapper
     (see tokens/density.css) and every control inside re-sizes.

     --control-h-md (40px) is NEW: the missing rung between --sm (32) and
     --field (46). It exists as a density STEP, not as a per-component
     modifier, so it cannot become the next one-off.

     Paired --control-pad-x-* / --control-fs-* keep a control's horizontal
     padding and label size proportional to its height; a 48px control with
     14px side padding reads as a slab. */
  --control-h-xs:    22px;   /* inline action beside a badge (.os-btn--xs) */
  --control-h-sm:    32px;   /* dense desktop row (.os-btn--sm) */
  --control-h-base:  36px;   /* THE default — desktop admin (.os-btn) */
  --control-h-md:    40px;   /* comfortable desktop / small tablet (new) */
  --control-h-lg:    42px;   /* prominent CTA (.os-btn--lg) */
  --control-h-field: 46px;   /* canonical form-control height (.os-field) */
  --control-h-touch: 48px;   /* 48pt minimum touch target (Fitts's Law) */

  --control-pad-x-xs:    var(--space-2);   /* 8px  */
  --control-pad-x-sm:    var(--space-3);   /* 12px */
  --control-pad-x-base:  14px;             /* px-3.5 — off-grid, see NOTE */
  --control-pad-x-md:    14px;
  --control-pad-x-lg:    var(--space-4);   /* 16px */
  --control-pad-x-field: 14px;
  --control-pad-x-touch: var(--space-5);   /* 20px */
  /* NOTE: 14px is not on the 4px spacing grid. It is the shipped .os-btn
     padding (Tailwind px-3.5) and re-grid-ing it would resize every button
     in both products — a token contract cannot also be a visual redesign.
     Left as a literal so the off-grid value is visible, not laundered. */

  --control-fs-xs:    var(--text-2xs);
  --control-fs-sm:    var(--text-xs);
  --control-fs-base:  var(--text-sm);
  --control-fs-md:    var(--text-sm);
  --control-fs-lg:    var(--text-sm);
  --control-fs-field: var(--text-sm);
  --control-fs-touch: var(--text-sm);

  /* The RESOLVED trio every interactive component reads. Defaults to the
     base step; a density scope (tokens/density.css) re-points these three
     on a wrapper and the whole subtree follows. A component that must NOT
     follow density re-declares them on itself — which is precisely how the
     existing size modifiers stay pinned (see buttons.css). */
  --control-h:     var(--control-h-base);
  --control-pad-x: var(--control-pad-x-base);
  --control-fs:    var(--control-fs-base);

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

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

  /* ─── Width scale — floating-surface widths (popovers, dialogs, panels) ──
     A fixed-width scale so a menu / popover / dialog / side-panel snaps to a
     named step instead of a raw px. Follows the de-facto container-width
     convention (Tailwind max-width, Chakra `sizes`) — 4rem steps; Carbon &
     Polaris drive layout from grid + spacing and ship no floating-surface
     width primitive, so this is the closest applicable reference. Component
     widths (os-pop 320, os-popover 380, side-panel ~560) snap to these. */
  --width-xs: 320px;   /* dropdowns / pickers (os-pop) */
  --width-sm: 384px;   /* small dialogs / popovers (os-popover; 380 → 384) */
  --width-md: 448px;   /* medium dialogs */
  --width-lg: 512px;   /* large dialogs / confirm */
  --width-xl: 576px;   /* side panels / sheets (~560 → 576) */

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

     THREE tiers since v1.11.0. It was two, on the reasoning that "reading pages
     stay wide and cap PROSE with --measure" — which holds for an article and
     fails for a DOCUMENT. A registration card, a folio, a checkout review, a
     statement: these are not prose, so --measure never engages, and they are
     not lists either, so --wide gives them a 1280px field of mostly-empty row.
     Their content is field/value pairs, a signature block, a party table —
     structures that want to sit together, not stretch. --narrow is the other
     failure: a two-column field grid plus a signature pad does not survive
     768px, so consumers were pinning their own local ~900-1000px values, which
     is how six different literals ended up in one app.

     PICK BY WHAT THE PAGE IS, not by how wide it looks right:
       --page-wide     you are scanning MANY records         (board, list, dashboard)
       --page-reading  you are reading or signing ONE record (document, review, receipt)
       --page-narrow   you are answering questions in order  (form, wizard, single column) */
  --page-wide:    1280px;   /* default: lists, kanban, calendar, dashboard, detail, settings */
  --page-reading:  960px;   /* documents: registration cards, folios, statements, reviews */
  --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-rgb holds the accent's raw channels so the alpha-derived tokens
     (soft/softer/border here + input-border-focus/focus-ring/focus-ring-color
     below) compose from ONE source. A re-theming consumer overrides --accent
     AND --accent-rgb (two lines) and every derived surface — including focus
     rings — follows; before this, the six alphas were hardcoded to sky's
     channels, so swapping --accent alone left a half-sky UI. */
  --accent:           var(--sky-700);
  --accent-strong:    var(--sky-800);
  --accent-rgb:       3, 105, 161;             /* sky-700 channels; override when re-theming */
  --accent-soft:      rgba(var(--accent-rgb), 0.08);
  --accent-softer:    rgba(var(--accent-rgb), 0.04);
  --accent-border:    rgba(var(--accent-rgb), 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(var(--accent-rgb), 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(var(--accent-rgb), 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(var(--accent-rgb), 0.35);
  --shadow-focus:   0 0 0 3px var(--focus-ring-color);
  --disabled-opacity: 0.5;
  --transition-base: var(--t-med) var(--ease-standard);
}
/* Control-density SCOPE classes (.os-density--*). Imported last of the three
   so its scope rules land after the :root control defaults they override. */
/*
 * tokens/density.css — the CONTROL DENSITY SCOPE.
 *
 * One class, set ONCE on a layout wrapper, re-points the resolved control
 * trio (--control-h / --control-pad-x / --control-fs, defined in
 * tokens/primitives.css) for everything inside it. Every interactive
 * component in the gem reads that trio, so a handheld or kiosk surface
 * conforms to the design system by declaring its density rather than by
 * minting local classes.
 *
 *   <div class="os-density--touch">   <!-- boat handheld, one-handed, in sun -->
 *     <button class="os-btn os-btn--primary">Check in</button>   <!-- 48px -->
 *   </div>
 *
 * WHY A CLASS, not a data attribute (`[data-density="touch"]`)
 * ----------------------------------------------------------------------
 * Both work; the class wins on four counts specific to THIS gem.
 *   1. Composition. A wrapper very often already carries `class:` in the ERB
 *      helper and pattern partials; adding a token to that string needs no
 *      new helper argument and no rewrite of the tag call to pass a data hash,
 *      at the ~40 call sites that render a layout shell.
 *   2. The prefix contract. `.os-*` IS the gem's public surface (README →
 *      Versioning) and the no-legacy-prefix gate polices it. A data attribute
 *      would be a second, unpoliced public namespace with its own rules.
 *   3. Tooling. hallmark, the alias gate and the component index all read
 *      CLASSES. A density expressed as an attribute is invisible to every
 *      one of them, including the lookalike detector that would otherwise
 *      catch a consumer hand-rolling a 48px button instead of scoping it.
 *   4. Specificity honesty. Attribute and class selectors have identical
 *      specificity, so the attribute buys nothing there — but it DOES read
 *      as configuration rather than styling, which invites consumers to set
 *      it from server state. Density is a layout decision, not data.
 *
 * The counter-argument (an attribute self-documents its allowed values) is
 * answered by this file: the four steps are enumerated here, in one place.
 *
 * SCOPES NEST. The trio is inherited, so an inner scope overrides an outer
 * one — a `--touch` page may hold a `--compact` toolbar. That falls out of
 * the cascade; no extra rules.
 *
 * WHAT DENSITY DOES NOT TOUCH — the back-compat contract.
 * Every explicit size modifier (.os-btn--sm/--lg/--field/--touch/--icon/--xs,
 * .os-field--sm, .os-select--sm …) re-declares the trio ON ITSELF. A
 * declaration on the element always beats one inherited from an ancestor, so
 * a modifier renders at its documented size inside ANY density scope. This is
 * both the compatibility guarantee for pinned consumers and the right
 * semantics: "make this button small" is an instruction about that button.
 * Density only sizes controls that did not ask for a specific size.
 *
 * Loaded via tokens.css after primitives + semantic. Scope rules cannot live
 * in primitives.css: that file is a single :root block by contract.
 */
/* ── The four density steps ──────────────────────────────────────────────
   Named for the SURFACE they describe, not the pixel value, so a consumer
   picks by intent. Each step re-points all three tokens together — height
   without matching padding and label size produces a stretched control. */
/* Dense desktop — data-heavy admin tables, toolbars, filter rows. 32px. */
.os-density--compact {
  --control-h:     var(--control-h-sm);
  --control-pad-x: var(--control-pad-x-sm);
  --control-fs:    var(--control-fs-sm);
}
/* The system default — desktop admin. 36px. Exists as an explicit scope so a
   region can opt BACK OUT of an enclosing --touch/--field scope. */
.os-density--base {
  --control-h:     var(--control-h-base);
  --control-pad-x: var(--control-pad-x-base);
  --control-fs:    var(--control-fs-base);
}
/* Comfortable — small tablet, or a desktop form that wants air without going
   full field height. 40px: the rung that did not exist before v1.6.0, and the
   reason `--sm`-to-`--field` was a 14px cliff consumers papered over locally. */
.os-density--comfortable {
  --control-h:     var(--control-h-md);
  --control-pad-x: var(--control-pad-x-md);
  --control-fs:    var(--control-fs-md);
}
/* Form surfaces — controls align on the canonical 46px field baseline, so a
   button sitting inline with a select or datepicker matches it without the
   per-call-site `.os-btn--field` twin. */
.os-density--field {
  --control-h:     var(--control-h-field);
  --control-pad-x: var(--control-pad-x-field);
  --control-fs:    var(--control-fs-field);
}
/* Handheld / kiosk — 48pt minimum target. The originating case: a dive
   handheld used one-handed on a moving boat in direct sun, where a 32px
   filter button is below a safe target size and the consumer had to keep
   local classes because the gem offered no field-size variant of it. */
.os-density--touch {
  --control-h:     var(--control-h-touch);
  --control-pad-x: var(--control-pad-x-touch);
  --control-fs:    var(--control-fs-touch);
}
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/inter-var-9b45d99b.woff2") format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/GeistMono-Regular-8d81938c.woff2") format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/GeistMono-Medium-0fcc9bdd.woff2") format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/GeistMono-SemiBold-b24349fd.woff2") format('woff2'); }
/* 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. */
.os-sidebar__link, .os-sidebar__owner, :is(.open-row__link, .os-open-row__link), :is(.ledger-row__link, .os-ledger-row__link), :is(.filter-pill, .os-filter-pill), :is(.segmented__option, .os-segmented__option), :is(.tabs__tab, .os-tabs__tab), :is(.settings-sub-nav__link, .os-settings-sub-nav__link), :is(.trip-row__link, .os-trip-row__link), :is(.setting-item--linked, .os-setting-item--linked), :is(.header-zone__action-button, .os-header-zone__action-button), :is(.org-outlet-row, .os-org-outlet-row), :is(.lead-card-clickable__link, .os-lead-card-clickable__link), :is(.run-reopen-row, .os-run-reopen-row) {
  color: inherit;
}
.os-sidebar__link:hover, .os-sidebar__owner:hover, :is(.open-row__link, .os-open-row__link):hover, :is(.ledger-row__link, .os-ledger-row__link):hover, :is(.filter-pill, .os-filter-pill):hover, :is(.segmented__option, .os-segmented__option):hover, :is(.tabs__tab, .os-tabs__tab):hover, :is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover, :is(.trip-row__link, .os-trip-row__link):hover, :is(.setting-item--linked, .os-setting-item--linked):hover, :is(.header-zone__action-button, .os-header-zone__action-button):hover, :is(.org-outlet-row, .os-org-outlet-row):hover, :is(.lead-card-clickable__link, .os-lead-card-clickable__link):hover, :is(.run-reopen-row, .os-run-reopen-row):hover {
  text-decoration-line: none;
  color: inherit;
}
/* Hover background colors set explicitly elsewhere; preserve the
   defined hover states for backgrounds. */
.os-sidebar__link:hover { color: var(--text-primary); }
.os-sidebar__item--active .os-sidebar__link:hover { color: var(--accent-strong); }
:is(.filter-pill, .os-filter-pill):hover { color: var(--text-secondary); }
:is(.filter-pill--active, .os-filter-pill--active):hover { color: var(--accent-strong); }
:is(.segmented__option, .os-segmented__option):hover { color: var(--text-primary); }
:is(.tabs__tab, .os-tabs__tab):hover { color: var(--text-primary); }
:is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover { color: var(--text-primary); }
:is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active) :is(.settings-sub-nav__link, .os-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. */
.os-h1, .os-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 */
.os-h2, .os-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 */
.os-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 */
.os-h4, .os-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 */
.os-h5, .os-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. */
.os-subtitle { font-size: var(--text-md); line-height: var(--leading-md); color: var(--muted); }
/* 16/24 — muted lead-in */
/* Body. */
.os-body-lg  { font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
/* 16/24 — roomy body */
.os-body     { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
/* 14/22 — default body */
.os-small    { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink); }
/* 12/18 — small print */
.os-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);
}
.os-meta {                            /* secondary / supporting line */
  font-size: var(--text-xs);          /* 12px */
  color: var(--muted);
}
/* Mono variant — a dense monospace meta line (cabin/pax/ref codes). Geist Mono
   via --font-mono, one step smaller. Self-contained (carries the muted colour
   so it reads the same standalone or alongside .os-meta). From arena .ao-meta. */
.os-meta--mono {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);         /* 10px */
  color: var(--muted-2);
}
/* Mono numerals — tabular figures for money / IDs / counts (Geist Mono via
   --font-mono). Standalone; the gem previously had .os-mono only SCOPED inside
   header-band/popover. From arena .ao-mono. */
.os-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.os-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. */
.os-figure--confirmed { color: var(--confirmed); }
.os-figure--cancelled { color: var(--cancelled); }
.os-figure--pending   { color: var(--pending); }
.os-figure--accent    { color: var(--accent); }
.os-figure--muted     { color: var(--muted); }
/* notional / de-emphasised figure */
.os-caption {                         /* quietest micro caption */
  font-size: var(--text-2xs);         /* 10px */
  color: var(--muted-2);
}
/* ─── Standalone primitives promoted from arena-ops (HotelOS) 2026-07-25 ──────
   The gem previously had these names only SCOPED (a toolbar divider, a
   setting-item dot, a sum-prog row). These are the general-purpose standalone
   versions. Token-only. */
/* Divider — a hairline separator. --thin stretches to fill a flex row (a
   section rule between a label and the row edge); was arena .ao-rule. */
.os-divider { border: 0; margin: 0; height: 1px; background: var(--hairline); }
.os-divider--thin { flex: 1; height: 1px; align-self: center; background: var(--hairline); }
/* Dot — a small status dot; colour via currentColor so a parent/inline colour
   drives it. --lit adds a soft ring. Was arena .ao-dot. */
.os-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; flex: none; }
.os-dot--lit { box-shadow: 0 0 0 3px var(--accent-soft); }
/* Row — a general list row: flex, vertically CENTRED (the scoped sum-prog row
   was baseline-aligned), hover highlight. Was arena .ao-row. */
.os-row { display: flex; align-items: center; gap: var(--space-3); transition: background var(--t-fast) var(--ease-standard); }
.os-row:hover { background: var(--canvas); }
/* ─── Section label ─────────────────────────────────────────────────── */
:is(.section-label, .os-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. */
.os-stack  { display: flex; flex-direction: column; gap: var(--space-3); }
/* 12 */
.os-inline { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* 8 */
/* Gap steps (both Stack + Inline). */
.os-stack--xs, .os-inline--xs { gap: var(--space-1); }
/* 4 */
.os-stack--sm, .os-inline--sm { gap: var(--space-2); }
/* 8 */
.os-stack--md, .os-inline--md { gap: var(--space-3); }
/* 12 */
.os-stack--lg, .os-inline--lg { gap: var(--space-4); }
/* 16 */
.os-stack--xl, .os-inline--xl { gap: var(--space-6); }
/* 24 */
/* Cross-axis + main-axis modifiers. */
.os-stack--center    { align-items: center; }
.os-inline--top      { align-items: flex-start; }
.os-inline--baseline { align-items: baseline; }
.os-inline--between  { justify-content: space-between; }
.os-inline--end      { justify-content: flex-end; }
.os-inline--nowrap   { flex-wrap: nowrap; }
/* ─── KPI strip ─────────────────────────────────────────────────────── */
:is(.kpi-strip, .os-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);
}
:is(.kpi-strip__stat, .os-kpi-strip__stat) {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
:is(.kpi-strip__value, .os-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;
}
:is(.kpi-strip__label, .os-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/. ──────── */
:is(.stat-band, .os-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;
}
:is(.stat-band__cell, .os-stat-band__cell) {
  padding: 18px 20px;
  border-left: 1px solid var(--hairline-2);
}
:is(.stat-band__cell, .os-stat-band__cell):first-child { border-left: 0; }
:is(.stat-band__label, .os-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);
}
:is(.stat-band__value, .os-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);
}
:is(.stat-band__unit, .os-stat-band__unit) { font-size: 0.6em; font-weight: 500; color: var(--muted); }
:is(.stat-band__value--display, .os-stat-band__value--display) { font-family: var(--font-display); font-variant-numeric: normal; }
:is(.stat-band__value--positive, .os-stat-band__value--positive)  { color: var(--status-confirmed-fg); }
:is(.stat-band__value--attention, .os-stat-band__value--attention) { color: var(--status-briefing-fg); }
:is(.stat-band__value--negative, .os-stat-band__value--negative)  { color: var(--status-cancelled-fg); }
:is(.stat-band__value--empty, .os-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. */
:is(.stat-band--vertical, .os-stat-band--vertical) { grid-template-columns: 1fr; }
:is(.stat-band--vertical, .os-stat-band--vertical) :is(.stat-band__cell, .os-stat-band__cell) { border-left: 0; border-top: 1px solid var(--hairline-2); }
:is(.stat-band--vertical, .os-stat-band--vertical) :is(.stat-band__cell, .os-stat-band__cell):first-child { border-top: 0; }
@media (max-width: 640px) {
  :is(.stat-band, .os-stat-band) { grid-template-columns: repeat(2, 1fr); }
  :is(.stat-band__cell, .os-stat-band__cell):nth-child(odd)   { border-left: 0; }
  :is(.stat-band__cell, .os-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. */
.os-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;
}
.os-stat-card:hover { border-color: var(--hairline-strong); text-decoration: none; }
.os-stat-card--active { border-color: var(--accent); background: var(--accent-softer); }
.os-stat-card--active:hover { border-color: var(--accent); }
.os-stat-card__head { display: flex; align-items: center; gap: var(--space-2); }
.os-stat-card__swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.os-stat-card__label {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--ink);
}
.os-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;
}
.os-stat-card__sub { font-size: var(--text-2xs); font-weight: 500; color: var(--muted); margin-top: 6px; }
.os-stat-card__sub--due { color: var(--briefing); }
/* ─── Header zone ───────────────────────────────────────────────────── */
:is(.header-zone, .os-header-zone) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
:is(.header-zone__title, .os-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;
}
:is(.header-zone__meta, .os-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;
}
:is(.header-zone__actions, .os-header-zone__actions) {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
:is(.header-zone__action-button, .os-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;
}
:is(.header-zone__action-button, .os-header-zone__action-button):hover { background: var(--surface-alt); }
:is(.header-zone__action-button, .os-header-zone__action-button):disabled { opacity: 0.5; cursor: not-allowed; }
:is(.header-zone__action-button--primary, .os-header-zone__action-button--primary) {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
:is(.header-zone__action-button--primary, .os-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. */
:is(.header-zone__action-button--danger, .os-header-zone__action-button--danger) {
  background: transparent;
  color: var(--cancelled);
  border-color: transparent;
}
:is(.header-zone__action-button--danger, .os-header-zone__action-button--danger):hover {
  background: var(--cancelled-bg);
  color: var(--cancelled);
  border-color: var(--cancelled-border);
}
/* ─── Dives surface specifics ──────────────────────────────────────── */
:is(.dives-view-bar, .os-dives-view-bar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 16px;
}
:is(.dives-list, .os-dives-list) {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
:is(.dives-empty, .os-dives-empty) {
  padding: 64px 16px;
  text-align: center;
  color: var(--text-muted);
}
:is(.dives-empty--wide, .os-dives-empty--wide) { padding: 96px 16px 64px; }
:is(.dives-empty__line, .os-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;
}
:is(.dives-empty__hint, .os-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) ──────────────────────── */
:is(.drawer-list, .os-drawer-list) {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
:is(.drawer-empty, .os-drawer-empty) {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
  margin: 8px 0 16px;
}
:is(.drawer-notes, .os-drawer-notes) {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 16px;
}
:is(.drawer-notes--incident, .os-drawer-notes--incident) { color: var(--red-700); }
/* ─── Settings shell layout (T12) ──────────────────────────────────── */
:is(.settings-layout, .os-settings-layout) {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 1023px) {
  :is(.settings-layout, .os-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. */
:is(.settings-grid, .os-settings-grid) {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  margin-top: 8px;
}
:is(.settings-subnav, .os-settings-subnav) { border-right: 1px solid var(--hairline); padding-right: 16px; }
:is(.settings-subnav__items, .os-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) {
  :is(.setting-item, .os-setting-item) { grid-template-columns: auto 1fr; row-gap: 8px; }
  :is(.setting-item__trail, .os-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) {
  :is(.settings-grid, .os-settings-grid) { grid-template-columns: 1fr; gap: 16px; }
  :is(.settings-subnav, .os-settings-subnav) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding-right: 0;
    padding-bottom: 10px;
  }
  :is(.settings-subnav__group, .os-settings-subnav__group) { margin-bottom: 10px; }
  :is(.settings-subnav__items, .os-settings-subnav__items) { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}
:is(.settings-sub-nav, .os-settings-sub-nav) {
  border-right: 1px solid var(--border);
  padding-right: 16px;
}
@media (max-width: 1023px) {
  :is(.settings-sub-nav, .os-settings-sub-nav) { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  :is(.settings-sub-nav__items, .os-settings-sub-nav__items) { display: flex; flex-wrap: wrap; gap: 4px; }
}
:is(.settings-sub-nav__items, .os-settings-sub-nav__items) {
  list-style: none;
  padding: 0;
  margin: 0;
}
:is(.settings-sub-nav__item, .os-settings-sub-nav__item) { position: relative; }
:is(.settings-sub-nav__link, .os-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;
}
:is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}
:is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active) :is(.settings-sub-nav__link, .os-settings-sub-nav__link) {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
:is(.settings-sub-nav__item--active, .os-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) {
  :is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active)::before { display: none; }
}
:is(.settings-content, .os-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). */
.os-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;
}
.os-settings-nav__item:hover, .os-settings-nav__item:focus-visible { background: var(--hover-warm); text-decoration: none; color: var(--ink); }
.os-settings-nav__item svg { color: var(--muted); flex-shrink: 0; }
.os-settings-nav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.os-settings-nav__item.is-active:hover { background: var(--accent-soft); color: var(--accent); }
.os-settings-nav__item.is-active svg { color: var(--accent); }
:is(.settings-link-list, .os-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. */
:is(.settings-status, .os-settings-status) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 16px 0 24px;
  padding: 0;
}
@media (max-width: 1023px) {
  :is(.settings-status, .os-settings-status) { grid-template-columns: 1fr; }
}
:is(.settings-status__row, .os-settings-status__row) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
:is(.settings-status__label, .os-settings-status__label) {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
:is(.settings-status__value, .os-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;
}
:is(.settings-status__row--ok, .os-settings-status__row--ok) :is(.settings-status__value, .os-settings-status__value) {
  color: var(--green-700);
}
:is(.settings-status__row--todo, .os-settings-status__row--todo) :is(.settings-status__value, .os-settings-status__value) {
  color: var(--amber-700);
}
:is(.settings-status__swatch, .os-settings-status__swatch) {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
:is(.settings-status__hint, .os-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. */
:is(.setting-list, .os-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;
}
:is(.setting-list__item, .os-setting-list__item) { margin: 0; }
:is(.setting-item, .os-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;
}
:is(.setting-list__item, .os-setting-list__item):last-child :is(.setting-item, .os-setting-item) { border-bottom: 0; }
:is(.setting-item--linked, .os-setting-item--linked) { cursor: pointer; }
:is(.setting-item--linked, .os-setting-item--linked):hover { background: var(--hover-warm); }
:is(.setting-item__icon, .os-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;
}
:is(.setting-item__body, .os-setting-item__body) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(.setting-item__title, .os-setting-item__title) {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
:is(.setting-item__meta, .os-setting-item__meta) {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
:is(.setting-item__trail, .os-setting-item__trail) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
:is(.setting-item__pill, .os-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;
}
:is(.setting-item__pill--count, .os-setting-item__pill--count) { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
:is(.setting-item__pill--warn, .os-setting-item__pill--warn)  { background: var(--status-briefing-bg);  color: var(--amber-700); border-color: var(--status-briefing-border, var(--border)); }
:is(.setting-item__pill--ok, .os-setting-item__pill--ok)    { background: var(--status-confirmed-bg);  color: var(--green-700); border-color: var(--status-confirmed-border, var(--border)); }
:is(.setting-item__pill, .os-setting-item__pill) :is(.dot, .os-dot) { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
:is(.setting-item__chevron, .os-setting-item__chevron) { color: var(--text-muted); display: inline-flex; align-items: center; }
:is(.setting-item--linked, .os-setting-item--linked):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { :is(.setting-item, .os-setting-item) { transition: none; } }
/* ─── Filter bar ────────────────────────────────────────────────────── */
:is(.filter-bar, .os-filter-strip) {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
}
:is(.filter-bar, .os-filter-strip)::-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. */
:is(.filter-pill, .os-filter-pill) {
  display: inline-flex;
  align-items: center;
  /* A filter pill is deliberately ONE STEP SHORTER than the primary control
     beside it — it is a scoping affordance, not an action, and a strip of
     full-height pills reads as a row of buttons. 8px is that shipped offset
     (36 base minus 28), so at base density this computes to exactly the 28px
     literal it replaces. The 28px floor stops --compact shrinking a pill to
     an unhittable 24.

     THIS IS THE COMPONENT THE AUDIT WAS ABOUT: a filter control frozen at a
     desktop size, with no field or touch variant, on a surface used one-handed
     on a boat. It reaches 40px under .os-density--touch — over the safe target
     size — with no local class and no new per-component modifier. */
  height: max(28px, calc(var(--control-h) - 8px));
  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;
}
:is(.filter-pill, .os-filter-pill):hover { background: var(--canvas); }
:is(.filter-pill--active, .os-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. */
.os-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);
}
.os-opbar__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.os-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);
}
.os-opbar__label svg { color: var(--muted-2); }
.os-opbar__facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.os-opbar__meta { font-size: var(--text-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.os-opbar__meta svg { color: var(--confirmed); }
.os-opbar__dot { color: var(--hairline-strong); }
.os-opbar__files { display: flex; gap: 16px; font-size: var(--text-sm); }
.os-opbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.os-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. */
.os-opbar__qrtoggle { position: relative; }
.os-opbar__qrtoggle > summary { list-style: none; cursor: pointer; }
.os-opbar__qrtoggle > summary::-webkit-details-marker { display: none; }
.os-opbar__qrtoggle > summary::marker { content: ""; }
.os-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;
}
.os-opbar__qr { width: 132px; height: 132px; display: grid; place-items: center; }
.os-opbar__qr svg { width: 100%; height: 100%; display: block; }
.os-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. */
:is(.status-pill, .os-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. */
:is(.status-icon, .os-status-icon) { width: 12px; height: 12px; flex-shrink: 0; }
/* Size modifier (mirrors .dv-badge--sm) */
:is(.status-pill--sm, .os-status-pill--sm) { font-size: var(--text-2xs); padding: 2px 8px; }
/* Shape modifier: square uppercase tag (mirrors .dv-badge--square) */
:is(.status-pill--square, .os-status-pill--square) {
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-2xs);
  padding: 3px 8px;
}
:is(.status-pill__label, .os-status-pill__label) { line-height: 1; }
:is(.status-pill__dot, .os-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. */
:is(.status-pill-dot, .os-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. */
:is(.status-pill--pending, .os-status-pill--pending)   { background: var(--status-pending-bg);   border-color: var(--status-pending-border);   color: var(--status-pending-fg); }
:is(.status-pill--confirmed, .os-status-pill--confirmed) { background: var(--status-confirmed-bg); border-color: var(--status-confirmed-border); color: var(--status-confirmed-fg); }
:is(.status-pill--briefing, .os-status-pill--briefing)  { background: var(--status-briefing-bg);  border-color: var(--status-briefing-border);  color: var(--status-briefing-fg); }
:is(.status-pill--in_water, .os-status-pill--in_water)  { background: var(--status-in-water-bg);  border-color: var(--status-in-water-border);  color: var(--status-in-water-fg); }
:is(.status-pill--returning, .os-status-pill--returning) { background: var(--status-returning-bg); border-color: var(--status-returning-border); color: var(--status-returning-fg); }
:is(.status-pill--completed, .os-status-pill--completed) { background: var(--status-completed-bg); border-color: var(--status-completed-border); color: var(--status-completed-fg); }
:is(.status-pill--cancelled, .os-status-pill--cancelled) { background: var(--status-cancelled-bg); border-color: var(--status-cancelled-border); color: var(--status-cancelled-fg); }
/* NON-STATUS variants. Everything above names a dive/stay STATE; these two name
   an EMPHASIS, for pills that are not statuses at all — a count, a label, a
   flag. Added because a consuming product had built its own tag family whose
   only genuinely missing colours were these two, while its `--alert` and
   `--warn` turned out to be exact duplicates of `--cancelled` and `--briefing`.
   Naming them here keeps a product from re-deriving a parallel pill set just to
   get "accent" and "muted". */
:is(.status-pill--accent, .os-status-pill--accent) { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
:is(.status-pill--muted, .os-status-pill--muted)  { background: var(--surface-alt); border-color: var(--hairline);      color: var(--muted); }
/* 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:is(.status-pill, .os-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:is(.status-pill, .os-status-pill):hover {
  filter: brightness(0.97);
}
button:is(.status-pill, .os-status-pill):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* ─── Open row ──────────────────────────────────────────────────────── */
:is(.open-row, .os-open-row) {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
:is(.open-row__link, .os-open-row__link), :is(.open-row, .os-open-row) > *:not(:has(:is(.open-row__link, .os-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;
}
:is(.open-row__link, .os-open-row__link) { transition: background 150ms ease-out; }
:is(.open-row__link, .os-open-row__link):hover { background: var(--surface-alt); }
:is(.open-row__time-block, .os-open-row__time-block) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
:is(.open-row__time, .os-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;
}
:is(.open-row__time-meta, .os-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;
}
:is(.open-row__body, .os-open-row__body) { min-width: 0; }
:is(.open-row__primary, .os-open-row__primary) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
:is(.open-row__title, .os-open-row__title) {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--text-primary);
}
:is(.open-row__meta, .os-open-row__meta) {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
:is(.open-row__right, .os-open-row__right) {
  text-align: right;
}
:is(.open-row__right-value, .os-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;
}
:is(.open-row__right-label, .os-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 ────────────────────────────────────────────────────── */
:is(.ledger-row, .os-ledger-row) {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
:is(.ledger-row__link, .os-ledger-row__link), :is(.ledger-row, .os-ledger-row) > *:not(:has(:is(.ledger-row__link, .os-ledger-row__link))) {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 16px;
  min-height: 48px;
  text-decoration: none;
  color: inherit;
}
:is(.ledger-row__link, .os-ledger-row__link) { transition: background 150ms ease-out; }
:is(.ledger-row__link, .os-ledger-row__link):hover { background: var(--surface-alt); }
:is(.ledger-row__time, .os-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;
}
:is(.ledger-row__title, .os-ledger-row__title) {
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex: 1;
}
:is(.ledger-row__meta, .os-ledger-row__meta) {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
:is(.ledger-row__value, .os-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) ───────────────────────────────────────────── */
:is(.side-panel, .os-side-panel) {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
:is(.side-panel__header, .os-side-panel__header) {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
:is(.side-panel__eyebrow, .os-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;
}
:is(.side-panel__close, .os-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;
}
:is(.side-panel__close, .os-side-panel__close):hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}
:is(.side-panel__close-icon, .os-side-panel__close-icon) { width: 18px; height: 18px; stroke-width: 1.75; }
:is(.side-panel__title, .os-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). */
:is(.side-panel__title-row, .os-side-panel__title-row) {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
:is(.side-panel__title--inline, .os-side-panel__title--inline) {
  margin: 0;
}
:is(.side-panel__subtitle, .os-side-panel__subtitle) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
:is(.side-panel__meta, .os-side-panel__meta) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
:is(.side-panel__tab-zone, .os-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. */
:is(.side-panel__tab-zone, .os-side-panel__tab-zone) > :is(.tabs, .os-tabs) { padding-left: 24px; padding-right: 24px; }
:is(.side-panel__body, .os-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;
}
:is(.side-panel__action-bar, .os-side-panel__action-bar) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
:is(.side-panel__action-bar-left, .os-side-panel__action-bar-left) { flex: 1; }
:is(.side-panel__action-bar-right, .os-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. */
:is(.side-panel__action-bar--end, .os-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. */
:is(.side-panel--wide, .os-side-panel--wide) { max-width: 560px; }
/* ─── Field grid ────────────────────────────────────────────────────── */
:is(.field-grid, .os-field-grid) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Cancel the stacked-field rhythm inside any field grid — the columns are
   adjacent siblings, so the `.os-field + .os-field` top-margin in forms.css
   would push every non-first cell down and break horizontal alignment across
   columns. The grid `gap` owns spacing. Shared by `.field-grid` and
   `.field-split` so the twin patterns can't drift apart. */
:is(.field-grid, .os-field-grid, .field-split, .os-field-split) .os-field + .os-field { margin-top: 0; }
:is(.field-grid__field--span-2, .os-field-grid__field--span-2) { grid-column: 1 / -1; }
:is(.field-grid__label, .os-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;
}
:is(.field-grid__value, .os-field-grid__value) {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
/* ─── Segmented control ─────────────────────────────────────────────── */
:is(.segmented, .os-segmented) {
  display: inline-flex;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
}
:is(.segmented__option, .os-segmented__option) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Button chrome reset. This component was authored for `<a>` (hence the
     `text-decoration: none` below) and never reset the UA's button styles — so
     rendered as a `<button>`, which is the CORRECT element for a control that
     toggles rather than navigates, the browser's `border: 2px outset` and
     `background: buttonface` showed through and the group read as two
     mismatched boxes instead of one segmented control. Reported by the product
     owner as "the entire page is off"; the measured computed values were
     `border: 2px rgb(0,0,0)` and `background: rgb(239,239,239)`.
     `.os-btn` has always carried this reset; this component simply never did. */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  /* Density is applied to the VERTICAL PADDING, not to a height. A segmented
     option has never declared a height — it is sized by its label's line box
     (~20px) plus 6px of padding, and introducing a min-height here would set
     a floor this component has never had, which could grow an option whose
     label is smaller than the default. Scaling the padding instead leaves the
     natural sizing intact and moves nothing at base density:
     (36 − 24) / 2 = 6px, the exact literal it replaces. The 6px floor holds
     --compact at today's size rather than crushing the option.

     Horizontal padding stays a 12px literal: this control ships 12px, not the
     button's 14px --control-pad-x, and a token contract may not resize it. */
  padding: max(6px, calc((var(--control-h) - 24px) / 2)) 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;
}
:is(.segmented__option, .os-segmented__option):hover { color: var(--text-primary); }
:is(.segmented__option, .os-segmented__option):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
:is(.segmented__option--active, .os-segmented__option--active) {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
:is(.segmented__option--active, .os-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. */
:is(.segmented--field, .os-segmented--field) { display: flex; width: 100%; }
:is(.segmented--field, .os-segmented--field) :is(.segmented__option, .os-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;
}
:is(.segmented__radio, .os-segmented__radio) { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:is(.segmented--field, .os-segmented--field) :is(.segmented__option, .os-segmented__option):has(:is(.segmented__radio, .os-segmented__radio):checked) {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
:is(.segmented--field, .os-segmented--field) :is(.segmented__option, .os-segmented__option):has(:is(.segmented__radio, .os-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. */
:is(.toggle-switch, .os-toggle-switch) {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
:is(.toggle-switch__input, .os-toggle-switch__input) {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
:is(.toggle-switch__track, .os-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;
}
:is(.toggle-switch__knob, .os-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;
}
:is(.toggle-switch__input, .os-toggle-switch__input):checked ~ :is(.toggle-switch__track, .os-toggle-switch__track), :is(.toggle-switch, .os-toggle-switch):has(:is(.toggle-switch__input, .os-toggle-switch__input):checked) :is(.toggle-switch__track, .os-toggle-switch__track) {
  background: var(--accent);
}
:is(.toggle-switch__input, .os-toggle-switch__input):checked ~ :is(.toggle-switch__track, .os-toggle-switch__track) :is(.toggle-switch__knob, .os-toggle-switch__knob), :is(.toggle-switch, .os-toggle-switch):has(:is(.toggle-switch__input, .os-toggle-switch__input):checked) :is(.toggle-switch__knob, .os-toggle-switch__knob) {
  transform: translateX(16px);
}
:is(.toggle-switch__input, .os-toggle-switch__input):focus-visible ~ :is(.toggle-switch__track, .os-toggle-switch__track) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* ─── Tabs ──────────────────────────────────────────────────────────── */
:is(.tabs, .os-tabs) {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
:is(.tabs__tab, .os-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;
}
:is(.tabs__tab, .os-tabs__tab):hover { color: var(--text-primary); }
:is(.tabs__tab, .os-tabs__tab):focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}
:is(.tabs__tab--active, .os-tabs__tab--active) {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
:is(.tabs__count, .os-tabs__count) {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
:is(.tabs__tab--active, .os-tabs__tab--active) :is(.tabs__count, .os-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. */
:is(.equipment-item-status, .os-equipment-item-status) {
  margin-bottom: 12px;
}
:is(.equipment-item-actions, .os-equipment-item-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
:is(.equipment-item-actions, .os-equipment-item-actions) form { margin: 0; }
:is(.equipment-item-actions, .os-equipment-item-actions) :is(.button, .os-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. */
:is(.participant-form__section, .os-participant-form__section) {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
:is(.participant-form__section-summary, .os-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;
}
:is(.participant-form__section-summary, .os-participant-form__section-summary)::-webkit-details-marker { display: none; }
:is(.participant-form__section-summary, .os-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;
}
:is(.participant-form__section, .os-participant-form__section)[open] > :is(.participant-form__section-summary, .os-participant-form__section-summary)::before {
  transform: rotate(90deg);
}
:is(.participant-form__section-hint, .os-participant-form__section-hint) {
  margin-left: 8px;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
:is(.participant-form__section-body, .os-participant-form__section-body) {
  padding: 8px 16px 16px;
  border-top: 1px solid var(--border);
}
:is(.participant-form__empty-hint, .os-participant-form__empty-hint) {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 8px 0;
}
:is(.participant-form__tracked-items, .os-participant-form__tracked-items) {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:is(.participant-form__tracked-item, .os-participant-form__tracked-item) {
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  transition: background 100ms ease-out;
}
:is(.participant-form__tracked-item, .os-participant-form__tracked-item):hover { background: var(--surface-alt); }
:is(.participant-form__tracked-label, .os-participant-form__tracked-label) {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;  /* WCAG AA touch target per design 6C */
}
:is(.participant-form__tracked-input, .os-participant-form__tracked-input) { margin: 0; }
:is(.participant-form__tracked-identifier, .os-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);
}
:is(.participant-form__tracked-meta, .os-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. */
:is(.form-section, .os-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:is(.form, .os-form)[method="post" i], form:is(.form, .os-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:is(.form, .os-form) > :is(.form-section, .os-form-section):not([hidden]) { margin-top: 0; margin-bottom: 18px; }
:is(.form-section__header, .os-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. */
:is(.form-section__icon, .os-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. */
:is(.form-section__title, .os-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. */
:is(.form-section__subtitle, .os-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. */
:is(.form-section__body, .os-form-section__body) { margin-top: 20px; }
:is(.form-section, .os-form-section):has(:is(.form-section__subtitle, .os-form-section__subtitle)) :is(.form-section__body, .os-form-section__body) { margin-top: 32px; }
@media (max-width: 640px) {
  :is(.form-section, .os-form-section) { padding: 18px 16px 20px; }
}
/* ── wizard_layout ──────────────────────────────────────────────────── */
:is(.wizard-layout, .os-wizard-layout) {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 40px;
}
:is(.wizard-layout__header, .os-wizard-layout__header) { margin-bottom: 24px; }
:is(.wizard-layout__title, .os-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;
}
:is(.wizard-layout__subtitle, .os-wizard-layout__subtitle) {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}
:is(.wizard-layout__stepper, .os-wizard-layout__stepper) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
:is(.wizard-layout__step, .os-wizard-layout__step) {
  margin-bottom: 20px;
}
:is(.wizard-layout__actions, .os-wizard-layout__actions) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
:is(.wizard-layout__actions-right, .os-wizard-layout__actions-right) {
  display: flex;
  align-items: center;
  gap: 12px;
}
:is(.wizard-layout__cancel, .os-wizard-layout__cancel), :is(.wizard-layout__back, .os-wizard-layout__back), :is(.wizard-layout__next, .os-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;
}
:is(.wizard-layout__cancel, .os-wizard-layout__cancel) {
  color: var(--text-muted);
}
:is(.wizard-layout__cancel, .os-wizard-layout__cancel):hover { color: var(--text-primary); }
:is(.wizard-layout__back, .os-wizard-layout__back) {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
:is(.wizard-layout__back, .os-wizard-layout__back):hover { background: var(--surface-alt); }
:is(.wizard-layout__next, .os-wizard-layout__next) {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
:is(.wizard-layout__next, .os-wizard-layout__next):hover { background: var(--accent-strong); border-color: var(--accent-strong); }
@media (max-width: 640px) {
  :is(.wizard-layout, .os-wizard-layout) { padding: 20px 16px; }
  :is(.wizard-layout__stepper, .os-wizard-layout__stepper) { padding: 14px; }
  /* Stack action bar vertically + full width on mobile. */
  :is(.wizard-layout__actions, .os-wizard-layout__actions) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  :is(.wizard-layout__actions-right, .os-wizard-layout__actions-right) {
    flex-direction: column;
    align-items: stretch;
  }
  :is(.wizard-layout__cancel, .os-wizard-layout__cancel), :is(.wizard-layout__back, .os-wizard-layout__back), :is(.wizard-layout__next, .os-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. */
:is(.hero-show, .os-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. */
:is(.hero-show__band, .os-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). */
:is(.page-header, .os-page-header) { margin-top: calc(-1 * var(--shell-pad-top, 40px)); padding-top: var(--space-8); padding-bottom: var(--space-6); }
:is(.page-header, .os-page-header) :is(.hero-show__breadcrumb, .os-hero-show__breadcrumb) { margin-bottom: 16px; }
:is(.page-header__row, .os-page-header__row) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
:is(.page-header__actions, .os-page-header__actions) { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) { :is(.page-header, .os-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. */
:is(.form-page, .os-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). */
:is(.field-row, .os-field-row) { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
:is(.field-w-116, .os-field-w-116) { width: 116px; }
:is(.field-w-168, .os-field-w-168) { width: 168px; }
:is(.field-w-116, .os-field-w-116) :where(.os-input, input[type], select), :is(.field-w-168, .os-field-w-168) :where(.os-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. */
:is(.field-split, .os-field-split) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
/* Stacked-field rhythm neutralized by the shared field-grid/field-split reset
   in the Field grid section above. */
/* Inline unit suffix (e.g. % on a commission rate) — sits in the input, not
   as a hint below. */
:is(.field-pct, .os-field-pct) .os-field__input { position: relative; }
:is(.field-pct, .os-field-pct) .os-field__input::after {
  content: "%"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm); color: var(--muted); pointer-events: none;
}
:is(.field-pct, .os-field-pct) .os-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 :is(.trix-button-row, .os-trix-button-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
trix-toolbar :is(.trix-button-group, .os-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 :is(.trix-button, .os-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 :is(.trix-button-group, .os-trix-button-group) :is(.trix-button, .os-trix-button):first-child { border-left: 0; }
trix-toolbar :is(.trix-button, .os-trix-button)::before { opacity: 0.65; }
trix-toolbar :is(.trix-button, .os-trix-button):not(:disabled):hover { background: var(--surface-alt); }
trix-toolbar :is(.trix-button, .os-trix-button):not(:disabled):hover::before { opacity: 0.9; }
trix-toolbar :is(.trix-button, .os-trix-button):is(.trix-active, .os-trix-active) {
  background: var(--accent-soft);
}
trix-toolbar :is(.trix-button, .os-trix-button):is(.trix-active, .os-trix-active)::before { opacity: 1; }
trix-toolbar :is(.trix-button, .os-trix-button):disabled::before { opacity: 0.25; }
:is(.hero-show__back-row, .os-hero-show__back-row) { margin-bottom: 18px; }
:is(.hero-show__back-link, .os-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;
}
:is(.hero-show__back-link, .os-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. */
:is(.hero-show__header, .os-hero-show__header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
:is(.hero-show__identity, .os-hero-show__identity) {
  flex: 1;
  min-width: 0;
}
:is(.hero-show__title-row, .os-hero-show__title-row) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
:is(.hero-show__title, .os-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. */
:is(.hero-show__meta, .os-hero-show__meta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}
:is(.hero-show__meta-id, .os-hero-show__meta-id) {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
:is(.hero-show__meta-dot, .os-hero-show__meta-dot) { font-size: var(--text-xl); line-height: 0; color: var(--muted-2); }
:is(.hero-show__meta-item, .os-hero-show__meta-item) { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
:is(.hero-show__meta-item, .os-hero-show__meta-item) i, :is(.hero-show__meta-item, .os-hero-show__meta-item) svg { color: var(--muted-2); flex-shrink: 0; }
:is(.hero-show__actions, .os-hero-show__actions) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
:is(.hero-show__action, .os-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;
}
:is(.hero-show__action--primary, .os-hero-show__action--primary) {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
:is(.hero-show__action--primary, .os-hero-show__action--primary):hover { background: var(--accent-strong); border-color: var(--accent-strong); }
:is(.hero-show__action--secondary, .os-hero-show__action--secondary) {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
:is(.hero-show__action--secondary, .os-hero-show__action--secondary):hover { background: var(--surface-alt); }
:is(.hero-show__action--danger, .os-hero-show__action--danger) {
  color: var(--cancelled);
  background: var(--surface);
  border-color: var(--hairline);
}
:is(.hero-show__action--danger, .os-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. */
:is(.hero-show__action-form, .os-hero-show__action-form) { display: inline-flex; margin: 0; }
/* Breadcrumb row — replaces the back link on catalog-detail headers. */
:is(.hero-show__breadcrumb, .os-hero-show__breadcrumb) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: var(--text-sm);
}
:is(.hero-show__crumb, .os-hero-show__crumb) { color: var(--muted); text-decoration: none; }
:is(.hero-show__crumb, .os-hero-show__crumb):hover { color: var(--ink); }
:is(.hero-show__crumb--current, .os-hero-show__crumb--current) { color: var(--ink); font-weight: 600; }
:is(.hero-show__crumb-sep, .os-hero-show__crumb-sep) { display: inline-flex; color: var(--muted-2); }
/* Eyebrow pill — category/type marker above the title. */
:is(.hero-show__eyebrow, .os-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);
}
:is(.hero-show__eyebrow, .os-hero-show__eyebrow) svg { color: var(--muted-2); }
/* Subtitle helper line under the title. */
:is(.hero-show__subtitle, .os-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. */
:is(.hero-rail-card, .os-hero-rail-card) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2px 20px;
}
:is(.hero-rail-stat, .os-hero-rail-stat) {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-2);
}
:is(.hero-rail-stat, .os-hero-rail-stat):last-child { border-bottom: 0; }
:is(.hero-rail-stat__lbl, .os-hero-rail-stat__lbl) {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
:is(.hero-rail-stat__val, .os-hero-rail-stat__val) {
  margin-top: 6px;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
:is(.hero-rail-stat__unit, .os-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. */
:is(.hero-content-card, .os-hero-content-card) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
:is(.hero-content-card__head, .os-hero-content-card__head) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
:is(.hero-content-card__title, .os-hero-content-card__title) {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
:is(.hero-content-card__body, .os-hero-content-card__body) {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
}
:is(.hero-show__body--one-col, .os-hero-show__body--one-col) :is(.hero-show__main, .os-hero-show__main) { width: 100%; }
:is(.hero-show__body--two-col, .os-hero-show__body--two-col) {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}
:is(.hero-show__rail, .os-hero-show__rail) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024px) {
  :is(.hero-show__body--two-col, .os-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) {
  :is(.hero-show__header, .os-hero-show__header) { flex-wrap: wrap; }
  :is(.hero-show__identity, .os-hero-show__identity) { flex: 1 1 100%; }
  :is(.hero-show__actions, .os-hero-show__actions) { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  :is(.hero-show__band, .os-hero-show__band) { margin-top: -56px; }
  :is(.hero-show__header, .os-hero-show__header) {
    flex-direction: column;
    gap: 16px;
  }
  :is(.hero-show__actions, .os-hero-show__actions) {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  :is(.hero-show__action, .os-hero-show__action) { justify-content: center; }
}
/* ── empty_state ────────────────────────────────────────────────────── */
:is(.empty-state, .os-empty-state) {
  text-align: center;
  padding: 40px 16px;
}
/* Composed onto a card. `.os-card` sets `padding: 0` because it expects a
   `__body` child to own the inset — so `class="os-card os-empty-state"` on ONE
   element loses this pattern's padding entirely: both are single-class
   selectors and card.css is bundled after patterns.css, so the zero wins.
   Callers reach for that combination constantly (an empty state IS the whole
   card when a list is empty), and the failure is silent — the text simply runs
   to the card's edge. Two classes out-specify one, so this restores the inset
   regardless of bundle order. Found in arena-ops at 30 callsites across 26
   files: every settings index, most guest-portal empty states, and both
   portal gate pages. */
:is(.empty-state, .os-empty-state):is(.card, .os-card) {
  padding: 40px 16px;
}
:is(.empty-state__icon, .os-empty-state__icon) {
  color: var(--text-muted);
  margin: 0 auto 12px;
  display: block;
}
:is(.empty-state__message, .os-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. */
:is(.empty-state, .os-empty-state):has(:is(.empty-state__description, .os-empty-state__description)) :is(.empty-state__message, .os-empty-state__message) {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}
:is(.empty-state__description, .os-empty-state__description) {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}
:is(.empty-state__actions, .os-empty-state__actions) {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
:is(.empty-state__action, .os-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;
}
:is(.empty-state__action--primary, .os-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)`). */
}
:is(.empty-state__action--primary, .os-empty-state__action--primary):hover { text-decoration: underline; }
:is(.empty-state__actions, .os-empty-state__actions):has(:is(.empty-state__action--secondary, .os-empty-state__action--secondary)) :is(.empty-state__action--primary, .os-empty-state__action--primary) {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
:is(.empty-state__actions, .os-empty-state__actions):has(:is(.empty-state__action--secondary, .os-empty-state__action--secondary)) :is(.empty-state__action--primary, .os-empty-state__action--primary):hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  text-decoration: none;
}
:is(.empty-state__action--secondary, .os-empty-state__action--secondary) {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
:is(.empty-state__action--secondary, .os-empty-state__action--secondary):hover { background: var(--surface-alt); }
/* ── loading_state ──────────────────────────────────────────────────── */
:is(.loading-state, .os-loading-state) {
  padding: 12px 0;
}
:is(.loading-state__row, .os-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) {
  :is(.loading-state__row, .os-loading-state__row) { animation: none; opacity: 0.8; }
}
/* ── stepper ──────────────────────────────────────────────────────────────
   Vertical progress rail: a dot+connector spine with a label/meta body per
   step. States — --done (confirmed dot + tinted line), --active (accent dot
   with focus-style ring), --last (drops the trailing line). Distinct from the
   wizard-layout chrome (that is page layout); this is the reusable progress
   primitive. Promoted from arena-ops (HotelOS `hos-vstep`) 2026-07-25.
   Token-only. */
.os-stepper { display: flex; gap: 12px; align-items: flex-start; }
.os-stepper__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.os-stepper__dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  color: var(--muted-2);
}
.os-stepper__line { width: 2px; height: 20px; background: var(--hairline); }
.os-stepper__body { padding-top: 3px; padding-bottom: 8px; min-width: 0; }
.os-stepper__label { font-size: var(--text-sm); color: var(--muted); }
.os-stepper__meta { font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; }
.os-stepper__meta--mono { font-family: var(--font-mono); }
.os-stepper--done .os-stepper__dot  { background: var(--confirmed-bg); color: var(--confirmed); }
.os-stepper--done .os-stepper__line { background: var(--confirmed); opacity: 0.35; }
.os-stepper--done .os-stepper__label { color: var(--ink); }
.os-stepper--active .os-stepper__dot { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.os-stepper--active .os-stepper__label { color: var(--ink); font-weight: 600; }
.os-stepper--active .os-stepper__meta { color: var(--accent); }
.os-stepper--last .os-stepper__body { padding-bottom: 0; }
.os-stepper--last .os-stepper__line { display: none; }
/* ── timeline ─────────────────────────────────────────────────────────────
   Numbered node/line/content timeline: a marker column (numbered circle +
   connector) beside a content block, one per node. --board recolours the
   marker as context (not a logged item); --last drops the trailing pad. An
   optional __link makes the content a focusable row. Promoted from dive-os
   (account `dv-timeline`) 2026-07-25. Token-only. */
.os-timeline { list-style: none; margin: 0; padding: 0 16px; }
.os-timeline__node { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; }
.os-timeline__marker-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 24px; padding-top: 2px; }
.os-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;
}
.os-timeline__number--board { background: var(--surface-alt); border-color: var(--hairline-strong); color: var(--muted); }
.os-timeline__line { width: 1.5px; flex: 1; min-height: 16px; background: var(--hairline); margin-top: 4px; }
.os-timeline__content { flex: 1; min-width: 0; padding-bottom: 20px; }
.os-timeline__node--last .os-timeline__content { padding-bottom: 8px; }
.os-timeline__link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.os-timeline__link:hover .os-timeline__title { color: var(--accent); }
.os-timeline__link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: var(--radius-sm); }
.os-timeline__title { font-size: var(--text-sm); font-weight: 500; color: var(--ink); line-height: 1.4; transition: color 0.12s; }
.os-timeline__meta { font-size: var(--text-xs); color: var(--muted); }
/* 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 ─────────────────────────────────────────────────── */
/* Element-anchored on purpose. `.os-body` is ALSO the gem's typography
   utility (14/22 body text), so a bare `:is(.diveos-body, .os-body)` selector
   leaked this whole structural block — `min-height: 100vh`, margin, background,
   font — onto every `<p class="os-body">`, stretching paragraphs to a full
   viewport tall (the "massive spacing"). Anchoring to `body` means only the
   real page body can ever match; typography `.os-body` on a <p>/<div> stays
   pure type. (arena-ops sidesteps this entirely with a dedicated
   `.hos-shell-body` name.) Guarded by test/lint/os_body_shell_scope_test.rb. */
body:is(.diveos-body, .os-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;
}
:is(.diveos-shell, .os-shell) {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
/* ─── Mobile hamburger ─────────────────────────────────────────────── */
:is(.diveos-hamburger, .os-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;
}
:is(.diveos-hamburger, .os-hamburger):hover { background: var(--surface-alt); }
/* ─── Sidebar ──────────────────────────────────────────────────────── */
:is(.diveos-sidebar, .os-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;
}
:is(.diveos-sidebar__brand, .os-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. */
:is(.diveos-sidebar__cta, .os-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. */
:is(.diveos-sidebar__brand-link, .os-sidebar__brand-link) { color: inherit; }
:is(.diveos-sidebar__brand-link, .os-sidebar__brand-link):hover :is(.diveos-sidebar__product, .os-sidebar__product) { color: var(--accent-strong); }
:is(.diveos-sidebar__product, .os-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;
}
:is(.diveos-sidebar__tenant, .os-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;
}
:is(.diveos-sidebar__nav, .os-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). */
:is(.diveos-sidebar__nav, .os-sidebar__nav) :is(.section-label, .os-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);
}
:is(.diveos-sidebar__nav, .os-sidebar__nav) :is(.section-label, .os-section-label):first-child { margin-top: 0; }
:is(.diveos-sidebar__items, .os-sidebar__items) {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
:is(.diveos-sidebar__item, .os-sidebar__item) {
  position: relative;
}
:is(.diveos-sidebar__link, .os-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;
}
:is(.diveos-sidebar__link, .os-sidebar__link):hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}
:is(.diveos-sidebar__item--active, .os-sidebar__item--active) :is(.diveos-sidebar__link, .os-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. */
:is(.diveos-sidebar__item--active, .os-sidebar__item--active)::before { content: none; }
:is(.diveos-sidebar__label, .os-sidebar__label) { line-height: 1.2; }
:is(.diveos-sidebar__badge, .os-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 ─────────────────────────────────────────────────── */
:is(.diveos-sidebar__owner-trigger, .os-sidebar__owner-trigger) { position: relative; }
:is(.diveos-sidebar__owner, .os-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;
}
:is(.diveos-sidebar__owner, .os-sidebar__owner):hover { background: var(--surface-alt); }
:is(.diveos-sidebar__avatar, .os-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;
}
:is(.diveos-sidebar__owner-text, .os-sidebar__owner-text) { min-width: 0; flex: 1; }
:is(.diveos-sidebar__owner-label, .os-sidebar__owner-label) {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
:is(.diveos-sidebar__owner-name, .os-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;
}
:is(.diveos-sidebar__owner-role, .os-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) */
:is(.diveos-sidebar__owner-menu, .os-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;
}
:is(.diveos-sidebar__owner-menu, .os-sidebar__owner-menu):is(.hidden, .os-hidden) { display: none; }
:is(.diveos-sidebar__owner-menu-item, .os-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;
}
:is(.diveos-sidebar__owner-menu-item, .os-sidebar__owner-menu-item):hover { background: var(--bg); }
:is(.diveos-sidebar__owner-menu-item--divided, .os-sidebar__owner-menu-item--divided) {
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
/* ─── Main pane ────────────────────────────────────────────────────── */
:is(.diveos-main, .os-shell-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;
}
:is(.diveos-content, .os-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)));
}
:is(.diveos-content--narrow, .os-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. */
:is(.dv-measure, .os-measure) { max-width: var(--measure); }
/* Tighter caps for larger text — line length shrinks as size grows (Practical UI). */
:is(.dv-measure--lg, .os-measure--lg)      { max-width: var(--measure-lg); }
:is(.dv-measure--display, .os-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. */
:is(.diveos-main--bleed, .os-shell-main--bleed) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
:is(.diveos-content--bleed, .os-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) ───────────────────── */
:is(.side-drawer, .os-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;
}
:is(.side-drawer, .os-side-drawer) > * { min-height: 0; height: 100%; width: 100%; }
:is(.side-drawer, .os-side-drawer):is(.side-drawer--open, .os-side-drawer--open) {
  transform: translateX(0);
  pointer-events: auto;
}
:is(.side-drawer, .os-side-drawer)::-webkit-scrollbar { width: 8px; }
:is(.side-drawer, .os-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. */
:is(.side-drawer-scrim, .os-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;
}
:is(.side-drawer-scrim--visible, .os-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. */
:is(.diveos-scrim, .os-scrim) { display: none; }
/* ─── Responsive: mobile (< 1024px) ────────────────────────────────── */
@media (max-width: 1023px) {
  :is(.diveos-shell, .os-shell) { grid-template-columns: 1fr; }
  :is(.diveos-hamburger, .os-hamburger) { display: inline-flex; }
  :is(.diveos-sidebar, .os-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;
  }
  :is(.diveos-shell--menu-open, .os-shell--menu-open) :is(.diveos-sidebar, .os-sidebar) { transform: translateX(0); }
  :is(.diveos-shell--menu-open, .os-shell--menu-open) :is(.diveos-scrim, .os-scrim) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 32, 0.45);
  }
  :is(.diveos-content, .os-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) {
  :is(.info-strip, .os-info-strip) { grid-template-columns: 1fr; }
  :is(.info-strip__cell, .os-info-strip__cell) { border-right: 0; }
  :is(.info-strip__cell, .os-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. */
  :is(.side-drawer, .os-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. */
:is(.diveos-sidebar, .os-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. */
:is(.diveos-shell, .os-shell) {
  transition: grid-template-columns var(--t-slow) var(--ease-out-quart);
}
/* Rail-collapse is a DESKTOP-only affordance. Below 1024px the sidebar is a
   full slide-in DRAWER, so a remembered collapse (localStorage) must NOT apply:
   it would reserve a 68px grid column that squeezes the page, and shrink the
   opened drawer to an icon rail. Every `.is-rail-collapsed` rule is therefore
   scoped to ≥1024px; on mobile the menu is always expanded. */
@media (min-width: 1024px) {
  :is(.diveos-shell, .os-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. */
:is(.diveos-sidebar__collapse, .os-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;
}
:is(.diveos-sidebar__collapse, .os-sidebar__collapse):hover { background: var(--surface-alt); color: var(--ink); }
/* ── collapsed state (desktop only — see the note on the grid rule above) ── */
@media (min-width: 1024px) {
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar, .os-sidebar) { width: 68px; padding: 24px 0 16px; }

/* brand: hide the text block, center the logo, drop the toggle below it */
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__brand, .os-sidebar__brand) {
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__brand-link, .os-sidebar__brand-link) { justify-content: center; }
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__brand-link, .os-sidebar__brand-link) > div { display: none; }
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__collapse, .os-sidebar__collapse) { margin-left: 0; }

/* CTA → icon-only 40px accent square */
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__cta, .os-sidebar__cta) {
  width: 40px;
  height: 40px;
  margin: 0 auto 24px;
  padding: 0;
}
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__cta, .os-sidebar__cta) i, :is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__cta, .os-sidebar__cta) svg { margin: 0; }
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__cta, .os-sidebar__cta) :is(.pkb-cta-label, .os-pkb-cta-label) { display: none; }

/* nav: section labels → a hairline divider; items → icon-only */
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__nav, .os-sidebar__nav) { padding: 0 10px; }
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__nav, .os-sidebar__nav) :is(.section-label, .os-section-label) {
  height: 1px;
  margin: 14px 8px 8px;
  padding: 0;
  background: var(--hairline);
  overflow: hidden;
  text-indent: -9999px;
}
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__link, .os-sidebar__link) {
  justify-content: center;
  padding: 9px 0;
}
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__label, .os-sidebar__label), :is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__badge, .os-sidebar__badge) { display: none; }
/* active item: just the accent icon on accent-soft (no left bar in collapsed) */
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__item--active, .os-sidebar__item--active) :is(.diveos-sidebar__link, .os-sidebar__link) {
  background: var(--accent-soft);
}

/* owner footer → avatar only */
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__owner, .os-sidebar__owner) {
  justify-content: center;
  padding: 8px 0;
}
:is(.diveos-shell, .os-shell).is-rail-collapsed :is(.diveos-sidebar__owner-text, .os-sidebar__owner-text) { display: none; }
}
/* respect reduced-motion for the width glide */
@media (prefers-reduced-motion: reduce) {
  :is(.diveos-sidebar, .os-sidebar) { transition: none; }
}
/* Form field substrate (.diveos-input, .diveos-label, .diveos-button, etc.).
   Consumed by the FormBuilder (T5) and the ejected shared/fields/* partials
   (T6). The COMPONENT is the gem's; diveos_forms.css now carries only the
   DiveOS variants os-ds lacks and MUST load after it.

   NOTE: DiveOS imports gem files individually rather than the bundled
   os_ds.css, so a gem component that is not listed here simply never loads.
   forms.css was in the package but unimported — deleting the local copy
   without adding this line left the form components undefined. */
/* forms.css — the shared FORM substrate, promoted into the gem (was
   `diveos_forms.css`, duplicated BYTE-FOR-BYTE in arena-ops and dive-os).
   Third promotion after header_band: label/input/select/textarea/hint/error,
   field + form-actions, check/radio, and the legacy .diveos-button family.

   Class names are kept AS-IS (`.diveos-*`) so the promotion is a pure move —
   every form callsite in both consumers keeps working. A `.dv-*` alias pass is
   a separate, later step; renaming here would break two apps at once.

   Consumers: delete your local `diveos_forms.css` and drop its
   `stylesheet_link_tag` once you are on this version. */
/* 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). */
:is(.form-section__body, .os-form-section__body) > * + * { margin-top: 22px; }
.os-field + .os-field { margin-top: 22px; }
.os-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.os-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. */
.os-input, .os-field-select, .os-textarea {
  display: block;
  width: 100%;
  /* Height is PINNED to the button scale so an input and the button beside it
     line up (a control row is the common case: "Record… [Save]", search +
     submit, a filter + apply). Before this, an input was implicitly ~40px from
     padding while .os-btn is a fixed 36px, so every inline pairing sat a few
     px off — visible app-wide. --sm matches .os-btn--sm. box-sizing keeps the
     border inside the declared height.

     Since v1.6.0 that pinning is literal: the input reads the SAME
     --control-h token .os-btn does, so the two cannot drift apart again and
     both follow an .os-density--* scope together. Padding stays a literal
     pair — an input's 12px inset is tighter than a button's 14px by design
     (the caret needs less shoulder than a centred label), so it is not the
     same value and must not be tokenised as if it were. */
  box-sizing: border-box;
  min-height: var(--control-h);   /* 36px at base density — .os-btn */
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--control-fs);
  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;
}
/* Small control row — pairs with .os-btn--sm (32px). */
.os-input--sm, .os-field-select--sm {
  --control-h:  var(--control-h-sm);    /* 32px — .os-btn--sm */
  --control-fs: var(--control-fs-sm);   /* 12px */
  padding: 6px 10px;
}
/* (A textarea is multi-line — its own min-height: 96px below overrides the
   control height set above.) */
.os-input:hover, .os-field-select:hover, .os-textarea:hover {
  border-color: var(--input-border-hover);
}
.os-input:focus, .os-field-select:focus, .os-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.os-input:disabled, .os-field-select:disabled, .os-textarea:disabled {
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}
.os-input::-moz-placeholder, .os-textarea::-moz-placeholder {
  color: var(--input-placeholder);
}
.os-input::placeholder, .os-textarea::placeholder {
  color: var(--input-placeholder);
}
.os-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. */
/* ══════════════════════════════════════════════════════════════
   DATE / TIME INPUTS — painted by DEFAULT (v1.13.0)
   ══════════════════════════════════════════════════════════════
   Same reasoning as the checkbox in v1.10.0: the default has to be the one you
   want. `<input type="date" class="os-input">` inherited the PLATFORM's calendar
   affordance — on Chrome a small grey glyph in the UA's own weight and colour,
   on Safari a different one — sitting inside a field drawn from our tokens. Two
   vocabularies in one control, and every product hit it because typing the
   obvious thing is what produced it.

   The glyph is now a MASK tinted with `--muted-2`, so it takes the theme's
   colour (and the accent on hover), matches the 1.75 stroke weight the icon set
   uses, and carries no hard-coded colour of its own — the mask is geometry, the
   colour is a token. The native picker still opens on click: this restyles the
   indicator, it does not replace the control.

   Firefox exposes no such pseudo-element and renders no indicator, so it
   degrades to a plain field — the same as before this rule.

   NO MARKUP CHANGE anywhere; every existing date input is repainted as-is. */
.os-input[type="date"],
.os-input[type="time"],
.os-input[type="datetime-local"],
.os-input[type="month"],
.os-input[type="week"] {
  /* iOS refuses to fill the field and centres the value instead unless the UA
     appearance is reset — the value then sits mid-field while the placeholder
     of the input beside it sits at the top. */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.os-input[type="date"]::-webkit-calendar-picker-indicator,
.os-input[type="time"]::-webkit-calendar-picker-indicator,
.os-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.os-input[type="month"]::-webkit-calendar-picker-indicator,
.os-input[type="week"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  background-color: var(--muted-2);
  -webkit-mask: var(--os-cal-glyph) center / 18px 18px no-repeat;
  mask: var(--os-cal-glyph) center / 18px 18px no-repeat;
  -webkit-transition: background-color 120ms var(--ease-standard);
  transition: background-color 120ms var(--ease-standard);
}
.os-input:hover::-webkit-calendar-picker-indicator { background-color: var(--muted); }
.os-input:focus::-webkit-calendar-picker-indicator { background-color: var(--accent); }
/* The calendar geometry, as a mask. `black` is the mask's alpha channel, not a
   colour the user ever sees — the visible colour is the `background-color`
   token above. Declared as a custom property so the five type selectors above
   share one copy of the payload. */
:root {
  --os-cal-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}
/* ══════════════════════════════════════════════════════════════
   SELECT — painted with NO JavaScript (v1.17.0)
   ══════════════════════════════════════════════════════════════
   `.os-field-select` used to leave `appearance: auto`, so the painted select
   existed ONLY behind the `os-select` Stimulus controller. Every bundler-less
   consumer — and every deliberately no-JS surface, like a guest portal that
   runs on plain form posts — got the platform's chevron sitting inside a field
   drawn entirely from our tokens. Same defect the checkbox had in v1.10.0 and
   the date input in v1.13.0, and the same fix: the DEFAULT has to be ours.

   This is the closed state only. `appearance: none` does not touch how the
   option list opens, so mobile still gets the native picker it should have —
   there is no need to gate this by pointer type, and doing so would leave
   touch-capable laptops on the UA chevron.

   THE TINT IS BAKED, and that is a real limitation, not an oversight: a
   `background-image` data-URI cannot read a custom property, and `currentColor`
   does not resolve inside one. The calendar indicator escapes this by being a
   pseudo-element we can `mask` (so it takes `--muted-2`); a `<select>` has no
   such pseudo-element to hang a mask on without masking its text too. The whole
   URL is therefore exposed as `--os-select-chevron` so a product can replace
   the glyph wholesale — geometry and tint together — rather than being stuck
   with ours. The default is `--slate-500` / `--gray-500`, the value `--muted-2`
   resolves to in both shipped themes.

   A consumer that DOES run the `os-select` controller is unaffected: it wraps
   the native select and paints its own trigger, which sits above this. */
:root {
  --os-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.os-field-select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: var(--os-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px 16px;
  /* Room for the glyph plus its gutter: 12 (inset) + 16 (glyph) + 10 (gap).
     Without it a long option value runs under the chevron — which is exactly
     how this shipped before, with the UA arrow jammed against the text. */
  padding-right: 38px;
}
/* Multiple/size selects render a list box, not a closed control — a chevron on
   a list box is a lie. */
.os-field-select[multiple], .os-field-select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 12px;
}
.os-input.is-invalid, .os-field-select.is-invalid, .os-textarea.is-invalid {
  border-color: var(--error);
}
.os-input.is-invalid:focus, .os-field-select.is-invalid:focus, .os-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 10%, transparent);
}
.os-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 6px;
}
.os-field-error {
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: 6px;
}
/* ── Affixed field — a currency symbol or unit INSIDE the control ─────
   WHY THIS EXISTS. Every money input in the system had the same problem: the
   dollar sign was rendered as a separate label beside the box, so the pair
   read as two things and the number lost its meaning the moment the eye left
   the label. DiveOS solved it locally in its booking wizard by hand-building
   a bordered flex box with the symbol inside it; arena-ops, porting that POS
   flow, needed the same thing at every charge line and had nothing to reach
   for. The affix belongs INSIDE the control's border, before the value — it
   is part of the control, not an adornment next to it.

   This EXTENDS the field anatomy rather than replacing it. Label, hint and
   error are unchanged; only the control itself is wrapped.

     div.os-field
       label.os-label
       div.os-field--affix          the control box — owns border and height
         span.os-field__affix       the symbol
         input.os-input             the value
       p.os-hint

   TRAILING AFFIXES fall out of DOM order for free: put .os-field__affix
   AFTER the input and it renders as a unit suffix — kg, %, /night. Nothing
   below is position-specific except the divider rules, which key off
   adjacency rather than a modifier, so both sides work without a variant.

   ONE GOTCHA, worth stating because the failure is silent. The control box
   carries .os-field--affix ALONE, never `os-field os-field--affix`. The base
   class participates in the 22px field-stacking rule above, so pairing them
   would put inter-field margin inside a single field. The modifier is
   therefore self-contained: it redeclares the box styling instead of
   inheriting it. */
.os-field--affix {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  /* The affix box takes over the border, background and height the input
     normally draws, so the two read as one control. Values are the input's,
     token for token, and the height comes from the SAME --control-h an
     .os-input reads — an affixed field and a plain one in the same row line
     up, and both follow an .os-density--* scope together. */
  min-height: var(--control-h);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: border-color 100ms ease, box-shadow 100ms ease;
  /* Keeps the affix's tint off the rounded corners. */
  overflow: hidden;
}
.os-field--affix:hover {
  border-color: var(--input-border-hover);
}
/* The ring moves to the WHOLE box: the input inside has no visible edge left
   to ring, and ringing an invisible child would draw a rectangle floating
   inside the control. Not :focus-visible — a text field rings on any focus,
   which is what .os-input already does. */
.os-field--affix:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}
.os-field--affix.is-invalid {
  border-color: var(--error);
}
.os-field--affix.is-invalid:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 10%, transparent);
}
/* The symbol. Monospace and muted so it stays subordinate to the number it
   qualifies, and non-selectable so dragging across the value to copy it does
   not carry a stray dollar sign into the clipboard. */
.os-field__affix {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-inline: 12px;
  font-family: var(--font-mono);
  font-size: var(--control-fs);
  color: var(--text-muted);
  background: var(--surface-alt);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
/* A hairline where the affix meets the value, on whichever side it sits.
   Adjacency, not a modifier — see the trailing note above. */
.os-field__affix + * { border-inline-start: 1px solid var(--input-border); }
* + .os-field__affix  { border-inline-start: 1px solid var(--input-border); }
/* A quieter affix for the money case, where a boxed, ruled `$` is heavier
   than the symbol deserves: no fill, no divider, just the glyph tucked
   against the number. This is the DiveOS price-field reading. */
.os-field--affix-flush .os-field__affix {
  background: transparent;
  padding-inline-end: 0;
  border: 0;
}
.os-field--affix-flush .os-field__affix + * { border-inline-start: 0; }
.os-field--affix-flush * + .os-field__affix { border-inline-start: 0; }
.os-field--affix-flush .os-field__affix + .os-input { padding-inline-start: 4px; }
/* The input surrenders its own chrome to the box around it. Descendant
   selector rather than a required extra class: the wrapper is what makes it
   affixed, so the consumer should not have to say so twice. */
.os-field--affix .os-input, .os-field--affix .os-field-select {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}
.os-field--affix .os-input:hover, .os-field--affix .os-field-select:hover {
  border-color: transparent;
}
.os-field--affix .os-input:focus, .os-field--affix .os-field-select:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
/* A money value reads right-aligned and tabular so decimal points stack down
   a column of charges. Opt-in — an affixed field is not always money. */
.os-field--affix-numeric .os-input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.os-field--affix-numeric .os-input::-webkit-outer-spin-button,
.os-field--affix-numeric .os-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.os-field--affix-numeric .os-input[type="number"] {
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}
/* Size modifiers redeclare the trio on themselves, pinning them against an
   enclosing density scope — the v1.6.0 back-compat rule. */
.os-field--affix-sm {
  --control-h:  var(--control-h-sm);
  --control-fs: var(--control-fs-sm);
}
.os-field--affix-sm .os-input { padding: 6px 10px; }
/* Intrinsic width, for an affixed field sitting inline in a line-item row
   rather than filling a form column. */
.os-field--affix-inline {
  display: inline-flex;
  width: auto;
}
/* ══════════════════════════════════════════════════════════════
   CHECKBOX / RADIO — painted by DEFAULT (v1.10.0)
   ══════════════════════════════════════════════════════════════
   WHAT CHANGED AND WHY. `.os-checkbox` used to be the NATIVE control with
   `accent-color` set — deliberately, "no custom-painted control". In practice
   that made the default the wrong one. A product that writes the obvious thing,
   `<input type="checkbox" class="os-checkbox">`, got the PLATFORM's checkbox:
   macOS renders a rounded-square with its own tick weight, Windows a hard
   square, and neither matches the 1.5px hairline + `--radius-sm` vocabulary
   every other control in the library is drawn with. The painted component
   existed (`.os-field-check`), but it needs a two-element structure —
   `__input` + a sibling `__box` — so nobody reached for it on a bare input,
   and both products shipped surfaces with platform checkboxes sitting inside
   DS tiles. The default has to be the one you want.

   So `.os-checkbox` / `.os-radio` now paint THEMSELVES, single-element: the
   input is its own box, the tick is a `::after` pseudo-element. **No markup
   change anywhere** — every existing call-site is repainted as-is, which is
   why this is a minor bump and not a major.

   THE ESCAPE HATCH is `--native`: add it to hand a control back to the
   platform (an OS-integrated form, a print sheet, a surface where the user
   expects their own widget). That is the modifier the old default became.

   `.os-field-check` is unchanged and still correct when the box must sit
   beside multi-line label text with its own alignment — it owns the
   composition; these own the control. */
.os-checkbox, .os-radio {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 3px; /* optical alignment to label cap-height when parent is flex-start */
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  transition: background-color 120ms var(--ease-standard),
              border-color 120ms var(--ease-standard);
}
.os-checkbox { border-radius: var(--radius-sm); }
.os-radio    { border-radius: var(--radius-pill); }
.os-checkbox:hover:not(:disabled), .os-radio:hover:not(:disabled) {
  border-color: var(--accent);
}
.os-checkbox:checked, .os-radio:checked,
.os-checkbox:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
/* The tick is DRAWN, not an image: a rotated corner of a 2-sided box. That
   keeps it token-free (no data-URI carrying a hard-coded stroke colour, which
   is also what the compliance scanner would flag) and lets it inherit the
   sizing above if the control is scaled. */
.os-checkbox::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 4px;
  height: 8px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 120ms var(--ease-standard), transform 120ms var(--ease-standard);
}
.os-checkbox:checked::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
/* Indeterminate is a BAR, not a tick — "some of the children", which a
   half-drawn check cannot say. It replaces the tick rather than joining it. */
.os-checkbox:indeterminate::after {
  opacity: 1;
  width: 9px;
  height: 0;
  border-width: 0 0 2px 0;
  transform: translate(-50%, -50%);
}
.os-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 120ms var(--ease-standard), transform 120ms var(--ease-standard);
}
.os-radio:checked::after { opacity: 1; transform: scale(1); }
.os-checkbox:focus-visible, .os-radio:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.os-checkbox:disabled, .os-radio:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* ── Opt back out to the platform control ─────────────────────────────────
   This is exactly what `.os-checkbox` was before v1.10.0. Everything the
   painted version declares is reset here, so the modifier is complete on its
   own and does not depend on declaration order. */
.os-checkbox--native, .os-radio--native {
  -moz-appearance: auto;
       appearance: auto;
  -webkit-appearance: auto;
  border: 0;
  background: none;
  border-radius: 0;
  accent-color: var(--accent);
}
.os-checkbox--native::after, .os-radio--native::after { content: none; }
.os-checkbox-label, .os-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.
   ══════════════════════════════════════════════════════════════ */
.os-field-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;
}
.os-field-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.os-field-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;
}
.os-field-check__box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 120ms ease, transform 120ms ease;
}
.os-field-check__input:checked + .os-field-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.os-field-check__input:checked + .os-field-check__box svg {
  opacity: 1;
  transform: scale(1);
}
.os-field-check__input:indeterminate + .os-field-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.os-field-check__input:indeterminate + .os-field-check__box::after {
  content: "";
  width: 9px;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
}
.os-field-check__input:focus-visible + .os-field-check__box {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.os-field-check:hover .os-field-check__input:not(:checked) + .os-field-check__box {
  border-color: var(--accent);
}
.os-field-check__input:disabled + .os-field-check__box {
  background: var(--surface-alt);
  border-color: var(--border);
}
.os-field-check__input:disabled ~ .os-field-check__text {
  color: var(--text-muted);
}
.os-field-check:has(.os-field-check__input:disabled) {
  cursor: not-allowed;
}
.os-field-check__text {
  display: block;
}
.os-field-check__text :is(.t, .os-t) {
  font-weight: 500;
  color: var(--text-primary);
}
.os-field-check__text :is(.d, .os-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. */
.os-field-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);   /* 36px at base density — tracks .os-btn */
  padding: 0 16px;            /* literal: this family ships 16px, not the button's 14px */
  font-family: var(--font-sans);
  font-size: var(--control-fs);
  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;
}
.os-field-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.os-field-button:disabled, .os-field-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.os-field-button--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.os-field-button--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.os-field-button--secondary {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.os-field-button--secondary:hover {
  background: var(--surface-alt);
}
.os-field-button--ghost {
  color: var(--text-muted);
  background: transparent;
}
.os-field-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. */
.os-field-button--destructive {
  color: #991B1B;
  background: var(--surface);
  border-color: var(--border);
}
.os-field-button--destructive:hover {
  background: #FEF2F2;
  border-color: #FECACA;
}
/* Size modifiers re-declare the trio on themselves, which pins them against
   any enclosing .os-density--* scope (tokens/density.css). NOTE --lg here is
   44px, NOT the 42px of .os-btn--lg — an existing divergence between the two
   button families. Left as-is on purpose: unifying them would resize shipped
   buttons, which a token contract must not do. Logged for a future minor. */
.os-field-button--sm { --control-h: var(--control-h-sm); padding: 0 12px; font-size: var(--text-sm); }
.os-field-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. */
.os-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.os-form-actions__leading {
  margin-right: auto;
}
@media (max-width: 640px) {
  .os-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .os-form-actions .os-field-button { width: 100%; }
  .os-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) {
  .os-field-button { min-height: 44px; height: auto; padding: 11px 18px; }
  .os-input, .os-field-select, .os-textarea {
    min-height: 44px;
    padding: 12px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .os-input, .os-field-select, .os-textarea, .os-field-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. */
:is(.fitting-size-pill, .os-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;
}
:is(.fitting-size-pill, .os-fitting-size-pill):hover {
  background: var(--canvas);
}
:is(.fitting-size-pill, .os-fitting-size-pill):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:is(.fitting-size-pill--active, .os-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) {
  :is(.fitting-size-pill, .os-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. */
:is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--single, .os-select2-selection--single), :is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--multiple, .os-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;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--single, .os-select2-selection--single):hover, :is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--multiple, .os-select2-selection--multiple):hover {
  border-color: var(--input-border-hover) !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--single, .os-select2-selection--single) :is(.select2-selection__rendered, .os-select2-selection__rendered) {
  padding: 0 12px !important;
  line-height: 38px !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--single, .os-select2-selection--single) :is(.select2-selection__arrow, .os-select2-selection__arrow) {
  height: 38px !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-selection__placeholder, .os-select2-selection__placeholder) {
  color: var(--input-placeholder) !important;
}
:is(.select2-container--default, .os-select2-container--default):is(.select2-container--open, .os-select2-container--open) :is(.select2-selection--single, .os-select2-selection--single), :is(.select2-container--default, .os-select2-container--default):is(.select2-container--open, .os-select2-container--open) :is(.select2-selection--multiple, .os-select2-selection--multiple), :is(.select2-container--default, .os-select2-container--default):is(.select2-container--focus, .os-select2-container--focus) :is(.select2-selection--single, .os-select2-selection--single), :is(.select2-container--default, .os-select2-container--default):is(.select2-container--focus, .os-select2-container--focus) :is(.select2-selection--multiple, .os-select2-selection--multiple) {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-dropdown, .os-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;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-results__option, .os-select2-results__option) {
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  padding: 8px 12px !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-results__option--highlighted, .os-select2-results__option--highlighted), :is(.select2-container--default, .os-select2-container--default) :is(.select2-results__option--highlighted, .os-select2-results__option--highlighted)[aria-selected] {
  background: var(--accent) !important;
  color: #fff !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-results__option, .os-select2-results__option)[aria-selected="true"] {
  background: var(--accent-soft, var(--surface-alt)) !important;
  color: var(--text-primary) !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-search--dropdown, .os-select2-search--dropdown) :is(.select2-search__field, .os-select2-search__field) {
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-sm) !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-search--dropdown, .os-select2-search--dropdown) :is(.select2-search__field, .os-select2-search__field):focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none !important;
}
:is(.select2-container--default, .os-select2-container--default) :is(.select2-selection--multiple, .os-select2-selection--multiple) :is(.select2-selection__choice, .os-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. */
:is(.button, .os-button), :is(.button-secondary, .os-button-secondary), :is(.button-alternative, .os-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 */
:is(.button, .os-button) {
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
:is(.button, .os-button):hover {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
/* secondary / alternative (outlined) — the file-upload button look */
:is(.button-secondary, .os-button-secondary), :is(.button-alternative, .os-button-alternative) {
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
}
:is(.button-secondary, .os-button-secondary):hover, :is(.button-alternative, .os-button-alternative):hover {
  color: var(--text-primary);
  background: var(--surface-alt);
  border-color: var(--border);
}
/* danger */
:is(.button, .os-button):is(.button-red, .os-button-red), :is(.button-red, .os-button-red) {
  color: #fff;
  background: var(--red-600);
  border-color: var(--red-600);
}
:is(.button, .os-button):is(.button-red, .os-button-red):hover, :is(.button-red, .os-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. */
:is(.button-color, .os-button-color) {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
:is(.button-color, .os-button-color):is(.ring-2, .os-ring-2), :is(.button-color, .os-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. */
:is(.file-field, .os-file-field) [data-fields--file-field-target="progressBar"] {
  background: var(--accent);
}
:is(.file-field, .os-file-field) :is(.bg-base-100, .os-bg-base-100) {
  background: var(--surface);
}
/* ─────────────────────────────────────────────────────────────────────
   DiveOS form substrate — integration layer.

   The form COMPONENTS (.diveos-input, .diveos-select, .diveos-textarea,
   .diveos-label, .diveos-field, .diveos-check*, .diveos-button,
   .diveos-form-actions, .diveos-error, .diveos-hint, and the select2
   re-skin) now come from os-ds `patterns.css`, already imported in
   application.css. This sheet holds only what the gem does not own.

   De-vendored 2026-07-21. A media-query-aware rule diff found 82 of the
   previous 92 local rules byte-identical to the gem with ZERO drift —
   independently reproducing arena's "82 rules, 0 differences" result on
   the same file lineage. Those 82 were deleted; the 10 below remain.

   THESE 10 ARE UPSTREAM CANDIDATES. Per CLAUDE.md ("if a variant is
   missing, add it to the component — don't hand-roll a one-off"), most
   of what follows is a missing os-ds variant rather than genuinely
   DiveOS-specific styling. They are kept local only so the de-vendoring
   is not blocked on a gem release. Contribute them to os-ds, then delete
   this file.
   ───────────────────────────────────────────────────────────────────── */
/* The gem's adjacent-sibling rhythm (.diveos-field + .diveos-field) is for
   STACKED fields only. Inside a grid the container `gap` handles spacing, and
   that 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; `.field-grid` added 2026-08 (the os-ds two-col
   form grid — e.g. Run pre-departure headcount + override — was missing here,
   so its 2nd column sat 22px low). */
:is(.grid, .os-grid, .field-grid) > :is(.diveos-field, .os-field), [class*="grid-cols"] > :is(.diveos-field, .os-field) {
  margin-top: 0;
}
/* 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. */
:is(.diveos-input--sm, .os-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. */
:is(.diveos-input--field, .os-input--field), :is(.diveos-select--field, .os-field-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). */
:is(.dv-btn--field, .os-btn--field):is(.dv-btn--icon, .os-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. */
:is(.diveos-input--row, .os-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. */
:is(.diveos-input--no-spinner, .os-input--no-spinner) { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }
:is(.diveos-input--no-spinner, .os-input--no-spinner)::-webkit-outer-spin-button, :is(.diveos-input--no-spinner, .os-input--no-spinner)::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ── 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). */
:is(.dv-input-group, .os-input-group) {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.dv-input-group, .os-input-group) > :is(.diveos-input, .os-input), :is(.dv-input-group, .os-input-group) > :is(.diveos-select, .os-field-select) {
  width: auto;
  height: 36px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
:is(.dv-input-group--field, .os-input-group--field) > :is(.diveos-input, .os-input), :is(.dv-input-group--field, .os-input-group--field) > :is(.diveos-select, .os-field-select), :is(.dv-input-group--field, .os-input-group--field) > :is(.dv-btn, .os-btn) {
  height: 46px;
}
/* ────────────────────────────────────────────────────────────────────────
   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.
   ──────────────────────────────────────────────────────────────────────── */
:is(.kanban-board-scroll, .os-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). */
:is(.kanban-card, .os-kanban-card):is(.dragging, .os-dragging) {
  opacity: 1;
}
:is(.kanban-cards, .os-kanban-cards):is(.drag-over, .os-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. */
:is(.stat-strip, .os-stat-strip) {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 56px;
  margin: 0;
}
:is(.stat-strip__item, .os-stat-strip__item) { display: flex; align-items: baseline; gap: 10px; }
:is(.stat-strip__num, .os-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);
}
:is(.stat-strip__num--briefing, .os-stat-strip__num--briefing) { color: var(--status-briefing-fg); }
:is(.stat-strip__label, .os-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. */
:is(.day-section, .os-day-section) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 56px 16px;
}
:is(.day-section__label, .os-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. */
:is(.dv-open-row, .os-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 > :is(.dv-open-row, .os-open-row) { border-bottom: 1px solid var(--hairline); }
/* Kill Bullet Train's global a:hover underline on the whole clickable row. */
:is(.dv-open-row, .os-open-row):hover { background: var(--hover-warm); text-decoration: none; }
:is(.dv-open-row, .os-open-row):hover, :is(.dv-open-row, .os-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. */
:is(.dv-full-bleed, .os-full-bleed) {
  width: var(--bleed-w);
  margin-inline: var(--bleed-mx);
  padding-inline: var(--bleed-pad);
}
:is(.dv-open-row, .os-open-row):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}
:is(.dv-open-row__rail, .os-open-row__rail) {
  width: 3px;
  height: 52px;
  background: var(--bar-pending);
  border-radius: 3px;
  margin-top: 8px;
  transition: background var(--t-med) ease;
}
:is(.dv-open-row, .os-open-row)[data-status="briefing"]  :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--bar-briefing); }
:is(.dv-open-row, .os-open-row)[data-status="in_water"]   :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--bar-inwater); }
:is(.dv-open-row, .os-open-row)[data-status="confirmed"] :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--bar-confirmed); }
:is(.dv-open-row, .os-open-row)[data-status="cancelled"] :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--bar-cancelled); }
:is(.dv-open-row, .os-open-row)[data-status="briefing"]:hover  :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--status-briefing-fg); }
:is(.dv-open-row, .os-open-row)[data-status="in_water"]:hover   :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--status-in-water-fg); }
:is(.dv-open-row, .os-open-row)[data-status="confirmed"]:hover :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--status-confirmed-fg); }
:is(.dv-open-row, .os-open-row)[data-status="cancelled"]:hover :is(.dv-open-row__rail, .os-open-row__rail) { background: var(--status-cancelled-fg); }
/* Time column */
:is(.dv-open-row__time, .os-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;
}
:is(.dv-open-row__time-sep, .os-open-row__time-sep) { color: var(--muted-2); margin: 0 1px; }
:is(.dv-open-row__time-label, .os-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 */
:is(.dv-open-row__title, .os-open-row__title) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
:is(.dv-open-row__stops, .os-open-row__stops) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--muted);
}
:is(.dv-open-row__stops, .os-open-row__stops) :is(.sep, .os-sep) { color: var(--muted-2); }
:is(.dv-open-row__crew, .os-open-row__crew) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--text-xs);
  color: var(--muted);
}
:is(.dv-open-row__crew, .os-open-row__crew) b { font-weight: 600; color: var(--ink); }
:is(.dv-open-row__vessel, .os-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 */
:is(.dv-open-row__count, .os-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;
}
:is(.dv-open-row__count--confirmed, .os-open-row__count--confirmed) { color: var(--status-confirmed-fg); }
:is(.dv-open-row__count--briefing, .os-open-row__count--briefing)  { color: var(--status-briefing-fg); }
:is(.dv-open-row__count-max, .os-open-row__count-max) { color: var(--muted-2); font-size: var(--text-md); font-weight: 400; }
:is(.dv-open-row__count-label, .os-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. */
:is(.progress-underline, .os-progress-underline) {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
:is(.progress-underline__fill, .os-progress-underline__fill) {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--t-med) ease;
}
:is(.progress-underline__fill--confirmed, .os-progress-underline__fill--confirmed) { background: var(--status-confirmed-fg); }
:is(.progress-underline__fill--briefing, .os-progress-underline__fill--briefing)  { background: var(--status-briefing-fg); }
:is(.progress-underline__fill--in_water, .os-progress-underline__fill--in_water)  { background: var(--status-in-water-fg); }
:is(.progress-underline__fill--cancelled, .os-progress-underline__fill--cancelled) { background: var(--status-cancelled-fg); }
/* Chevron — revealed on row hover */
:is(.dv-open-row__chev, .os-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);
}
:is(.dv-open-row, .os-open-row):hover :is(.dv-open-row__chev, .os-open-row__chev) { opacity: 1; transform: translateX(0); }
/* Cancelled-state row styling (WL page-local <style>, promoted here) */
:is(.dv-open-row, .os-open-row)[data-status="cancelled"] :is(.dv-open-row__title, .os-open-row__title), :is(.dv-open-row, .os-open-row)[data-status="cancelled"] :is(.dv-open-row__time, .os-open-row__time) { color: var(--muted); }
:is(.dv-open-row, .os-open-row)[data-status="cancelled"] :is(.dv-open-row__stops, .os-open-row__stops) {
  text-decoration: line-through;
  text-decoration-color: var(--hairline);
}
@media (max-width: 720px) {
  :is(.dv-open-row, .os-open-row) {
    grid-template-columns: 12px 88px 1fr;
    gap: 16px;
    padding: 18px 16px;
  }
  :is(.dv-open-row__count-col, .os-open-row__count-col) { display: none; }
  :is(.dv-open-row__chev, .os-open-row__chev) { display: none; }
  :is(.stat-strip, .os-stat-strip) { gap: 10px 28px; }
  :is(.day-section, .os-day-section) { padding: 24px 16px 12px; }
}
:is(.dashboard, .os-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) {
  :is(.dashboard, .os-dashboard) { padding: 32px 24px 96px; }
}
/* Offline banner — sticky at top */
:is(.dashboard__offline-banner, .os-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. */
:is(.dashboard__service-due, .os-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);
}
:is(.dashboard__service-due-icon, .os-dashboard__service-due-icon) { flex-shrink: 0; padding-top: 1px; }
:is(.dashboard__service-due-body, .os-dashboard__service-due-body) { flex: 1; }
:is(.dashboard__service-due-label, .os-dashboard__service-due-label) {
  margin: 0 0 2px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:is(.dashboard__service-due-meta, .os-dashboard__service-due-meta) {
  margin: 0;
  font-size: var(--text-sm);
}
:is(.dashboard__service-due-link, .os-dashboard__service-due-link) {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}
:is(.dashboard__service-due-link, .os-dashboard__service-due-link):hover { text-decoration: none; }
/* Header */
:is(.dashboard__header, .os-dashboard__header) {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
:is(.dashboard__header-left, .os-dashboard__header-left) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
:is(.dashboard__logo, .os-dashboard__logo) {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
:is(.dashboard__title, .os-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) {
  :is(.dashboard__title, .os-dashboard__title) { font-size: var(--text-3xl); }
}
:is(.dashboard__summary, .os-dashboard__summary) {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}
:is(.dashboard__summary-stat, .os-dashboard__summary-stat) {
  font-variant-numeric: tabular-nums;
}
:is(.dashboard__summary-sep, .os-dashboard__summary-sep) { color: var(--text-muted); margin: 0 6px; }
/* Trip list */
:is(.dashboard__trips, .os-dashboard__trips) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Trip row */
:is(.trip-row, .os-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);
}
:is(.trip-row__link, .os-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) {
  :is(.trip-row__link, .os-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) {
  :is(.trip-row__chevron, .os-trip-row__chevron) { display: none; }
  :is(.trip-row__meta, .os-trip-row__meta) { gap: 6px; }
  :is(.trip-row__capacity, .os-trip-row__capacity) { padding: 2px 6px; font-size: var(--text-xs); }
}
:is(.trip-row__link, .os-trip-row__link):hover { background: var(--surface-alt); }
:is(.trip-row__link, .os-trip-row__link):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
:is(.trip-row__time, .os-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) {
  :is(.trip-row__time, .os-trip-row__time) { font-size: var(--text-3xl); }
}
:is(.trip-row__body, .os-trip-row__body) { min-width: 0; }
:is(.trip-row__primary, .os-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;
}
:is(.trip-row__secondary, .os-trip-row__secondary) {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.trip-row__sep, .os-trip-row__sep) { color: var(--text-muted); margin: 0 6px; }
:is(.trip-row__missing, .os-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. */
:is(.trip-row__extra, .os-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;
}
:is(.trip-row__meta, .os-trip-row__meta) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
:is(.trip-row__capacity, .os-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);
}
:is(.trip-row__chevron, .os-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). */
:is(.trip-row--now, .os-trip-row--now) {
  border-left: 3px solid var(--accent);
}
:is(.trip-row--completed, .os-trip-row--completed) { opacity: 0.65; }
:is(.trip-row--cancelled, .os-trip-row--cancelled) { opacity: 0.65; }
:is(.trip-row--cancelled, .os-trip-row--cancelled) :is(.trip-row__time, .os-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); }
}
:is(.trip-row--pulse, .os-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 */
:is(.dashboard__empty, .os-dashboard__empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 96px 16px 64px;
  color: var(--text-secondary);
}
:is(.dashboard__empty-art, .os-dashboard__empty-art) {
  color: var(--gray-300);
  width: 240px;
  height: 160px;
  margin-bottom: 32px;
  opacity: 0.7;
}
:is(.dashboard__empty-art, .os-dashboard__empty-art) svg { width: 100%; height: 100%; }
:is(.dashboard__empty-line, .os-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;
}
:is(.dashboard__empty-hint, .os-dashboard__empty-hint) {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 360px;
}
:is(.dashboard__empty-photo, .os-dashboard__empty-photo) {
  width: 100%;
  max-width: 480px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
:is(.dashboard__empty-photo, .os-dashboard__empty-photo) img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
:is(.dashboard__empty-cta, .os-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;
}
:is(.dashboard__empty-cta, .os-dashboard__empty-cta):hover { background: var(--accent-strong); }
:is(.dashboard__empty-cta, .os-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; }
}
:is(.trip-row--skeleton, .os-trip-row--skeleton) :is(.trip-row__time, .os-trip-row__time), :is(.trip-row--skeleton, .os-trip-row--skeleton) :is(.trip-row__body, .os-trip-row__body), :is(.trip-row--skeleton, .os-trip-row--skeleton) :is(.trip-row__meta, .os-trip-row__meta) {
  pointer-events: none;
}
:is(.skeleton-bar, .os-skeleton-bar) {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
:is(.skeleton-bar--time, .os-skeleton-bar--time)      { height: 28px; width: 64px; }
:is(.skeleton-bar--primary, .os-skeleton-bar--primary)   { height: 16px; width: 70%; margin-bottom: 6px; }
:is(.skeleton-bar--secondary, .os-skeleton-bar--secondary) { height: 14px; width: 50%; }
:is(.skeleton-bar--chip, .os-skeleton-bar--chip)      { height: 20px; width: 80px; }
/* Partial-state warning icon — accompanies "— site TBD" / "— guide unassigned" */
:is(.trip-row__missing-icon, .os-trip-row__missing-icon) {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: var(--status-briefing-fg, #92400E);
  margin-right: 2px;
}
:is(.trip-row__missing-text, .os-trip-row__missing-text) { /* hook for emphasis if needed */ }
/* Error state — design spec D4 */
:is(.dashboard__error, .os-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;
}
:is(.dashboard__error-line, .os-dashboard__error-line) {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 16px;
}
:is(.dashboard__error-actions, .os-dashboard__error-actions) { margin-bottom: 16px; }
:is(.dashboard__error-retry, .os-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;
}
:is(.dashboard__error-retry, .os-dashboard__error-retry):hover { opacity: 0.9; }
:is(.dashboard__error-details, .os-dashboard__error-details) {
  margin-top: 16px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: left;
}
:is(.dashboard__error-details, .os-dashboard__error-details) summary { cursor: pointer; }
:is(.dashboard__error-details, .os-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) {
  :is(.trip-row--pulse, .os-trip-row--pulse) { animation: none; }
  :is(.skeleton-bar, .os-skeleton-bar) { animation: none; }
  :is(.trip-row, .os-trip-row), :is(.dashboard__empty-cta, .os-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 ──────────────────────────────────────────── */
:is(.dv-trip-split, .os-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) {
  :is(.dv-trip-split, .os-trip-split) { grid-template-columns: 1fr; }
  :is(.dv-trip-split__rail, .os-trip-split__rail) { order: -1; }
}
/* ─── Trip header ───────────────────────────────────────────── */
:is(.dv-trip-header, .os-trip-header) { margin-bottom: 24px; }
:is(.dv-trip-header__breadcrumb, .os-trip-header__breadcrumb) {
  font-size: var(--text-sm);
  color: var(--text-muted, #6B7280);
  margin-bottom: 8px;
}
:is(.dv-trip-header__crumb-link, .os-trip-header__crumb-link) {
  color: var(--accent, #0369A1);
  text-decoration: none;
}
:is(.dv-trip-header__crumb-link, .os-trip-header__crumb-link):hover { text-decoration: underline; }
:is(.dv-trip-header__crumb-current, .os-trip-header__crumb-current) { color: var(--text-primary, #111827); }
:is(.dv-trip-header__title, .os-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;
}
:is(.dv-trip-header__time, .os-trip-header__time) {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--text-muted, #6B7280);
  margin-left: 12px;
}
:is(.dv-trip-header__meta, .os-trip-header__meta) {
  font-size: var(--text-sm);
  color: var(--text-muted, #6B7280);
}
/* ─── Tab bar ───────────────────────────────────────────────── */
:is(.dv-tabs, .os-tabs) {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border, #E5E7EB);
  margin-bottom: 24px;
}
:is(.dv-tab, .os-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;
}
:is(.dv-tab, .os-tab):hover { color: var(--text-primary, #111827); }
:is(.dv-tab--active, .os-tab--active), :is(.dv-tab, .os-tab)[aria-selected="true"] {
  color: var(--accent, #0369A1);
  border-bottom-color: var(--accent, #0369A1);
}
:is(.dv-tab__count, .os-tab__count) {
  font-size: var(--text-xs);
  color: var(--text-muted, #9CA3AF);
  margin-left: 4px;
}
:is(.dv-tab--active, .os-tab--active) :is(.dv-tab__count, .os-tab__count) { color: var(--accent, #0369A1); }
/* ─── Stepper ───────────────────────────────────────────────── */
:is(.dv-stepper, .os-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;
}
:is(.dv-stepper__step, .os-stepper__step) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
:is(.dv-stepper__circle, .os-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;
}
:is(.dv-stepper__step--done, .os-stepper__step--done) :is(.dv-stepper__circle, .os-stepper__circle) {
  background: #15803D;
  color: #FFFFFF;
  border-color: #15803D;
}
:is(.dv-stepper__step--current, .os-stepper__step--current) :is(.dv-stepper__circle, .os-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);
}
:is(.dv-stepper__label, .os-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;
}
:is(.dv-stepper__step--done, .os-stepper__step--done) :is(.dv-stepper__label, .os-stepper__label) { color: #15803D; }
:is(.dv-stepper__step--current, .os-stepper__step--current) :is(.dv-stepper__label, .os-stepper__label) { color: var(--accent, #0369A1); font-weight: 600; }
/* ─── Next Action card ──────────────────────────────────────── */
:is(.dv-next-action, .os-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;
}
:is(.dv-next-action__label, .os-next-action__label) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary, #111827);
  margin-bottom: 4px;
}
:is(.dv-next-action__hint, .os-next-action__hint) {
  font-size: var(--text-sm);
  color: var(--text-muted, #6B7280);
  margin: 0 0 12px;
}
:is(.dv-next-action__btn, .os-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;
}
:is(.dv-next-action__btn, .os-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 ─────────────────────────────────────────────── */
:is(.dv-guide-row, .os-guide-row) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
:is(.dv-badge, .os-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;
  /* A badge is an atomic pill: never let a narrow flex parent (e.g. the mobile
     card-stack DIVES cell) shrink it and wrap "Fun Dive" one letter per line.
     The label beside it is the flexible member that truncates, not the badge. */
  white-space: nowrap;
  flex-shrink: 0;
}
:is(.dv-badge--lead, .os-badge--lead) { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
:is(.dv-badge--assistant, .os-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. */
:is(.dv-badge--count, .os-badge--count) { color: var(--accent); background: var(--accent-soft); border-color: transparent; text-transform: none; letter-spacing: 0; }
:is(.dv-badge--neutral, .os-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). */
:is(.dv-badge--muted, .os-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]}. */
:is(.dv-badge--confirmed, .os-badge--confirmed) { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
:is(.dv-badge--pending, .os-badge--pending)   { color: var(--pending);   background: var(--pending-bg);   border-color: var(--pending-border); }
:is(.dv-badge--briefing, .os-badge--briefing)  { color: var(--briefing);  background: var(--briefing-bg);  border-color: var(--briefing-border); }
:is(.dv-badge--in_water, .os-badge--in_water)  { color: var(--inwater);   background: var(--inwater-bg);   border-color: var(--inwater-border); }
:is(.dv-badge--returning, .os-badge--returning) { color: var(--status-returning-fg); background: var(--status-returning-bg); border-color: var(--status-returning-border); }
:is(.dv-badge--completed, .os-badge--completed) { color: var(--status-completed-fg); background: var(--status-completed-bg); border-color: var(--status-completed-border); }
:is(.dv-badge--cancelled, .os-badge--cancelled) { color: var(--cancelled); background: var(--cancelled-bg); border-color: var(--cancelled-border); }
/* Shape + size + leading-dot modifiers. */
:is(.dv-badge--square, .os-badge--square) { border-radius: var(--radius-sm); }
:is(.dv-badge--sm, .os-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. */
:is(.dv-badge--lg, .os-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. */
:is(.dv-badge__remove, .os-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);
}
:is(.dv-badge__remove, .os-badge__remove):hover { color: var(--cancelled); }
:is(.dv-badge-dot, .os-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. */
:is(.dv-stops__rows, .os-stops__rows) :is(.dv-stops__row, .os-stops__row):last-child :is(.dv-stops__line, .os-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. */
:is(.dv-stops__display, .os-stops__display) { display: contents; }
:is(.dv-stops__display, .os-stops__display)[hidden] { display: none; }
/* End "Add stop" cap — the card-lane cell (grid col 3) holding the button + its
   hidden inline create form. */
:is(.dv-stops__endwrap, .os-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:is(.arena-modal, .os-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:is(.arena-modal, .os-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:is(.arena-modal, .os-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:is(.arena-modal, .os-arena-modal)[data-state="open"]::backdrop {
  opacity: 1;
}
dialog:is(.arena-modal, .os-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:is(.arena-modal, .os-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:is(.arena-modal, .os-arena-modal)[data-state="open"] [data-modal-panel] {
  opacity: 1;
  transform: scale(1) translateY(0);
}
dialog:is(.arena-modal, .os-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:is(.arena-modal, .os-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:is(.arena-modal, .os-arena-modal) [data-modal-body] {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  color: #1f2937; /* gray-800 */
}
:is(.dark, .os-dark) dialog:is(.arena-modal, .os-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:is(.arena-modal, .os-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 */
:is(.dark, .os-dark) dialog:is(.arena-modal, .os-arena-modal) [data-modal-panel] {
  background-color: #1e293b;
}
:is(.dark, .os-dark) dialog:is(.arena-modal, .os-arena-modal)::backdrop {
  background-color: rgb(0 0 0 / 0.7);
}
:is(.dark, .os-dark) dialog:is(.arena-modal, .os-arena-modal) [data-modal-header] {
  background-color: #1b2636;
  border-bottom-color: #374151;
}
:is(.dark, .os-dark) dialog:is(.arena-modal, .os-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:is(.arena-modal, .os-arena-modal) [data-modal-panel]:is(.max-w-sm, .os-max-w-sm)  { max-width: 28rem; }   /* keep intentionally small */
  dialog:is(.arena-modal, .os-arena-modal) [data-modal-panel]:is(.max-w-md, .os-max-w-md)  { max-width: 36rem; }   /* 28→36rem */
  dialog:is(.arena-modal, .os-arena-modal) [data-modal-panel]:is(.max-w-lg, .os-max-w-lg)  { max-width: 42rem; }   /* 32→42rem */
  dialog:is(.arena-modal, .os-arena-modal) [data-modal-panel]:is(.max-w-xl, .os-max-w-xl)  { max-width: 52rem; }   /* 36→52rem */
  dialog:is(.arena-modal, .os-arena-modal) [data-modal-panel]:is(.max-w-2xl, .os-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:is(.arena-modal, .os-arena-modal)[open] {
    padding: 1rem;
  }

  dialog:is(.arena-modal, .os-arena-modal) [data-modal-panel] {
    max-height: 88vh;
  }

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

  dialog:is(.arena-modal, .os-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:is(.arena-modal, .os-arena-modal)[data-state="open"] [data-modal-panel] {
    transform: translateY(0);
  }

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

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

  dialog:is(.arena-modal, .os-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;
  }

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

  /* Respect notch / home-bar on iOS */
  dialog:is(.arena-modal, .os-arena-modal) [data-modal-body] {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  dialog:is(.arena-modal, .os-arena-modal)::backdrop, dialog:is(.arena-modal, .os-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:is(.payment-dialog, .os-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. */
.os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centre when stretched full-width */
  gap: 0.375rem;
  /* Sized by the CONTROL TRIO, not literals. At the default density these
     resolve to exactly the shipped 36px / 14px / 14px, so nothing moves;
     inside an .os-density--* scope the button follows the surface. Every
     size modifier below re-declares the trio on itself, which pins it
     against any enclosing scope (see tokens/density.css). */
  height: var(--control-h);
  padding-left: var(--control-pad-x);
  padding-right: var(--control-pad-x);
  font-size: var(--control-fs);
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 6px;
  /* Own the border instead of inheriting the UA's `2px outset` on <button>.
     Variants that want a border set it themselves, each a full `border:
     1px solid`: --secondary, --ghost, --danger, --confirmed. That list is
     enumerated from the source, not remembered — the first draft of this
     comment named a `--outline` variant that has never existed. No rule
     gem-wide sets border-color or border-width alone on .dv-btn, so
     zeroing the shorthand here cannot strand a half-declared border.

     NOTE: this comment deliberately contains no curly braces. An earlier draft
     spelled a CSS rule out inline, and the stray closing brace broke three
     separate block parsers in one session — every one of them stopped reading
     the rule early and reported the wrong declarations. Same hazard class as a
     star followed by a slash inside comment prose, which once closed a comment
     early, destroyed a :root block and killed 21 tokens app-wide.
     Describe CSS in comments; do not spell it.

     This is NOT redundant with a reset. DiveOS gets a zero button border-width
     free from Tailwind Preflight, so this component looked correct there for its
     whole life. arena-ops has no Tailwind, and every one of its 61
     `<button class="dv-btn">` rendered with a black outset border — a defect
     visible on the guest portal's "Save my details" and invisible to the whole
     test suite, because nothing computes style on real DOM.

     Same failure shape as `turbo-frame[hidden]` (v0.22.1): a component that
     silently depends on the consumer's reset is a component that behaves
     differently per consumer. The base must be self-sufficient. */
  border: 0;
  /* Same reasoning as the border, and found the same way — by computing style
     on a real <button> rather than reading the CSS. A bare `.dv-btn` in
     arena-ops rendered `rgb(239, 239, 239)` on black: the UA's ButtonFace
     fill. Preflight sets a transparent background-color on button; arena's
     base.css has no `button` rule at all.

     An older comment here claimed the base is "never used directly because the
     background comes from the modifier". That is not true of real markup —
     five live arena buttons carry `.dv-btn` with no colour variant, including
     one half of a segmented control in front_office/new_reservation.html.erb
     whose other half has `--secondary`, so the two tabs render differently.

     A base that is only correct when a modifier is also present should either
     declare its own neutral ground or not be usable alone. This declares it. */
  background-color: transparent;
  color: inherit;
  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. */
.os-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Pressed feedback — shared across every variant. */
.os-btn:active {
  transform: translateY(1px);
}
.os-btn:disabled, .os-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). */
.os-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. */
.os-btn:hover, .os-btn:focus, .os-btn:focus-visible, .os-btn:active { text-decoration-line: none; }
.os-btn--primary {
  color: #fff;
  background-color: var(--accent);
}
.os-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. */
.os-btn--lg {
  --control-h:     var(--control-h-lg);      /* 42px */
  --control-pad-x: var(--control-pad-x-lg);  /* 16px */
  --control-fs:    var(--control-fs-lg);     /* 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.

   Since v1.6.0 this is the PER-BUTTON escape hatch. If a whole form region
   should sit on the field baseline, wrap it in `.os-density--field` once
   instead of adding this modifier to each control. */
.os-btn--field {
  --control-h: var(--control-h-field);
}
/* ── 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). */
.os-btn--touch {
  --control-h:     var(--control-h-touch);      /* 48px */
  --control-pad-x: var(--control-pad-x-touch);  /* 20px */
  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). */
.os-btn--secondary {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.os-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. */
.os-btn--ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--accent);
}
.os-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). */
.os-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.os-view-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Density via vertical padding (no declared height — see
     .os-segmented__option). (36 − 24) / 2 = 6px at base density. */
  padding: max(6px, calc((var(--control-h) - 24px) / 2)) 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;
}
.os-view-toggle__opt:hover { color: var(--ink); background: var(--surface-alt); text-decoration: none; }
.os-view-toggle__opt--active, .os-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. */
.os-btn--danger {
  background-color: transparent;
  border: 1px solid var(--cancelled-border);
  color: var(--cancelled);
}
.os-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. */
.os-btn--icon {
  /* Square: width tracks whatever height is in force, so an icon button is
     36px at base density and 48px in an .os-density--touch scope without a
     second modifier. Previously a 2.25rem literal that could not follow. */
  width: var(--control-h);
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  color: var(--muted);
}
.os-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). */
.os-btn--sm {
  --control-h:     var(--control-h-sm);      /* 32px / h-8 */
  --control-pad-x: var(--control-pad-x-sm);  /* 12px / px-3 */
  --control-fs:    var(--control-fs-sm);     /* 12px */
}
/* --sm is declared AFTER --icon and has equal specificity, so its padding
   would otherwise win and un-square the icon button. Re-zero it here. Width
   needs no repeat: --icon reads var(--control-h), which --sm has re-pointed
   on this same element. */
.os-btn--sm.os-btn--icon {
  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. */
.os-btn--xs {
  --control-h:     var(--control-h-xs);      /* 22px */
  --control-pad-x: var(--control-pad-x-xs);  /* 8px */
  --control-fs:    var(--control-fs-xs);     /* 10px */
  gap: 4px;
}
.os-btn--xs.os-btn--icon { 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). */
.os-btn--confirmed {
  background-color: var(--surface);
  border: 1px solid var(--confirmed);
  color: var(--confirmed);
}
.os-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:. */
.os-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;
}
.os-link:hover {
  color: var(--accent-strong);
}
.os-link :is(.lucide, .os-lucide), .os-link svg {
  flex-shrink: 0;
}
/* Count suffix — the "View all 12" number stays in the accent flow. */
.os-link__count {
  font-variant-numeric: tabular-nums;
}
/* header_band: component from the gem, DiveOS integration glue after it. */
/* ─────────────────────────────────────────────────────────────────────
   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).

   Full-bleed is the shell contract: the consuming shell defines --bleed-w /
   --bleed-mx / --bleed-pad on its content column (and makes the pane a query
   container). Each is read WITH a fallback, so a consumer that defines none
   degrades to a plain, non-bleeding band instead of a broken layout.
   ───────────────────────────────────────────────────────────────────── */
/* ── 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 is baked in: it extends the band to the content-pane
   edges via --bleed-*, then re-insets its content to the centered column. So
   callers add nothing alongside `.dv-page-band`. */
.os-page-band {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  width: var(--bleed-w, auto);                 /* full-bleed background to the pane edges */
  margin-inline: var(--bleed-mx, 0);
  padding-inline: var(--bleed-pad, 0);      /* 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. */
.os-tabnav { position: sticky; top: 0; z-index: 20; }
:is(.page-tabs, .os-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;
}
:is(.page-tabs, .os-page-tabs)::-webkit-scrollbar { display: none; }
:is(.page-tab, .os-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;
}
:is(.page-tab, .os-page-tab):hover { color: var(--ink); }
/* Keyboard focus ring — tabs are interactive (<a>/<button>); without this,
   keyboard users get no visible focus. `--shadow-focus` is ours (tokens.css);
   `--radius-xs` is NOT a token os-ds owns, so it carries a fallback — otherwise
   the ring renders square in any consumer that doesn't happen to define it. */
:is(.page-tab, .os-page-tab):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs, 4px);
}
:is(.page-tab, .os-page-tab).is-active, :is(.page-tab, .os-page-tab)[aria-selected="true"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
  font-weight: 600;
}
:is(.page-tab-count, .os-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);
}
:is(.page-tab, .os-page-tab).is-active :is(.page-tab-count, .os-page-tab-count), :is(.page-tab, .os-page-tab)[aria-selected="true"] :is(.page-tab-count, .os-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). */
:is(.page-tab-div, .os-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>. */
.os-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);
}
.os-page-band h1 + p, .os-page-band :is(.page-sub-copy, .os-page-sub-copy) {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 4px;
}
.os-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Vertical separator between chip groups inside a toolbar. */
.os-toolbar .os-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). */
:is(.chip, .os-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;
}
:is(.chip, .os-chip):hover { background: var(--canvas); }
:is(.chip, .os-chip).is-on {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
:is(.chip, .os-chip) :is(.count, .os-count) {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-left: 2px;
}
:is(.chip, .os-chip).is-on :is(.count, .os-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 ───────────────────────────────────────────────────── */
:is(.search-wrap, .os-search-wrap) {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
}
:is(.search-wrap, .os-search-wrap) svg, :is(.search-wrap, .os-search-wrap) [data-lucide] {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--muted-2);
  pointer-events: none;
}
:is(.search-wrap, .os-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);
}
:is(.search-wrap, .os-search-wrap) input::-moz-placeholder { color: var(--muted-2); }
:is(.search-wrap, .os-search-wrap) input::placeholder { color: var(--muted-2); }
:is(.search-wrap, .os-search-wrap) input:focus {
  outline: none;
  border-color: var(--hairline-strong);
}
/* ── Table wrap ───────────────────────────────────────────────────── */
.os-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). */
.os-table-wrap, :is(.box-table, .os-box-table) { font-size: var(--text-sm); }
.os-table-wrap table {
  min-width: 100%;
  border-collapse: collapse;
}
.os-table-wrap thead tr {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.os-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 */
}
.os-table-wrap tbody tr { border-bottom: 1px solid var(--hairline-2); }
.os-table-wrap tbody tr:last-child { border-bottom: none; }
.os-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. */
.os-table-wrap td a:hover, :is(.box-table, .os-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). */
.os-table-wrap td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.os-table-wrap.os-table--compact td, .os-table--compact .os-table-wrap td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.os-table-wrap td:first-child, .os-table-wrap th:first-child { padding-left: 16px; }
.os-table-wrap td:last-child, .os-table-wrap th:last-child { padding-right: 16px; }
/* NOTE (shell-agnostic): a consuming app whose table framework wraps index
   tables and leaks column insets onto .dv-table-wrap (e.g. Bullet Train's
   `.bulk-actions` "identity column" padding) should reset those in its OWN
   stylesheet — that's a product-framework concern, not part of the shared
   component. The gem stays free of framework-specific ancestor selectors. */
/* 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. */
.os-table-wrap:has(tbody [data-sortable-target="handle"]) th:first-child, .os-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). */
:is(.box-table, .os-box-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(.box-table, .os-box-table) table { min-width: 100%; border-collapse: collapse; }
:is(.box-table, .os-box-table) thead tr {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
:is(.box-table, .os-box-table) thead th {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);
}
:is(.box-table, .os-box-table) tbody tr { border-bottom: 1px solid var(--hairline-2); }
:is(.box-table, .os-box-table) tbody tr:last-child { border-bottom: none; }
:is(.box-table, .os-box-table) tbody tr:hover { background: var(--sky-50); }
:is(.box-table, .os-box-table) td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
:is(.box-table, .os-box-table) td:first-child, :is(.box-table, .os-box-table) th:first-child { padding-left: 16px; }
:is(.box-table, .os-box-table) td:last-child, :is(.box-table, .os-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
   the pane's top padding (via --shell-pad-top) so the white starts at the pane top. */
.os-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, auto);
  margin-inline: var(--bleed-mx, 0);
  padding: 32px var(--bleed-pad, 0) 18px;
}
/* Mobile (<1023px): compact single-row header + auto-hiding page tools.
   SHELL-AGNOSTIC nav clearance: a shell that renders a FIXED mobile nav toggle
   (a hamburger overlapping the top-left) sets `--dv-nav-gutter` (horizontal
   inset, e.g. 64px) and `--dv-nav-gutter-top` (vertical clearance for a
   breadcrumb sitting under the toggle, e.g. 72px). Both default to 0, so a shell
   with no fixed toggle gets no phantom gutter — the gem assumes no shell. */
@media (max-width: 1023px) {
  /* List header (row 1): content clears the shell nav toggle via the gutter. */
  .os-page-head { padding-top: 16px; padding-left: var(--dv-nav-gutter, 0); }

  /* Detail headers carry a breadcrumb as their first line — extra top clearance
     so breadcrumb + title stack under the toggle (0 when no shell toggle). */
  .os-page-band { padding-top: var(--dv-nav-gutter-top, 0); }
  .os-page-band ~ .os-page-band { padding-top: var(--space-2, 8px); }
  nav.os-page-band { padding-top: var(--space-3, 12px); padding-left: var(--dv-nav-gutter, 0); }

  /* Page tools (row 2): at the page top the row sits below the header, clear of
     the toggle. The `page-tools` controller adds `--pinned` (applies the nav
     gutter) only while STUCK at the top, and `--hidden` to slide it out of view
     on scroll-down. Transform-based so hiding never reflows the page. */
  .os-page-tools {
    transition: transform .24s var(--ease-out-quart, ease), padding-left .12s ease;
  }
  .os-page-tools.os-page-tools--hidden { transform: translateY(-110%); }
  .os-page-tools.os-page-tools--pinned { padding-left: var(--dv-nav-gutter, 0); }
}
.os-page-head h1, h1.os-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;
}
.os-page-head__sub { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; }
/* ── Head lead + title row ────────────────────────────────────────────
   The band is title-cluster (left) vs actions (right). `__lead` is that left
   cluster; `__titlerow` puts the h1 and its IDENTITY CHIPS (VIP, returning,
   lifecycle status) on ONE line.

   Both were previously undefined, so a consumer that used them got the browser
   default: the block-level h1 took the full width and pushed every chip onto
   its own line under the name. Additive — no existing markup in the DiveOS
   consumer references either class, so this changes nothing there. */
.os-page-head__lead {
  flex: 1 1 auto;
  min-width: 0;                        /* let a long name truncate, not overflow */
}
.os-page-head__titlerow {
  display: flex;
  align-items: center;                 /* chips optically centre on the title */
  flex-wrap: wrap;                     /* many chips wrap as a group, not per-chip */
  gap: 10px;
  min-width: 0;
}
.os-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). */
.os-page-head .os-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 content 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) {
  .os-page-head { flex-wrap: wrap; row-gap: 16px; }
  .os-page-head > :first-child { flex: 1 1 100%; }
  .os-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. */
  .os-page-head__actions > :is(.relative, .os-relative):first-child, .os-page-head__actions > form:first-child { flex: 1 1 240px; max-width: none; }
  .os-page-head__actions > :is(.relative, .os-relative):first-child :is(.max-w-sm, .os-max-w-sm), .os-page-head__actions :is(.search-wrap, .os-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. */
.os-hsearch { display: flex; align-items: center; flex-grow: 1; min-width: 0; }
.os-hsearch__field { flex-grow: 1; min-width: 0; }
/* Clear the leading search icon. A product input's padding shorthand can override
   a utility `pl-8`, so pad the field input here (higher specificity). */
.os-hsearch__field input { padding-left: 2rem; }
.os-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) {
  /* Top-align so the title's FIRST line rides the hamburger band (below) and a
     wrapped 2nd line flows beneath it — instead of the whole title cluster being
     centred as a unit, which drops the title ~7px below the fixed toggle. */
  .os-page-head { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; }
  .os-page-head > :first-child { flex: 1 1 auto; min-width: 0; }
  /* The shell hamburger is a 44px touch target pinned at top:12 (optical centre
     y=34). Drop the title line and the icon actions into a matching 44px band so
     both sit level with the toggle, not with the taller header box. */
  .os-page-head h1, h1.os-page-head__title { min-height: 44px; display: flex; align-items: center; }
  .os-page-head__sub { display: none; }
  .os-page-head__actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    min-height: 44px;                  /* ride the hamburger band, level with title */
    align-items: center;
  }
  /* 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. */
  .os-page-head__actions form:has(.os-hsearch), .os-page-head__actions > div:has(.os-hsearch) { display: contents; }
  .os-hsearch { flex: 0 0 auto; }
  .os-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;
  }
  .os-hsearch__field { display: none; }
  .os-hsearch.is-open { flex: 1 1 100%; }
  .os-hsearch.is-open .os-hsearch__toggle { display: none; }
  .os-hsearch.is-open .os-hsearch__field { display: block; }
  .os-page-head__actions:has(.os-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. */
  .os-page-head__actions:has(input):not(:has(.os-hsearch)) { flex: 1 1 100%; justify-content: flex-start; }
  .os-page-head__actions > form:has(input) { flex: 1 1 100%; min-width: 0; }
  .os-page-head__actions input { min-width: 0; }
  .os-page-head__actions .os-btn {
    gap: 0;
    width: 40px;
    min-width: 40px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    font-size: 0;
  }
  .os-page-head__actions .os-btn :is(.lucide, .os-lucide), .os-page-head__actions .os-btn > svg { width: 18px; height: 18px; font-size: initial; }
  /* The date stepper (< >) matches the 40px action-button height so the whole
     action cluster reads as one row (it shipped at 34/36px, shorter than the
     buttons). */
  .os-page-head__actions .os-pager { height: 40px; }
  .os-page-head__actions .os-pager :is(.os-pager__step, .os-pager__date) { height: 40px; }
  /* The view toggle collapses to icon-only segments (each option carries a
     Lucide icon). */
  .os-page-head__actions :is(.segmented__option, .os-segmented__option) span { display: none; }
  .os-page-head__actions :is(.segmented__option, .os-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. */
.os-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, auto);
  margin-inline: var(--bleed-mx, 0);
  padding: 12px var(--bleed-pad, 0);
  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. */
/* Underline tabs inside a toolbar band — a `.page-tabs` group sits alongside
   vertically-centered controls (search / filters / view toggle) in the same
   `.dv-page-tools` row, yet its active-tab underline must land flush on the
   band's BOTTOM hairline, not float at the centered mid-line. Stretch the group
   to the full band height (negative block margins cancel the band's 12px
   vertical padding) and drop the tabs' own vertical padding so the 2px
   border-bottom sits on the band edge. This promotes a pattern products were
   re-hacking locally (e.g. HotelOS `.fo-cstrip .fo-tabs`); a standalone
   `.dv-tabnav` band needs none of it (no centered siblings). */
.os-page-tools > :is(.page-tabs, .os-page-tabs) {
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-block: -12px;
}
.os-page-tools > :is(.page-tabs, .os-page-tabs) > :is(.page-tab, .os-page-tab) {
  align-items: center;
  padding-block: 0;
  margin-bottom: 0;
}
.os-page-tools + :not(.os-page-tools):not(:has(.os-page-tools)), .os-page-head + :not(.os-page-tools):not(.os-page-head):not(:has(.os-page-tools)), :is(.page-header, .os-page-header) + :not(.os-page-tools):not(.os-page-head):not(.os-page-band):not(:has(.os-page-tools)) { margin-top: 2rem; padding-top: 0; }
/* `<turbo-frame>` is an unknown element, so it defaults to `display: inline` —
   and vertical margin does nothing on an inline box. Any page whose first body
   element is a frame (a drawer, a lazy panel, a destructive confirm) therefore
   MATCHED the body-gap rule above and still rendered flush against the header.
   It looked like the gap rule was broken; the gap was landing on a box that
   cannot take it. Seen in both consuming apps.

   The `[hidden]` guard below is NOT optional. `[hidden] { display: none }` lives
   in the USER-AGENT stylesheet, and cascade origin is resolved before
   specificity — so this author-origin type selector beats it, and
   `<turbo-frame hidden>` RENDERS. That is the standard turbo-rails idiom for a
   lazy modal/drawer shell, so the rule above silently arms a landmine in every
   consumer without it.

   It also fails ASYMMETRICALLY, which is worse than failing outright: a Tailwind
   consumer gets Preflight's own `[hidden] { display: none }` at (0,1,0), which
   re-wins and masks the bug, while a consumer without Preflight shows it. Same
   markup, two behaviours, gem as the cause. Verified live in the HotelOS
   consumer: a hidden <turbo-frame> computed `display: block` and rendered, while
   a hidden <div> and <span> correctly computed `none`.

   Restore the guard rather than scoping the rule: it is already shipped and
   ~20 frames across both apps now depend on being block, so narrowing it would
   be a behaviour change wearing a bugfix's clothes. */
turbo-frame {
  display: block;
}
turbo-frame[hidden] {
  display: none;
}
.os-spacer { flex: 1 1 auto; }
.os-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. */
.os-tools-select { position: relative; display: inline-flex; align-items: center; }
.os-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;
}
.os-tools-select select:hover { border-color: var(--hairline-strong); }
.os-tools-select select:focus { outline: none; border-color: var(--hairline-strong); }
.os-tools-select__chev {
  position: absolute;
  right: 10px;
  color: var(--muted-2);
  pointer-events: none;
}
.os-page-tools__note {
  font-size: var(--text-xs);
  color: var(--muted-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}
.os-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;
}
.os-toolbtn:hover { background: var(--canvas); color: var(--ink); }
/* Scope tabs — count/amount-forward, mutually-exclusive (one .is-on) */
.os-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) {
  .os-page-tools:has(.os-anchor-stat) > .os-scope-tabs { flex: 0 0 100%; order: 3; }
  .os-page-tools:has(.os-anchor-stat) > .os-spacer { display: none; }
  .os-page-tools:has(.os-anchor-stat) > .os-page-tools__note { order: 1; }
}
/* Number-forward pill: mono count + label on one line, in a fully-rounded
   hairline pill. Active = clean white chip with a soft lift + accent number
   (was an accent-soft fill). Matches the mobile filter-sheet pills 1:1. */
.os-scope-tab {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline);
  cursor: pointer; font: inherit; text-decoration: none; white-space: nowrap;
}
.os-scope-tab:hover { background: var(--canvas); }
.os-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; }
.os-scope-tab__l { font-size: var(--text-sm); color: var(--muted); }
.os-scope-tab.is-on { background: var(--surface); border-color: var(--accent-border, rgba(3,105,161,0.18)); box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
.os-scope-tab.is-on .os-scope-tab__n { color: var(--accent); }
.os-scope-tab.is-on .os-scope-tab__l { color: var(--ink); }
.os-scope-tab__n--neg  { color: var(--error, #c13028); }
.os-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. */
.os-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. */
:is(.search-hide, .os-search-hide), :is(.cert-hide, .os-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.) */
.os-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;
}
.os-filter-btn:hover { border-color: var(--hairline-strong); }
.os-filter-btn svg, .os-filter-btn [data-lucide] { color: var(--muted-2); flex-shrink: 0; }
.os-filter-btn__chev { margin-left: 2px; }
.os-filter-btn--pill { border-radius: 999px; color: var(--muted); }
.os-filter-btn--pill:hover { color: var(--ink); }
.os-filter-btn.is-on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.os-filter-btn.is-on svg, .os-filter-btn.is-on [data-lucide] { color: var(--accent); }
/* ── Filter bar (full-control row) ────────────────────────────────────
   A wrapping row of full-size form controls (search input, selects, 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). Shell/framework-agnostic: normalises by
   ELEMENT + gem field classes (`.dv-select`, `.dv-field`), not any product form
   namespace — a consumer's own inputs/selects placed in the bar are covered. */
.os-filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select, .os-select, .os-select-field) { 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). Apply `.dv-check`
   to the toggle wrapper. */
.os-filter-bar .os-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;
}
.os-filter-bar .os-check:hover { background: var(--canvas); }
/* Ledger title-level date nav (.dv-pager) + today tag */
.os-pager { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.os-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;
}
.os-pager__step:hover { background: var(--canvas); color: var(--ink); }
.os-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;
}
.os-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) */
.os-anchor-stat { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.os-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). */
.os-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; }
.os-anchor-stat__value--pos { color: var(--confirmed); }
.os-anchor-stat__value--neg { color: var(--error, #c13028); }
/* ═══════════════════════════════════════════════════════════════════════
   Mobile list header (≤640) — inline, no collapse. The row-2 tools bar stays
   visible as one horizontal-scroll strip (a bottom-sheet collapse was tried and
   removed: a fixed overlay fought the app's board views, transformed shell
   containers and Turbo lifecycle, and a filter you can't see is a filter you
   can't use). The slim title bar (row 1) pins on scroll.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* The whole slim title bar sticks to the top on scroll, so the title, search
     and actions stay reachable down a long list.

     z-index kept LOW on purpose: a sticky (positioned) element already paints
     above the in-flow list without any z-index, so `5` is only here to order it
     against other positioned content. Critically it must stay BELOW the shell's
     fixed mobile nav toggle (the hamburger the shell overlays top-left) so the
     pinned white band never paints over it — shells put that toggle above
     content, and 5 leaves ample room under it. */
  .os-page-head {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Tighten the desktop 32/18 padding to a symmetric phone rhythm. This both
       shrinks the bulky bar to the compact height the mocks show AND centres the
       title/actions cluster at ~32px from the pinned top — the vertical centre a
       shell hamburger sits at — so the toggle and the header row line up. */
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: center;
  }

  /* Smaller pinned title — the desktop display size reads as oversized on a
     phone bar; step it down to the 2xl step (the mock size). */
  .os-page-head h1, h1.os-page-head__title { font-size: var(--text-2xl); }

  /* Equal-height action controls — search, the view toggle and the primary CTA
     all land on ONE 40px height so the cluster reads as a tidy row (the
     segmented control shipped taller than the icon buttons). */
  .os-page-head__actions :is(.os-btn, .os-btn--primary, .segmented, .os-segmented,
    .os-hsearch__toggle) {
    height: 40px;
  }
  .os-page-head__actions :is(.segmented, .os-segmented) { align-items: center; }

  /* Inline tools row: one horizontal-scroll strip so scope tabs + facet chips
     never wrap into a ragged multi-row block; swipe sideways to reach the rest.

     Sticks BELOW the pinned title bar (top = the header's height, set as
     `--os-tools-top` by the consumer's `page-tools` controller), so the two
     bands stack instead of colliding at top:0 (the "double bar"). z-index 4 is
     below the title bar (z 5) so the row slides up BEHIND it when hidden. The
     controller reveals it on scroll-UP (removes `--hidden`) and hides it on a
     sustained scroll-DOWN — quick access to filters without permanent chrome. */
  .os-page-tools {
    position: sticky;
    top: var(--os-tools-top, 0);
    z-index: 4;
    transition: transform 0.24s var(--ease-out-quart, ease);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .os-page-tools.os-page-tools--hidden { transform: translateY(-165%); }
  /* When pinned on phones the row stacks BELOW the title bar, so it needs NO
     hamburger gutter — but it must keep the normal content inset (bleed-pad), so
     the first scope tab sits inset at rest and the strip still scrolls full-bleed
     to the edge. (The `page-tools` controller's --pinned gutter, meant for the
     top:0 case, would otherwise leave a 64px gap.) */
  .os-page-tools.os-page-tools--pinned { padding-left: var(--bleed-pad, 16px); }
  .os-page-tools::-webkit-scrollbar { display: none; }
  .os-page-tools > * { flex: 0 0 auto; }
  .os-page-tools > .os-spacer { display: none; }
  .os-page-tools .os-scope-tabs { flex-wrap: nowrap; }
}
/* ═══════════════════════════════════════════════════════════════════════
   Mobile treatment for the OTHER header component — `page_header`
   (`.os-page-band.page-header`), used by form / settings / simple pages. The
   same phone polish the list header (`.os-page-head`) gets, so a page reads the
   same on mobile regardless of which header component it was built with:
   pinned slim bar, stepped-down title, equal-height actions. Loaded after
   patterns.css, so these win over the component's base rules there.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :is(.page-header, .os-page-header) {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Tighten the desktop space-8/space-6 padding to the same compact phone
       rhythm as the list header. (`margin-top: -56px` from patterns.css keeps
       the bleed-up.) Clear the shell nav toggle HORIZONTALLY via the nav gutter
       (like `.os-page-head`), so the title sits BESIDE the hamburger, not below
       it — consistent across both header components. */
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: var(--dv-nav-gutter, 0);
  }
  :is(.page-header, .os-page-header) h1 { font-size: var(--text-2xl); }
  :is(.page-header__row, .os-page-header__row) { align-items: center; }
  /* Equal-height actions, matching the list header's 40px cluster. */
  :is(.page-header__actions, .os-page-header__actions) :is(.hero-show__action,
    .os-hero-show__action, .os-btn, .segmented, .os-segmented) {
    height: 40px;
  }

  /* Detail headers — hand-rolled `.os-page-band` bands carrying an entity title
     + status + actions (a booking, a dive trip, a diver). Same compact rhythm
     and stepped title, and clear the hamburger HORIZONTALLY via the gutter
     instead of the 72px vertical clearance that left a big top gap. Non-sticky:
     on these pages the band-2 tab nav (`.os-tabnav`) is what pins. `:has(h1)`
     keeps this off stat strips + tab navs; excludes page_header (above) + navs. */
  .os-page-band:has(h1):not(.os-tabnav):not(.page-header):not(.os-page-header):not(nav) {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: var(--dv-nav-gutter, 0);
  }
  .os-page-band:not(.os-tabnav) h1 { font-size: var(--text-2xl); }

  /* Band-2 tab nav: when it pins to the top it collides with the fixed
     hamburger, so inset the tab row by the gutter while stuck (the `stuck`
     controller adds `.is-stuck`). At rest it sits below the header, un-inset. */
  .os-tabnav.is-stuck { padding-left: var(--dv-nav-gutter, 0); }
}
/* ─────────────────────────────────────────────────────────────────────
   header_band — DiveOS integration layer.

   The COMPONENT now comes from os-ds (`os_ds/components/header_band.css`,
   imported in application.css just above this file). This sheet holds only
   the rules the gem cannot own:

     - adaptations to DiveOS's shell (.diveos-main, the mobile hamburger)
     - a fix for a Bullet Train theme leak (.bulk-actions)
     - the one token the gem expects the host app to supply

   De-vendored 2026-07-21. 119 of the previous 125 local rules were
   byte-identical to the gem and were deleted; what remains is below.

   PARITY NOTE — the gem tokenised the nav gutter as
   `nav.dv-page-band { padding-left: var(--dv-nav-gutter, 0) }`, where the
   old local copy hardcoded 64px. Without the :root token below, that
   gutter silently collapses to 0 with no error and no failing test.
   ───────────────────────────────────────────────────────────────────── */
/* Gutters the gem reads but does not define — the host app supplies them,
   because only the host knows it has a fixed mobile hamburger.
     --dv-nav-gutter     → horizontal inset  (was hardcoded 64px locally)
     --dv-nav-gutter-top → vertical clearance (was hardcoded 72px locally)
   Both fall back to 0 in the gem, so omitting either collapses the gutter
   silently: no error, no failing test. --dv-nav-gutter-top only bites below
   1023px, which is why a desktop-only visual check cannot catch it. */
:root {
  --dv-nav-gutter: 64px;
  --dv-nav-gutter-top: 72px;
}
/* Bullet Train's 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. */
:is(.bulk-actions, .os-bulk-actions) :is(.dv-table-wrap, .os-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. */
:is(.bulk-actions, .os-bulk-actions) :is(.dv-table-wrap, .os-table-wrap) tbody td:nth-child(2) { padding-left: var(--space-3); }
/* ── Filter bar control sizing ────────────────────────────────────────
   A wrapping row of full-size form controls normalised to the canonical
   46px field height so the row aligns on one baseline by construction.
   Depends on DiveOS's .diveos-input/.diveos-select, so it stays local. */
:is(.dv-filter-bar, .os-filter-bar) :is(.diveos-input, .os-input), :is(.dv-filter-bar, .os-filter-bar) :is(.diveos-select, .os-field-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). */
:is(.dv-filter-bar, .os-filter-bar) :is(.diveos-check, .os-field-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;
}
:is(.dv-filter-bar, .os-filter-bar) :is(.diveos-check, .os-field-check):hover { background: var(--canvas); }
/* Mobile header gutter: OWNED BY os-ds, not here. The gem's header_band.css
   already parametrises every mobile rule on `--dv-nav-gutter` /
   `--dv-nav-gutter-top` (list header left gutter, detail-band top clearance,
   the `--pinned` tools gutter, and the ≤640 compact treatment). The shell's ONLY
   job is to supply those values — done in the `:root` block above. The block
   that used to re-hardcode 64px/72px here was pure duplication and drift; it was
   removed so DiveOS inherits the generic pattern from OS. */
/* 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. */
.os-table { width: 100%; border-collapse: collapse; }
/* ── Primary cell text (the row's headline: name, ID, title) ──────────── */
.os-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). */
.os-table__primary a, a.os-table__primary {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.os-table__primary a:hover, a.os-table__primary:hover {
  color: var(--accent);
  text-decoration: none;
}
/* ── Sub text (secondary line under the primary: email, brand, serial) ─── */
.os-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 ── */
.os-table__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.os-table__stack .os-table__sub { margin-top: 2px; }
/* ── Meta cell (neutral data: dates, counts, specialties, condition) ───── */
.os-table__meta {
  font-size: var(--text-sm);
  color: var(--muted);
}
.os-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. */
.os-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. ─────────────── */
.os-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) }`). ──── */
.os-table tbody tr.is-interactive { cursor: pointer; }
.os-table tbody tr.is-interactive:hover, .os-table tbody tr.is-interactive:focus-within { background: var(--hover-warm); }
.os-table tbody tr.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.os-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. */
.os-table--avatar td:first-child .os-table__cell, .os-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). */
.os-table--compact td:not([class*="py-"]) {
  padding-top: var(--space-2, 8px);
  padding-bottom: var(--space-2, 8px);
}
.os-table--compact .os-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). */
.os-table--numeric td.os-table__num, .os-table--numeric th.os-table__num, .os-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.os-table--numeric td.os-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. */
.os-table-wrap { --dv-pin-bg: var(--surface); }
.os-table-wrap thead th.os-table__actions { --dv-pin-bg: var(--canvas); }
.os-table-wrap tbody tr:hover { --dv-pin-bg: var(--sky-50); }
.os-table-wrap tbody tr.is-selected { --dv-pin-bg: var(--accent-soft); }
.os-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. */
.os-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;
}
.os-table-wrap.is-scrollable .os-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) {
  .os-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. */
  .os-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). */
  .os-table-wrap--stack table { min-width: 0; width: 100%; display: block; }
  .os-table-wrap--stack tbody { display: block; }
  .os-table-wrap--stack thead { display: none; }

  .os-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);
  }
  .os-table-wrap--stack tbody tr + tr { margin-top: var(--space-3, 12px); }

  /* Card-stack has no horizontal scroll, so the pinned/sticky action column is
     pointless here — worse, its stacking context paints cells OVER a sticky page
     header while the list scrolls (the row's "…/Fit gear" cell surfacing above
     the pinned title). Flatten every cell to normal flow in card mode.
     !important because the sticky rule that sets the high z is more specific. */
  .os-table-wrap--stack tbody td,
  .os-table-wrap--stack tbody th,
  .os-table-wrap--stack .os-table__actions {
    position: static !important;
    z-index: auto !important;
  }

  /* 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. */
  .os-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. */
  .os-table-wrap--stack tbody td.os-td-empty { display: none; }
  .os-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. */
  .os-table-wrap--stack tbody td:not([data-label])::before, .os-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. */
  .os-table-wrap--stack tbody td:is(.cursor-grab, .os-cursor-grab), .os-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. */
  .os-table-wrap--stack tbody td:first-child, .os-table-wrap--stack tbody td:is(.cursor-grab, .os-cursor-grab) + td, .os-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;
  }
  .os-table-wrap--stack tbody td:first-child::before, .os-table-wrap--stack tbody td:is(.cursor-grab, .os-cursor-grab) + td::before, .os-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td::before { content: none; }
  .os-table-wrap--stack tbody td:first-child .os-table__primary, .os-table-wrap--stack tbody td:is(.cursor-grab, .os-cursor-grab) + td .os-table__primary, .os-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td .os-table__primary {
    font-weight: 600;
    color: var(--accent);
  }
  .os-table-wrap--stack tbody td:first-child .os-table__primary a, .os-table-wrap--stack tbody td:is(.cursor-grab, .os-cursor-grab) + td .os-table__primary a, .os-table-wrap--stack tbody td:has([data-sortable-target="handle"]) + td .os-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. */
  .os-table-wrap--stack .os-table__actions {
    position: static;
    background: transparent;
    box-shadow: none;
    justify-content: flex-end;
    padding: 0;
    margin-top: var(--space-2, 8px);
    border-top: 0;
  }
  .os-table-wrap--stack .os-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. */
.os-stat-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
/* ── Card shell ─────────────────────────────────────────────────────── */
.os-stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
/* ── Label (uppercase eyebrow) ──────────────────────────────────────── */
.os-stat-card-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* ── Value (mono numeric) ───────────────────────────────────────────── */
.os-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. */
.os-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);
}
.os-stat-card--interactive:hover { border-color: var(--hairline-strong); }
.os-stat-card--interactive:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.os-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. ──── */
.os-stat-card-sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.os-stat-card-sub strong { font-weight: 600; color: var(--ink); }
.os-stat-card-sub a { color: var(--accent); font-weight: 500; }
.os-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. */
.os-stat-card-grid--full { grid-template-columns: 1fr; }
.os-stat-card-grid--4 { grid-template-columns: 1fr; }
.os-stat-card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .os-stat-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-stat-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .os-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.
   ───────────────────────────────────────────────────────────────────────── */
.os-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;
}
.os-callout__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-0-5);
}
.os-callout__icon svg, .os-callout__icon [data-lucide] {
  width: 16px;
  height: 16px;
}
.os-callout__content {
  flex: 1 1 auto;
  min-width: 0;
}
.os-callout__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.os-callout__title {
  font-weight: 600;
  color: var(--ink);
}
.os-callout__body {
  color: var(--text-secondary);
}
.os-callout__title + .os-callout__body {
  margin-top: var(--space-0-5);
}
.os-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 ───────────────────────────────────────────────────────────────── */
.os-callout--info {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--ink);
}
.os-callout--info .os-callout__icon, .os-callout--info .os-callout__eyebrow {
  color: var(--accent);
}
.os-callout--briefing {
  background: var(--briefing-bg);
  border-color: var(--briefing-border);
  color: var(--briefing);
}
.os-callout--briefing .os-callout__icon, .os-callout--briefing .os-callout__eyebrow, .os-callout--briefing .os-callout__title {
  color: var(--briefing);
}
.os-callout--confirmed {
  background: var(--confirmed-bg);
  border-color: var(--confirmed-border);
  color: var(--confirmed);
}
.os-callout--confirmed .os-callout__icon, .os-callout--confirmed .os-callout__eyebrow, .os-callout--confirmed .os-callout__title {
  color: var(--confirmed);
}
.os-callout--cancelled {
  background: var(--cancelled-bg);
  border-color: var(--cancelled-border);
  color: var(--cancelled);
}
.os-callout--cancelled .os-callout__icon, .os-callout--cancelled .os-callout__eyebrow, .os-callout--cancelled .os-callout__title {
  color: var(--cancelled);
}
.os-callout--inwater {
  background: var(--inwater-bg);
  border-color: var(--inwater-border);
  color: var(--inwater);
}
.os-callout--inwater .os-callout__icon, .os-callout--inwater .os-callout__eyebrow, .os-callout--inwater .os-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>
   ─────────────────────────────────────────────────────────────────────────── */
.os-segment {
  display: inline-flex;
  gap: 0.5rem;
}
.os-segment--block {
  display: flex;
  width: 100%;
}
.os-segment__option {
  flex: 1 1 0;
  cursor: pointer;
}
.os-segment__label {
  display: block;
  text-align: center;
  /* Density via vertical padding — same reasoning as .os-segmented__option in
     patterns.css: this label declares no height and is sized by its line box,
     so introducing a min-height would impose a floor it has never had.
     (36 − 20) / 2 = 8px at base density, identical to the 0.5rem literal it
     replaces; the 8px floor holds --compact at today's size. */
  padding: max(8px, calc((var(--control-h) - 20px) / 2)) 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;
}
.os-segment__option:hover .os-segment__label {
  background-color: var(--surface-alt);
}
.os-segment__input:checked + .os-segment__label {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.os-segment__input:focus-visible + .os-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. */
.os-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}
.os-breadcrumb__crumb { color: var(--muted); text-decoration: none; }
.os-breadcrumb__crumb:hover { color: var(--ink); }
.os-breadcrumb__crumb--current { color: var(--ink); font-weight: 600; }
.os-breadcrumb__sep { display: inline-flex; color: var(--muted-2); }
/* Phones: the full trail is noise — the last crumb is the current page, which
   just repeats the <h1> beneath it. Collapse to a single `‹ Parent` back-link
   (the immediate parent, tagged `--parent` by the partial). Chevron is a CSS
   corner so no extra markup. Desktop keeps the full trail. */
@media (max-width: 640px) {
  .os-breadcrumb__sep,
  .os-breadcrumb__crumb:not(.os-breadcrumb__crumb--parent) { display: none; }
  .os-breadcrumb__crumb--parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-weight: 500;
  }
  .os-breadcrumb__crumb--parent::before {
    content: "";
    width: 7px;
    height: 7px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
  }
}
/* ─────────────────────────────────────────────────────────────────────
   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.
   ───────────────────────────────────────────────────────────────────── */
.os-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. */
.os-chart-card--raised { box-shadow: var(--shadow-sm); }
/* Head — title (left) + optional actions (right). */
.os-chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.os-chart-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: var(--font-display);
}
.os-chart-card__sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.os-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. */
.os-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
   ───────────────────────────────────────────────────────────────────── */
:is(.dv-share-card, .os-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. */
:is(.dv-share-card--boxed, .os-share-card--boxed) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
}
:is(.dv-share-card--boxed, .os-share-card--boxed):is(.dv-share-card--sm, .os-share-card--sm) { padding: 12px; }
:is(.dv-share-card--boxed, .os-share-card--boxed):is(.dv-share-card--lg, .os-share-card--lg) { padding: 20px; }
/* Head — leading icon + eyebrow title. */
:is(.dv-share-card__head, .os-share-card__head) {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.dv-share-card__head, .os-share-card__head) svg, :is(.dv-share-card__head, .os-share-card__head) [data-lucide] { color: var(--accent); flex-shrink: 0; }
/* Description line. */
:is(.dv-share-card__desc, .os-share-card__desc) { margin-top: -2px; }
/* Body — link chip + actions (horizontal: QR sits beside via __layout). */
:is(.dv-share-card__body, .os-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. */
:is(.dv-share-card__field, .os-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;
}
:is(.dv-share-card__actions, .os-share-card__actions) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* QR tile — boxed crop on the canvas surface. */
:is(.dv-share-card__qr, .os-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;
}
:is(.dv-share-card__qr, .os-share-card__qr) svg { display: block; }
:is(.dv-share-card__qr-cap, .os-share-card__qr-cap) { margin-top: 8px; text-align: center; }
/* QR + Download button, stacked. The button spans the tile width beneath it. */
.os-share-card__qr-group {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.os-share-card__qr-dl { justify-content: 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. */
:is(.dv-share-card__layout, .os-share-card__layout) {
  display: flex;
  align-items: center;   /* QR + its link/actions read as one balanced pair */
  gap: 16px;
  min-width: 0;
}
:is(.dv-share-card__layout, .os-share-card__layout) > :is(.dv-share-card__col, .os-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) {
  :is(.dv-share-card__layout, .os-share-card__layout) { flex-direction: column; align-items: stretch; }
  :is(.dv-share-card__layout, .os-share-card__layout) > :is(.dv-share-card__qr, .os-share-card__qr, .os-share-card__qr-group) { 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. */
:is(.dv-share-card--vertical, .os-share-card--vertical) :is(.dv-share-card__qr, .os-share-card__qr, .os-share-card__qr-group) { align-self: flex-start; }
/* Disclosure (collapsible QR) — accent summary, no marker, tidy spacing. */
:is(.dv-share-card__disclosure, .os-share-card__disclosure) { margin-top: 0; }
:is(.dv-share-card__disclosure, .os-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);
}
:is(.dv-share-card__disclosure, .os-share-card__disclosure) > summary::-webkit-details-marker { display: none; }
:is(.dv-share-card__disclosure, .os-share-card__disclosure) > summary:hover { color: var(--accent-strong); }
:is(.dv-share-card__disclosure, .os-share-card__disclosure) > summary svg { flex-shrink: 0; }
:is(.dv-share-card__disclosure, .os-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). */
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--boxed, .os-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. */
:is(.dv-share-card--accent, .os-share-card--accent) :is(.dv-share-card__head, .os-share-card__head) {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 16px;
  margin: 0;
}
:is(.dv-share-card--accent, .os-share-card--accent) :is(.dv-share-card__head, .os-share-card__head) :is(.dv-eyebrow, .os-eyebrow) { color: var(--accent); }
/* Padded body wrapper below the band; owns the vertical rhythm. */
:is(.dv-share-card--accent, .os-share-card--accent) :is(.dv-share-card__content, .os-share-card__content) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 16px;
  min-width: 0;
}
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--sm, .os-share-card--sm) :is(.dv-share-card__head, .os-share-card__head) { padding: 8px 12px; }
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--sm, .os-share-card--sm) :is(.dv-share-card__content, .os-share-card__content) { padding: 12px; }
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--lg, .os-share-card--lg) :is(.dv-share-card__head, .os-share-card__head) { padding: 12px 20px; }
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--lg, .os-share-card--lg) :is(.dv-share-card__content, .os-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. */
:is(.dv-share-card--accent, .os-share-card--accent) :is(.dv-share-card__qr, .os-share-card__qr) {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* Larger than the old 132px: the walk-in QR is scanned off a screen / print,
   so bigger modules read more reliably. The SVG carries a viewBox (qr_svg), so
   this scales the whole code — it never clips. */
:is(.dv-share-card--accent, .os-share-card--accent) :is(.dv-share-card__qr, .os-share-card__qr) svg {
  width: 168px;
  height: 168px;
}
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--sm, .os-share-card--sm) :is(.dv-share-card__qr, .os-share-card__qr) svg { width: 104px; height: 104px; }
:is(.dv-share-card--accent, .os-share-card--accent):is(.dv-share-card--lg, .os-share-card--lg) :is(.dv-share-card__qr, .os-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. */
:is(.dv-share-card__field--inline, .os-share-card__field--inline) {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;  /* tighter right pad — ghost buttons sit inside */
}
:is(.dv-share-card__url, .os-share-card__url) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.dv-share-card--quiet, .os-share-card--quiet) :is(.dv-share-card__actions, .os-share-card__actions) { flex-shrink: 0; gap: 2px; }
/* 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 ───────────────────────────────────────────────── */
:is(.pkb-stack, .os-pkb-stack) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:is(.pkb-optcard, .os-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;
}
:is(.pkb-optcard, .os-pkb-optcard):hover {
  border-color: var(--accent-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
:is(.pkb-optcard, .os-pkb-optcard).is-on {
  border-color: var(--accent);
  background: var(--accent-softer);
}
:is(.pkb-optcard, .os-pkb-optcard):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:is(.pkb-optcard__icon, .os-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;
}
:is(.pkb-optcard__body, .os-pkb-optcard__body) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
:is(.pkb-optcard__title, .os-pkb-optcard__title) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
:is(.pkb-optcard__desc, .os-pkb-optcard__desc) {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}
:is(.pkb-optcard__price, .os-pkb-optcard__price) {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
:is(.pkb-optcard, .os-pkb-optcard).is-on :is(.pkb-optcard__price, .os-pkb-optcard__price) { color: var(--accent); }
/* check indicator — round (single) / square (multi via --square) */
:is(.pkb-optcard__check, .os-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;
}
:is(.pkb-optcard__check--square, .os-pkb-optcard__check--square) { border-radius: var(--radius-sm); }
:is(.pkb-optcard, .os-pkb-optcard).is-on :is(.pkb-optcard__check, .os-pkb-optcard__check) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
/* the check glyph is hidden until selected (color:transparent above) */
:is(.pkb-optcard__check, .os-pkb-optcard__check) svg { width: 14px; height: 14px; }
/* ─── 2. Vertical step rail ────────────────────────────────────────── */
:is(.pkb-vrail, .os-pkb-vrail) {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  position: sticky;
  top: 48px;
  align-self: start;
}
:is(.pkb-vrail__brand, .os-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);
}
:is(.pkb-vrail__brand, .os-pkb-vrail__brand) :is(.pkb-vrail__brand-ic, .os-pkb-vrail__brand-ic) {
  color: var(--accent);
  display: flex;
  flex-shrink: 0;
}
:is(.pkb-vrail__steps, .os-pkb-vrail__steps) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(.pkb-vstep, .os-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;
}
:is(.pkb-vstep, .os-pkb-vstep)[disabled] { opacity: 0.55; cursor: not-allowed; }
/* the vertical bar (replaces a circle) */
:is(.pkb-vstep, .os-pkb-vstep) :is(.bar, .os-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;
}
:is(.pkb-vstep, .os-pkb-vstep) :is(.lbrow, .os-lbrow) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
:is(.pkb-vstep, .os-pkb-vstep) :is(.tk, .os-tk) {
  display: none;
  align-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
:is(.pkb-vstep, .os-pkb-vstep) :is(.tk, .os-tk) svg { width: 15px; height: 15px; }
:is(.pkb-vstep, .os-pkb-vstep) :is(.lb, .os-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 */
:is(.pkb-vstep, .os-pkb-vstep).is-done { color: var(--text-secondary); cursor: pointer; }
:is(.pkb-vstep, .os-pkb-vstep).is-done :is(.bar, .os-bar) { background: var(--accent); }
:is(.pkb-vstep, .os-pkb-vstep).is-done :is(.tk, .os-tk) { display: flex; }
/* nav (any reachable, non-current step) — gray hover affordance */
:is(.pkb-vstep, .os-pkb-vstep).is-nav { cursor: pointer; }
:is(.pkb-vstep, .os-pkb-vstep).is-nav:hover { background: var(--gray-100); }
:is(.pkb-vstep, .os-pkb-vstep).is-nav:hover :is(.bar, .os-bar) { background: var(--accent); }
/* on — accent-soft pill, raised halo'd bar, leading dot, bold accent label */
:is(.pkb-vstep, .os-pkb-vstep).is-on {
  background: var(--accent-soft);
  color: var(--accent);
  cursor: default;
}
:is(.pkb-vstep, .os-pkb-vstep).is-on :is(.bar, .os-bar) {
  height: 20px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
:is(.pkb-vstep, .os-pkb-vstep).is-on :is(.lb, .os-lb) { font-weight: 600; }
/* leading dot for the current step */
:is(.pkb-vstep, .os-pkb-vstep).is-on :is(.lbrow, .os-lbrow)::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex-shrink: 0;
}
:is(.pkb-vstep, .os-pkb-vstep):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
:is(.pkb-vrail__count, .os-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. */
:is(.pkb-slider, .os-pkb-slider) {
  position: relative;
  height: 24px;
  margin: 6px 0;
  display: flex;
  align-items: center;
}
/* the real range input — full-bleed, invisible, drives the value */
:is(.pkb-slider__input, .os-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;
}
:is(.pkb-slider__input, .os-pkb-slider__input):focus { outline: none; }
:is(.pkb-slider__input, .os-pkb-slider__input)::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  background: transparent;
}
:is(.pkb-slider__input, .os-pkb-slider__input)::-moz-range-track { height: 100%; background: transparent; }
/* the native thumb is invisible but full-height so the whole bar is grabbable */
:is(.pkb-slider__input, .os-pkb-slider__input)::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
:is(.pkb-slider__input, .os-pkb-slider__input)::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
/* visible track (full, gray) */
:is(.pkb-slider__track, .os-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) */
:is(.pkb-slider__fill, .os-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:%) */
:is(.pkb-slider__thumb, .os-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;
}
:is(.pkb-slider__thumb, .os-pkb-slider__thumb)::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
:is(.pkb-slider, .os-pkb-slider):hover :is(.pkb-slider__thumb, .os-pkb-slider__thumb) {
  box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-sm);
}
:is(.pkb-slider__input, .os-pkb-slider__input):focus-visible ~ :is(.pkb-slider__thumb, .os-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. */
:is(.pkb-pillgroup, .os-pkb-pillgroup) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:is(.pkb-pill, .os-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;
}
:is(.pkb-pill, .os-pkb-pill):hover { border-color: var(--accent-border); }
/* visually-hidden radio (kept focusable for a11y) */
:is(.pkb-pill__radio, .os-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 */
:is(.pkb-pill, .os-pkb-pill):has(:is(.pkb-pill__radio, .os-pkb-pill__radio):checked) {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
:is(.pkb-pill, .os-pkb-pill):has(:is(.pkb-pill__radio, .os-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). */
:is(.diveos-checkbox--round, .os-checkbox--round) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* visually-hidden native input (focusable, not display:none) */
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__input, .os-pkb-checkbox__input) {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__box, .os-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;
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__box, .os-pkb-checkbox__box) svg { width: 14px; height: 14px; }
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__input, .os-pkb-checkbox__input):checked + :is(.pkb-checkbox__box, .os-pkb-checkbox__box) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__input, .os-pkb-checkbox__input):focus-visible + :is(.pkb-checkbox__box, .os-pkb-checkbox__box) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__label, .os-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. */
:is(.pkb-slider, .os-pkb-slider) {
  position: relative;
  height: 24px;
  margin: 6px 0;
  display: flex;
  align-items: center;
}
/* the real range input — full-bleed, invisible, drives the value */
:is(.pkb-slider__input, .os-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;
}
:is(.pkb-slider__input, .os-pkb-slider__input):focus { outline: none; }
:is(.pkb-slider__input, .os-pkb-slider__input)::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  background: transparent;
}
:is(.pkb-slider__input, .os-pkb-slider__input)::-moz-range-track { height: 100%; background: transparent; }
/* the native thumb is invisible but full-height so the whole bar is grabbable */
:is(.pkb-slider__input, .os-pkb-slider__input)::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
:is(.pkb-slider__input, .os-pkb-slider__input)::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}
/* visible track (full, gray) */
:is(.pkb-slider__track, .os-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) */
:is(.pkb-slider__fill, .os-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:%) */
:is(.pkb-slider__thumb, .os-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;
}
:is(.pkb-slider__thumb, .os-pkb-slider__thumb)::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
:is(.pkb-slider, .os-pkb-slider):hover :is(.pkb-slider__thumb, .os-pkb-slider__thumb) {
  box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-sm);
}
:is(.pkb-slider__input, .os-pkb-slider__input):focus-visible ~ :is(.pkb-slider__thumb, .os-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. */
:is(.pkb-pillgroup, .os-pkb-pillgroup) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:is(.pkb-pill, .os-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;
}
:is(.pkb-pill, .os-pkb-pill):hover { border-color: var(--accent-border); }
/* visually-hidden radio (kept focusable for a11y) */
:is(.pkb-pill__radio, .os-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 */
:is(.pkb-pill, .os-pkb-pill):has(:is(.pkb-pill__radio, .os-pkb-pill__radio):checked) {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
:is(.pkb-pill, .os-pkb-pill):has(:is(.pkb-pill__radio, .os-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). */
:is(.diveos-checkbox--round, .os-checkbox--round) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* visually-hidden native input (focusable, not display:none) */
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__input, .os-pkb-checkbox__input) {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__box, .os-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;
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__box, .os-pkb-checkbox__box) svg { width: 14px; height: 14px; }
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__input, .os-pkb-checkbox__input):checked + :is(.pkb-checkbox__box, .os-pkb-checkbox__box) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__input, .os-pkb-checkbox__input):focus-visible + :is(.pkb-checkbox__box, .os-pkb-checkbox__box) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
:is(.diveos-checkbox--round, .os-checkbox--round) :is(.pkb-checkbox__label, .os-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) */
:is(.diveos-content--full, .os-content--full) {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}
:is(.pkb-guided, .os-pkb-guided) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 1px);
  background: var(--canvas);
}
:is(.pkb-guided__grid, .os-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 */
:is(.pkb-guided__center, .os-pkb-guided__center) {
  min-width: 0;
  display: flex;
  justify-content: center;
}
:is(.pkb-guided-inner, .os-pkb-guided-inner) {
  width: 100%;
  max-width: 660px;
  text-align: center;
}
/* shared step chrome */
:is(.pkb-guided, .os-pkb-guided) :is(.step-eyebrow, .os-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;
}
:is(.pkb-guided-q, .os-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;
}
:is(.pkb-guided-help, .os-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 */
:is(.pkb-guided-body, .os-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 */
:is(.pkb-guided-body--center, .os-pkb-guided-body--center) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
:is(.pkb-guided-body--center, .os-pkb-guided-body--center) :is(.pkb-pillgroup, .os-pkb-pillgroup) { justify-content: center; }
/* big underline field (Name step) */
:is(.pkb-bigfield, .os-pkb-bigfield) {
  margin-top: 32px;
}
:is(.pkb-bigfield__input, .os-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;
}
:is(.pkb-bigfield__input, .os-pkb-bigfield__input)::-moz-placeholder { color: var(--input-placeholder); }
:is(.pkb-bigfield__input, .os-pkb-bigfield__input)::placeholder { color: var(--input-placeholder); }
:is(.pkb-bigfield__input, .os-pkb-bigfield__input):focus {
  outline: none;
  border-bottom-color: var(--accent);
}
/* inline header row (e.g. duration/pax on the Dives step) */
:is(.pkb-inline-row, .os-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);
}
:is(.pkb-inline-field, .os-pkb-inline-field) {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(.pkb-inline-field__label, .os-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);
}
:is(.pkb-inline-field__control, .os-pkb-inline-field__control) {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.pkb-num, .os-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;
}
:is(.pkb-num, .os-pkb-num):focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
:is(.pkb-inline-field__suffix, .os-pkb-inline-field__suffix) { font-size: var(--text-sm); color: var(--muted); }
/* native toggle (flexible duration) */
:is(.pkb-toggle, .os-pkb-toggle) { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
:is(.pkb-toggle__input, .os-pkb-toggle__input) { position: absolute; opacity: 0; width: 0; height: 0; }
:is(.pkb-toggle__track, .os-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;
}
:is(.pkb-toggle__track, .os-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;
}
:is(.pkb-toggle__input, .os-pkb-toggle__input):checked + :is(.pkb-toggle__track, .os-pkb-toggle__track) { background: var(--accent); }
:is(.pkb-toggle__input, .os-pkb-toggle__input):checked + :is(.pkb-toggle__track, .os-pkb-toggle__track)::after { transform: translateX(16px); }
:is(.pkb-toggle__input, .os-pkb-toggle__input):focus-visible + :is(.pkb-toggle__track, .os-pkb-toggle__track) { box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.pkb-toggle__state, .os-pkb-toggle__state) { font-size: var(--text-sm); color: var(--muted); }
/* review ledger (Review step) */
:is(.pkb-guided-review, .os-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;
}
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid var(--hairline-2);
}
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr):first-child { border-top: 0; }
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) :is(.ic, .os-ic) { color: var(--accent); display: flex; flex-shrink: 0; }
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) :is(.k, .os-k) { flex: 1; min-width: 0; color: var(--muted); font-size: var(--text-sm); }
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) :is(.v, .os-v) { color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-align: right; }
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) :is(.v, .os-v):is(.mono, .os-mono) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) :is(.v, .os-v).is-profit { color: var(--confirmed); font-weight: 700; }
/* component-summary row: small uppercase category tag before the item name */
:is(.pkb-guided-review, .os-pkb-guided-review) :is(.rr, .os-rr) :is(.rr-cat, .os-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) */
:is(.pkb-guided-count, .os-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 */
:is(.pkb-guided-foot, .os-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);
}
:is(.pkb-guided-hintrow, .os-pkb-guided-hintrow) {
  font-size: var(--text-sm);
  color: var(--muted-2);
}
/* footer status segmented control */
:is(.pkb-foot-div, .os-pkb-foot-div) { width: 1px; height: 22px; background: var(--hairline); }
:is(.pkb-statusfield, .os-pkb-statusfield) { display: inline-flex; align-items: center; gap: 10px; }
:is(.pkb-statusfield__lbl, .os-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);
}
:is(.pkb-statusseg, .os-pkb-statusseg) {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-alt); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
:is(.pkb-statusseg__opt, .os-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;
}
:is(.pkb-statusseg__opt, .os-pkb-statusseg__opt):hover { color: var(--ink); }
:is(.pkb-statusseg__opt, .os-pkb-statusseg__opt).is-on {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
}
:is(.pkb-statusseg__opt, .os-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. */
:is(.pkb-guided-foot, .os-pkb-guided-foot) :is(.diveos-button, .os-field-button):is(.hidden, .os-hidden) { display: none; }
:is(.pkb-kbd, .os-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 */
:is(.pkb-summary, .os-pkb-summary) {
  position: sticky;
  top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
:is(.pkb-summary__card, .os-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 */
:is(.pkb-summary__head, .os-pkb-summary__head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
:is(.pkb-summary__eyebrow, .os-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);
}
:is(.pkb-summary__draftpill, .os-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 */
:is(.pkb-summary__line, .os-pkb-summary__line) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
:is(.pkb-summary__line, .os-pkb-summary__line) + :is(.pkb-summary__line, .os-pkb-summary__line) { border-top: 1px solid var(--hairline-2); }
:is(.pkb-summary__line-ic, .os-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;
}
:is(.pkb-summary__line-ic, .os-pkb-summary__line-ic) svg { width: 17px; height: 17px; }
:is(.pkb-summary__line-body, .os-pkb-summary__line-body) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
:is(.pkb-summary__line-main, .os-pkb-summary__line-main) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.pkb-summary__line-sub, .os-pkb-summary__line-sub) { font-size: var(--text-xs); color: var(--muted); }
:is(.pkb-summary__line-val, .os-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 */
:is(.pkb-summary__sell, .os-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);
}
:is(.pkb-summary__sell, .os-pkb-summary__sell) :is(.pkb-summary__eyebrow, .os-pkb-summary__eyebrow) { color: var(--accent); }
:is(.pkb-summary__sell-v, .os-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 */
:is(.pkb-summary__row, .os-pkb-summary__row) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: var(--text-sm);
}
:is(.pkb-summary__row, .os-pkb-summary__row) :is(.k, .os-k) { color: var(--muted); }
:is(.pkb-summary__row, .os-pkb-summary__row) :is(.v, .os-v) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
:is(.pkb-summary__row--accent, .os-pkb-summary__row--accent) :is(.v, .os-v) { color: var(--accent); }
:is(.pkb-summary__divider, .os-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) {
  :is(.pkb-guided__grid, .os-pkb-guided__grid) { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  :is(.pkb-summary, .os-pkb-summary) { display: none; }
}
@media (max-width: 820px) {
  :is(.pkb-guided__grid, .os-pkb-guided__grid) { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 40px; }
  :is(.pkb-guided, .os-pkb-guided) :is(.pkb-vrail, .os-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. */
:is(.pkb-pricer, .os-pkb-pricer) {
  max-width: 540px;
  margin: 32px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* big editable price */
:is(.pkb-pricefield, .os-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;
}
:is(.pkb-pricefield, .os-pkb-pricefield):focus-within { border-color: var(--accent); }
:is(.pkb-pricefield__cur, .os-pkb-pricefield__cur) {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--muted-2);
  margin-top: 8px;
}
:is(.pkb-price-input, .os-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;
}
:is(.pkb-price-input, .os-pkb-price-input):focus { outline: none; }
:is(.pkb-pricer__sub, .os-pkb-pricer__sub) {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
}
/* Recommended snap button */
:is(.pkb-recbtn, .os-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;
}
:is(.pkb-recbtn, .os-pkb-recbtn):hover { border-color: var(--accent); }
:is(.pkb-recbtn, .os-pkb-recbtn).is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
:is(.pkb-recbtn__v, .os-pkb-recbtn__v) { font-family: var(--font-mono); }
/* quick-add row */
:is(.pkb-quickrow, .os-pkb-quickrow) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}
:is(.pkb-quickrow__lbl, .os-pkb-quickrow__lbl) {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  flex-shrink: 0;
}
:is(.pkb-quickbtn, .os-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;
}
:is(.pkb-quickbtn, .os-pkb-quickbtn):hover { border-color: var(--accent-border); }
:is(.pkb-quickbtn, .os-pkb-quickbtn).is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
/* slider + scale */
:is(.pkb-pricer__slider, .os-pkb-pricer__slider) { width: 100%; margin-top: 26px; }
:is(.pkb-pricer__scale, .os-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;
}
:is(.pkb-pricer__scale, .os-pkb-pricer__scale) b { font-weight: 700; display: inline-block; margin-top: 2px; }
:is(.pkb-pricer__scale, .os-pkb-pricer__scale) :is(.lo, .os-lo) { color: var(--muted-2); text-align: left; }
:is(.pkb-pricer__scale, .os-pkb-pricer__scale) :is(.mid, .os-mid) { color: var(--confirmed); text-align: center; }
:is(.pkb-pricer__scale, .os-pkb-pricer__scale) :is(.hi, .os-hi) { color: var(--muted-2); text-align: right; }
/* live margin chip — green */
:is(.pkb-guided-marginchip, .os-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 */
:is(.pkb-guided-marginchip, .os-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) */
:is(.pkb-guided-inner, .os-pkb-guided-inner).has-picker { max-width: 720px; text-align: left; }
:is(.pkb-guided-inner, .os-pkb-guided-inner).has-picker :is(.step-eyebrow, .os-step-eyebrow), :is(.pkb-guided-inner, .os-pkb-guided-inner).has-picker :is(.pkb-guided-q, .os-pkb-guided-q), :is(.pkb-guided-inner, .os-pkb-guided-inner).has-picker :is(.pkb-guided-help, .os-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. */
:is(.dv-durbar, .os-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);
}
:is(.dv-cseg, .os-cseg) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  border-left: 1px solid var(--hairline-2);
}
:is(.dv-cseg, .os-cseg):first-child { border-left: 0; padding-left: 20px; }
:is(.dv-cseg, .os-cseg):last-child { padding-right: 20px; }
:is(.dv-cseg, .os-cseg)[hidden] { display: none; }
:is(.dv-clabel, .os-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 */
:is(.dv-segtog, .os-segtog) {
  display: inline-flex;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
:is(.dv-segtog, .os-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;
}
:is(.dv-segtog, .os-segtog) button:is(.on, .os-on) {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
/* − [value] + stepper */
:is(.dv-cstep, .os-cstep) { display: inline-flex; align-items: center; gap: 1rem; }
:is(.dv-cstep, .os-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;
}
:is(.dv-cstep, .os-cstep) button:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--accent-border); color: var(--ink); }
:is(.dv-cstep, .os-cstep) button:disabled { opacity: 0.5; cursor: default; }
:is(.dv-cstep, .os-cstep) :is(.val, .os-val) {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
:is(.dv-cstep, .os-cstep) :is(.val, .os-val) :is(.un, .os-un) {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}
:is(.pkb-stepper__unit, .os-pkb-stepper__unit) { font-size: var(--text-xs); color: var(--muted); }
/* picker controls */
:is(.dv2-pick, .os-dv2-pick) { text-align: left; margin-top: 8px; }
:is(.dv2-results, .os-dv2-results) { margin-top: 18px; }
:is(.dv2-seg, .os-dv2-seg) {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow-x: auto;
}
:is(.dv2-seg-btn, .os-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;
}
:is(.dv2-seg-btn, .os-dv2-seg-btn) :is(.c, .os-c) { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; opacity: 0.8; }
:is(.dv2-seg-btn, .os-dv2-seg-btn).is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
:is(.dv2-seg-btn, .os-dv2-seg-btn).is-on :is(.c, .os-c) { color: var(--accent); opacity: 1; }
:is(.dv-search, .os-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);
}
:is(.dv-search, .os-search):focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.dv-search, .os-search) :is(.ico, .os-ico) { color: var(--muted-2); display: flex; flex-shrink: 0; }
:is(.dv-search, .os-search) input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink); }
:is(.dv-search, .os-search) input::-moz-placeholder { color: var(--muted-2); }
:is(.dv-search, .os-search) input::placeholder { color: var(--muted-2); }
:is(.dv-search, .os-search) :is(.clr, .os-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;
}
:is(.dv-search, .os-search) :is(.clr, .os-clr):hover { background: var(--gray-200); color: var(--ink); }
/* group label */
:is(.dv-grouplabel, .os-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). */
:is(.dv2-results, .os-dv2-results) > [data-dv-group]:first-child :is(.dv-grouplabel, .os-grouplabel) { margin-top: 0; }
:is(.dv-grouplabel, .os-grouplabel) :is(.t, .os-t) { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
:is(.dv-grouplabel, .os-grouplabel) :is(.ln, .os-ln) { flex: 1; height: 1px; background: var(--hairline-2); }
:is(.dv-grouplabel, .os-grouplabel) :is(.c, .os-c) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
/* dense selectable row */
:is(.dv-rows, .os-rows) { display: flex; flex-direction: column; gap: 6px; }
:is(.dv-row, .os-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;
}
:is(.dv-row, .os-row):hover { border-color: var(--accent-border); }
:is(.dv-row, .os-row).is-on { border-color: var(--accent); background: var(--accent-softer); }
:is(.dv-row, .os-row):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:is(.dv-row, .os-row) :is(.box, .os-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;
}
:is(.dv-row, .os-row).is-on :is(.box, .os-box) { background: var(--accent); border-color: var(--accent); color: var(--surface); }
:is(.dv-row, .os-row) :is(.dv-main, .os-main) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:is(.dv-row, .os-row) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.dv-row, .os-row) :is(.meta, .os-meta) { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.dv-row, .os-row) :is(.pr, .os-pr) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
:is(.dv-row, .os-row).is-on :is(.pr, .os-pr) { color: var(--accent); }
/* qty stepper (replaces price on selected rows) */
:is(.dv-step, .os-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; }
:is(.dv-step, .os-step) button { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--gray-700); cursor: pointer; }
:is(.dv-step, .os-step) button:hover { background: var(--surface-alt); color: var(--ink); }
:is(.dv-step, .os-step) button:disabled { color: var(--muted-2); cursor: default; background: transparent; }
:is(.dv-step, .os-step) :is(.v, .os-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 */
:is(.dv-kitnote, .os-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;
}
:is(.dv-kitnote, .os-kitnote) :is(.ico, .os-ico) { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
:is(.dv-kitnote, .os-kitnote) b { color: var(--ink); font-weight: 600; }
:is(.dv-kitgroup, .os-kitgroup) { margin-bottom: 18px; }
:is(.dv-chips, .os-chips) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.dv-chip, .os-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;
}
:is(.dv-chip, .os-chip):hover { border-color: var(--accent-border); }
:is(.dv-chip, .os-chip) :is(.tk, .os-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;
}
:is(.dv-chip, .os-chip).is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
:is(.dv-chip, .os-chip).is-on :is(.tk, .os-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. */
:is(.dv-gearpick, .os-gearpick) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
:is(.dv-gearpick__select, .os-gearpick__select), :is(.dv-gearpick__qty, .os-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;
}
:is(.dv-gearpick__select, .os-gearpick__select) { min-width: 180px; }
:is(.dv-gearpick__qty, .os-gearpick__qty) { width: 68px; }
:is(.dv-gearpick__select, .os-gearpick__select):focus-visible, :is(.dv-gearpick__qty, .os-gearpick__qty):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
:is(.dv-gearlist, .os-gearlist) { display: flex; flex-direction: column; gap: 6px; }
:is(.dv-gearline__est, .os-gearline__est) { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; margin-left: auto; }
/* empty / no-results */
:is(.dv-empty, .os-empty) { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px; text-align: center; }
:is(.dv-empty, .os-empty) :is(.t, .os-t) { font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); }
:is(.dv-empty, .os-empty) :is(.s, .os-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. */
:is(.pkb-view, .os-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) { :is(.pkb-view, .os-pkb-view) { grid-template-columns: 1fr; } :is(.pkb-minnav, .os-pkb-minnav) { display: none; } }
:is(.pkb-view-main, .os-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. */
:is(.pkb-view-header-inner, .os-pkb-view-header-inner) :is(.hero-show__breadcrumb, .os-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. */
:is(.pkb-view-header, .os-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) { :is(.pkb-view-header, .os-pkb-view-header) { margin-top: -56px; } }
:is(.pkb-view-header-inner, .os-pkb-view-header-inner) { max-width: 1180px; margin: 0 auto; padding: 18px 0 22px; }
:is(.pkb-view-headrow, .os-pkb-view-headrow) {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
}
:is(.pkb-view-header, .os-pkb-view-header) :is(.hd-l, .os-hd-l) { min-width: 0; }
:is(.pkb-view-header, .os-pkb-view-header) :is(.hd-title, .os-hd-title) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
:is(.pkb-view-header, .os-pkb-view-header) :is(.hd-title, .os-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);
}
:is(.pkb-view-header, .os-pkb-view-header) :is(.hd-sub, .os-hd-sub) { margin: 9px 0 0; font-size: var(--text-sm); color: var(--muted); max-width: 68ch; }
:is(.pkb-view-actions, .os-pkb-view-actions) { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* SelectableStatusPill — DS StatusPill + chevron trigger + popover menu */
:is(.pkb-statussel, .os-pkb-statussel) { position: relative; }
:is(.pkb-statuspill-sel, .os-pkb-statuspill-sel) { cursor: pointer; padding-right: 8px; transition: background 120ms ease, border-color 120ms ease; }
:is(.pkb-statuspill-sel, .os-pkb-statuspill-sel) :is(.chev, .os-chev) { margin-left: 1px; opacity: 0.7; }
:is(.pkb-statuspill-sel, .os-pkb-statuspill-sel):hover { filter: brightness(0.98); }
:is(.pkb-statuspill-sel, .os-pkb-statuspill-sel):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.pkb-statusmenu, .os-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;
}
:is(.pkb-statussel, .os-pkb-statussel).is-open :is(.pkb-statusmenu, .os-pkb-statusmenu) { display: flex; }
:is(.pkb-statusopt, .os-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;
}
:is(.pkb-statusopt, .os-pkb-statusopt):hover { background: var(--surface-alt); }
:is(.pkb-statusopt, .os-pkb-statusopt):is(.on, .os-on) { background: var(--accent-soft); }
:is(.pkb-statusopt, .os-pkb-statusopt) :is(.ck, .os-ck) { color: var(--accent); flex-shrink: 0; }
:is(.pkb-view-foot, .os-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 */
:is(.pkb-linkbtn, .os-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;
}
:is(.pkb-linkbtn, .os-pkb-linkbtn):is(.neutral, .os-neutral):hover { color: var(--ink); }
:is(.pkb-linkbtn, .os-pkb-linkbtn):is(.danger, .os-danger) { color: var(--cancelled); }
:is(.pkb-linkbtn, .os-pkb-linkbtn):is(.danger, .os-danger):hover { color: var(--cancelled); text-decoration: underline; }
/* sticky section mini-nav */
:is(.pkb-minnav, .os-pkb-minnav) { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
:is(.pkb-minnav, .os-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;
}
:is(.pkb-minnav, .os-pkb-minnav) a:hover { color: var(--ink); border-left-color: var(--hairline-strong); }
:is(.pkb-minnav, .os-pkb-minnav) a:is(.on, .os-on) { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
/* ocean hero — pure CSS gradient, no image */
:is(.pkb-hero, .os-pkb-hero) {
  position: relative; aspect-ratio: 16 / 6.6; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--hairline);
}
:is(.pkb-ocean, .os-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%);
}
:is(.pkb-ocean, .os-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. */
:is(.pkb-hero-img, .os-pkb-hero-img) { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* bento stat grid */
:is(.pkb-bento, .os-pkb-bento) { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { :is(.pkb-bento, .os-pkb-bento) { grid-template-columns: 1fr 1fr; } }
:is(.pkb-bento-cell, .os-pkb-bento-cell) {
  padding: 22px 24px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
:is(.pkb-bento-cell, .os-pkb-bento-cell):is(.lead, .os-lead) { display: flex; flex-direction: column; justify-content: center; }
:is(.pkb-bento-cell, .os-pkb-bento-cell) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
:is(.pkb-bento-cell, .os-pkb-bento-cell) :is(.v, .os-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;
}
:is(.pkb-bento-cell, .os-pkb-bento-cell):is(.lead, .os-lead) :is(.v, .os-v) { font-size: 42px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:is(.pkb-bento-cell, .os-pkb-bento-cell) :is(.v, .os-v) :is(.u, .os-u) { font-size: var(--text-md); font-weight: 500; color: var(--muted); }
:is(.pkb-bento-cell, .os-pkb-bento-cell) :is(.sub, .os-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. */
:is(.pkb-prose, .os-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. */
:is(.pkb-card, .os-pkb-card) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; padding: 0; }
:is(.pkb-cardhead, .os-pkb-cardhead) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px 0;
}
:is(.pkb-cardhead, .os-pkb-cardhead) :is(.t, .os-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);
}
:is(.pkb-cardhead, .os-pkb-cardhead) :is(.t, .os-t) svg { flex-shrink: 0; color: var(--muted-2); }
:is(.pkb-cardhead, .os-pkb-cardhead) :is(.ct, .os-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). */
:is(.pkb-cardbody--pad, .os-pkb-cardbody--pad) { padding: 18px 24px 22px; }
/* highlights */
:is(.pkb-cardbody--acc, .os-pkb-cardbody--acc) { padding: 6px 24px 14px; }
/* accommodation */
:is(.pkb-cardrows, .os-pkb-cardrows) { padding-top: 12px; }
/* items / extras row lists (rows own their inset) */
/* in-card empty state — clean muted row */
:is(.pkb-cardempty, .os-pkb-cardempty) { display: flex; align-items: center; gap: 10px; padding: 18px 24px 22px; font-size: var(--text-sm); color: var(--muted); }
:is(.pkb-cardempty, .os-pkb-cardempty) :is(.ic, .os-ic) { color: var(--muted-2); display: flex; flex-shrink: 0; }
/* highlights */
:is(.pkb-vhls, .os-pkb-vhls) { -moz-columns: 2; columns: 2; -moz-column-gap: 32px; column-gap: 32px; }
@media (max-width: 720px) { :is(.pkb-vhls, .os-pkb-vhls) { -moz-columns: 1; columns: 1; } }
:is(.pkb-vhl, .os-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; }
:is(.pkb-vhl, .os-pkb-vhl) :is(.ic, .os-ic) { color: var(--accent); flex-shrink: 0; margin-top: 1px; display: flex; }
/* item rows */
:is(.pkb-itemrow, .os-pkb-itemrow) { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--hairline-2); }
:is(.pkb-itemrow, .os-pkb-itemrow):first-child { border-top: 0; }
:is(.pkb-itemrow, .os-pkb-itemrow) :is(.kind, .os-kind) { width: 36px; height: 36px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
:is(.pkb-itemrow, .os-pkb-itemrow) :is(.kind, .os-kind):is(.dive, .os-dive) { background: var(--sky-50); color: var(--sky-700); }
:is(.pkb-itemrow, .os-pkb-itemrow) :is(.kind, .os-kind):is(.equip, .os-equip) { background: var(--gray-100); color: var(--gray-600); }
:is(.pkb-itemrow, .os-pkb-itemrow) :is(.nm, .os-nm) { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.pkb-itemrow, .os-pkb-itemrow) :is(.qty, .os-qty) { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
:is(.pkb-itemrow, .os-pkb-itemrow) :is(.type, .os-type) { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* pricing viz */
:is(.pkb-pviz, .os-pkb-pviz) { padding: 24px 26px; }
:is(.pkb-pviz, .os-pkb-pviz) :is(.sell, .os-sell) { display: flex; align-items: baseline; gap: 12px; }
:is(.pkb-pviz, .os-pkb-pviz) :is(.sell, .os-sell) :is(.amt, .os-amt) { font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -0.02em; color: var(--ink); }
:is(.pkb-pviz, .os-pkb-pviz) :is(.sell, .os-sell) :is(.per, .os-per) { font-size: var(--text-sm); color: var(--muted); }
:is(.pkb-pviz-bar, .os-pkb-pviz-bar) { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--gray-100); margin: 28px 0 8px; }
:is(.pkb-pviz-bar, .os-pkb-pviz-bar):is(.live, .os-live) { background: linear-gradient(90deg, var(--cancelled-bg), var(--confirmed-bg) 50%, var(--briefing-bg)); }
:is(.pkb-pviz-bar, .os-pkb-pviz-bar) :is(.pos, .os-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); }
:is(.pkb-pviz-bar, .os-pkb-pviz-bar) :is(.pos, .os-pos)::after { content: ""; position: absolute; inset: 3.5px; border-radius: var(--radius-pill); background: var(--accent); }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale) { display: flex; justify-content: space-between; font-size: var(--text-xs); }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale) :is(.s, .os-s) { display: flex; flex-direction: column; gap: 2px; }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale) :is(.s, .os-s):is(.mid, .os-mid) { align-items: center; }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale) :is(.s, .os-s):is(.end, .os-end) { align-items: flex-end; }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale) :is(.lbl, .os-lbl) { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale) :is(.val, .os-val) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
:is(.pkb-pviz-scale, .os-pkb-pviz-scale):is(.muted, .os-muted) :is(.val, .os-val) { color: var(--muted-2); }
/* accommodation */
:is(.pkb-acc-head, .os-pkb-acc-head) { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
:is(.pkb-acc-head, .os-pkb-acc-head) :is(.ic, .os-ic) { color: var(--accent); display: flex; }
:is(.pkb-acc-head, .os-pkb-acc-head) :is(.nm, .os-nm) { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
:is(.pkb-acc-head, .os-pkb-acc-head) :is(.meta, .os-meta) { margin-left: auto; font-size: var(--text-xs); color: var(--muted); }
:is(.pkb-acc-rate, .os-pkb-acc-rate) { display: grid; gap: 0; padding: 4px 0; }
:is(.pkb-acc-line, .os-pkb-acc-line) { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hairline-2); }
:is(.pkb-acc-line, .os-pkb-acc-line):first-child { border-top: 0; }
:is(.pkb-acc-line, .os-pkb-acc-line) :is(.k, .os-k) { font-size: var(--text-sm); color: var(--gray-700); }
:is(.pkb-acc-line, .os-pkb-acc-line) :is(.v, .os-v) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--ink); }
/* extras tiles */
:is(.pkb-pmstile, .os-pkb-pmstile) { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--hairline-2); }
:is(.pkb-pmstile, .os-pkb-pmstile):first-child { border-top: 0; }
:is(.pkb-pmstile, .os-pkb-pmstile) :is(.q, .os-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; }
:is(.pkb-pmstile, .os-pkb-pmstile) :is(.nm, .os-nm) { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.pkb-pmstile, .os-pkb-pmstile) :is(.amt, .os-amt) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; }
:is(.pkb-pmstile, .os-pkb-pmstile) :is(.amt, .os-amt) :is(.each, .os-each) { font-size: var(--text-xs); color: var(--muted-2); }
/* gate note */
:is(.pkb-gate-note, .os-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); }
:is(.pkb-gate-note, .os-pkb-gate-note) :is(.ic, .os-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).
   ============================================================ */
:is(.st-form, .os-st-form) { text-align: left; display: flex; flex-direction: column; gap: 30px; margin-top: 36px; }
:is(.st-block, .os-st-block) { display: flex; flex-direction: column; gap: 9px; }
:is(.st-blockhead, .os-st-blockhead) { display: flex; justify-content: space-between; align-items: baseline; }
:is(.st-label, .os-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); }
:is(.st-counter, .os-st-counter) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
:is(.st-counter, .os-st-counter):is(.over, .os-over) { color: var(--error); }
:is(.st-hint, .os-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) */
:is(.st-input, .os-st-input), :is(.st-hladd, .os-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;
}
:is(.st-input, .os-st-input) { width: 100%; }
:is(.st-input, .os-st-input)::-moz-placeholder, :is(.st-hladd, .os-st-hladd) input::-moz-placeholder { color: var(--muted-2); }
:is(.st-input, .os-st-input)::placeholder, :is(.st-hladd, .os-st-hladd) input::placeholder { color: var(--muted-2); }
:is(.st-input, .os-st-input):focus, :is(.st-hladd, .os-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. */
:is(.st-editor, .os-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;
}
:is(.st-editor, .os-st-editor):focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.st-toolbar, .os-st-toolbar) { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: var(--surface-alt); border-bottom: 1px solid var(--hairline); }
:is(.st-tbtn, .os-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;
}
:is(.st-tbtn, .os-st-tbtn):hover { background: var(--surface); border-color: var(--hairline); color: var(--ink); }
:is(.st-tdiv, .os-st-tdiv) { width: 1px; height: 18px; background: var(--hairline); margin: 0 5px; }
/* Trix editor styled as the textarea; native toolbar suppressed */
:is(.st-editor, .os-st-editor) trix-toolbar { display: none; }
:is(.st-editor, .os-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;
}
:is(.st-editor, .os-st-editor) trix-editor:empty:not(:focus)::before { color: var(--muted-2); }
/* cover image — single container drives both states via :has() on the preview */
:is(.st-cover, .os-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;
}
:is(.st-cover, .os-st-cover).is-dragover { border-color: var(--accent); background: var(--accent-softer); }
:is(.st-cover, .os-st-cover).is-invalid { border-color: var(--cancelled-border); background: var(--cancelled-bg); }
:is(.st-cover, .os-st-cover):hover { border-color: var(--accent); background: var(--accent-softer); }
:is(.st-cover__input, .os-st-cover__input) { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
:is(.st-cover__empty, .os-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;
}
:is(.st-cover__empty, .os-st-cover__empty) :is(.ic, .os-ic) { color: var(--muted-2); transition: color var(--t-fast) ease; }
:is(.st-cover, .os-st-cover):hover :is(.st-cover__empty, .os-st-cover__empty) :is(.ic, .os-ic) { color: var(--accent); }
:is(.st-cover__empty, .os-st-cover__empty) :is(.t, .os-t) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.st-cover__empty, .os-st-cover__empty) :is(.s, .os-s) { font-size: var(--text-xs); color: var(--muted-2); max-width: 40ch; line-height: 1.45; }
:is(.st-cover__img, .os-st-cover__img) { display: none; width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius); }
:is(.st-cover-edit, .os-st-cover-edit) { display: none; }
/* filled state: a preview image is present (not .hidden) */
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.hidden, .os-hidden))) {
  border-style: solid; border-color: var(--hairline); background: transparent; overflow: hidden; height: 200px;
}
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.hidden, .os-hidden))):hover { border-color: var(--hairline); background: transparent; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.hidden, .os-hidden))) :is(.st-cover__img, .os-st-cover__img) { display: block; }
:is(.st-cover, .os-st-cover):has(:is(.st-cover__img, .os-st-cover__img):not(:is(.hidden, .os-hidden))) :is(.st-cover-edit, .os-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 */
:is(.st-hls, .os-st-hls) { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
:is(.st-hls, .os-st-hls):empty { display: none; }
:is(.st-hl, .os-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); }
:is(.st-hl, .os-st-hl):first-child { border-top: 0; }
:is(.st-hl, .os-st-hl) :is(.ic, .os-ic) { color: var(--accent); flex-shrink: 0; display: flex; }
:is(.st-hl, .os-st-hl) :is(.tx, .os-tx) { flex: 1; min-width: 0; }
:is(.st-hl, .os-st-hl) :is(.rm, .os-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;
}
:is(.st-hl, .os-st-hl) :is(.rm, .os-rm):hover { background: var(--surface-alt); color: var(--error); }
/* add-a-highlight row */
:is(.st-hladd, .os-st-hladd) { display: flex; gap: 8px; }
:is(.st-hladd, .os-st-hladd) input { flex: 1; }
:is(.st-hladd, .os-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;
}
:is(.st-hladd, .os-st-hladd) button:hover:not(:disabled) { background: var(--accent); color: var(--surface); }
:is(.st-hladd, .os-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.os-confirm {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
dialog.os-confirm[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
dialog.os-confirm::backdrop {
  background-color: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.os-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);
}
.os-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);
}
.os-confirm__msg {
  margin: 0 0 22px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}
.os-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) */
.os-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;
}
.os-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. */
.os-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 */
.os-select-field {
  width: 100%;
  /* A select is a FIELD control: its floor is the 46px field baseline, never
     the 36px button base. So it takes the LARGER of the surface density and
     that floor — 46px at base/compact/comfortable density (unchanged from the
     literal it replaces), 48px inside .os-density--touch. Expressed as max()
     rather than a pinned token because "never shorter than a field, but grow
     with the surface" is the actual rule, and a pinned value could not grow.
     Was a bare 46px literal, one of four independent copies of that number. */
  min-height: max(var(--control-h), var(--control-h-field));
  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;
}
.os-select-field:hover { border-color: var(--accent); }
.os-select-field.is-open, .os-select-field:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.os-select-field__val { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-select-field__val.is-placeholder { color: var(--text-muted); }
.os-select-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. */
.os-select--sm .os-select-field {
  /* 34px is OFF the control scale — it sits between --sm (32) and base (36)
     and matches nothing else in the system. It is the drift this contract
     exists to stop, kept at its shipped value here because correcting it
     would move a live control. A future minor should land it on 32px. */
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--text-xs);
}
.os-select--sm .os-select-field__icon svg { width: 14px; height: 14px; }
/* Menu — the searchable custom-select dropdown built by dv_select_controller.js.
   NOTE: this class was historically named `.os-pop`, which COLLIDED with the
   separate multiselect/filter popover in popover.css (also `.os-pop`) at equal
   specificity. In the flattened os_ds.css bundle popover.css is emitted later,
   so its `overflow: hidden` won and this menu lost its scroll (long option lists
   overflowed the viewport uncut). Renamed to the `.os-select__menu` family so the
   two components no longer fight. Do NOT rename back to `.os-pop`. */
.os-select__menu {
  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. */
.os-select__menu:has(.os-opt--rich) {
  min-width: min(340px, 92vw);
}
/* Option */
.os-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);
}
.os-opt:hover, .os-opt.is-active { background: var(--surface-alt); }
.os-opt[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
}
.os-opt__check { margin-left: auto; color: var(--accent); opacity: 0; display: inline-flex; flex-shrink: 0; }
.os-opt[aria-selected="true"] .os-opt__check { opacity: 1; }
.os-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. */
.os-opt--rich { align-items: flex-start; padding: 9px 10px; }
.os-opt__rich { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.os-opt__rich .os-opt-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.os-opt__rich .os-opt-line--head { justify-content: space-between; }
.os-opt__rich .os-opt-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.os-opt__rich .os-opt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
}
.os-opt__rich .os-opt-meta :is(.truncate, .os-truncate), .os-opt__rich .os-opt-title :is(.truncate, .os-truncate) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.os-opt__rich [data-lucide], .os-opt__rich svg { width: 13px; height: 13px; flex-shrink: 0; }
.os-opt--rich .os-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. */
.os-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. */
.os-select__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.os-select__search svg { color: var(--text-muted); flex-shrink: 0; }
.os-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. */
.os-select__search input:focus, .os-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 */
.os-select__menu-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. */
.os-desclist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px 28px;
  margin: 0;
}
.os-desclist__row {
  min-width: 0;
}
.os-desclist__row--full {
  grid-column: 1 / -1;
}
.os-desclist__term {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-bottom: 3px;
}
.os-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;
}
.os-desclist__desc a {
  color: var(--accent);
}
/* ── --inline: term left, desc right, one line per row (settings layout) ── */
.os-desclist--inline {
  display: block;
}
.os-desclist--inline .os-desclist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.os-desclist--inline .os-desclist__row--full {
  grid-column: auto;
}
.os-desclist--inline .os-desclist__term {
  margin-bottom: 0;
  flex: 0 0 auto;
}
.os-desclist--inline .os-desclist__desc {
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
}
/* ── --striped: alternating tints + hairline dividers (best with --inline) ── */
.os-desclist--striped {
  display: block;
}
.os-desclist--striped .os-desclist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.os-desclist--striped .os-desclist__row:first-child {
  border-top: 1px solid var(--hairline);
}
.os-desclist--striped .os-desclist__row:nth-child(odd) {
  background: var(--surface-alt);
}
.os-desclist--striped .os-desclist__row--full {
  grid-column: auto;
}
.os-desclist--striped .os-desclist__term {
  margin-bottom: 0;
  flex: 0 0 auto;
}
.os-desclist--striped .os-desclist__desc {
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
}
/* ═══ v1.4.0 additions — read-only summary variants ═══════════════════════
   Promoted with the guest-arrival set. --mono for figure/code values, --panel
   for the tinted read-only block used by the summary rail (A1) and the
   full-width summary banner (A2). Both compose with --inline / --striped. */
/* ── --mono: figures/codes in monospace with tabular alignment ── */
.os-desclist--mono .os-desclist__desc {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* ── --panel: tinted read-only block with hairline row dividers ── */
/* USAGE: --panel IS the surface. Put it directly in the card (or standalone) —
    do NOT nest it inside `.os-card__body`, whose padding makes every row read as
    a chip floating in a card instead of one passive block. Reported from the
    arrival-wizard rail, where exactly that inversion shipped. */
.os-desclist--panel {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  gap: 0;
  overflow: hidden;
}
.os-desclist--panel .os-desclist__row {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--hairline);
}
/* First row of each grid column has no rule above it. */
.os-desclist--panel .os-desclist__row:first-child {
  border-top: none;
}
/* 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 ─────────────────────────────────── */
:is(.to-schedule__head, .os-to-schedule__head) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
:is(.date-block, .os-date-block) + :is(.date-block, .os-date-block) {
  margin-top: 28px;
}
:is(.date-header, .os-date-header) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
:is(.date-header__spacer, .os-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. */
:is(.date-toggle, .os-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;
}
:is(.date-toggle, .os-date-toggle):hover {
  background: var(--surface-alt);
}
:is(.date-toggle, .os-date-toggle):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
:is(.date-toggle__icon, .os-date-toggle__icon) {
  display: inline-flex;
  color: var(--muted-2);
  transition: transform 200ms ease;
}
:is(.diver-cards, .os-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. */
:is(.diver-cards, .os-diver-cards):is(.hidden, .os-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. */
:is(.dv-card, .os-card):is(.diver-card, .os-diver-card) {
  padding: 14px 16px;
  overflow: visible;
}
:is(.diver-card__actions, .os-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. */
:is(.diver-card__trip, .os-diver-card__trip) {
  width: 168px;
  flex-shrink: 0;
}
:is(.diver-card__head, .os-diver-card__head) {
  display: flex;
  align-items: center;
  gap: 10px;
}
:is(.diver-card__name, .os-diver-card__name) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:is(.diver-card__title, .os-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:is(.diver-card__title, .os-diver-card__title) {
  text-decoration: none;
}
a:is(.diver-card__title, .os-diver-card__title):hover {
  color: var(--accent);
  text-decoration: underline;
}
:is(.diver-card__spacer, .os-diver-card__spacer) {
  flex: 1;
}
:is(.diver-card__actions, .os-diver-card__actions) {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.diver-avatar, .os-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 ────────────────────────────────────────────────────── */
:is(.chip-row, .os-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. */
:is(.dive-chip, .os-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. */
:is(.dive-chip, .os-dive-chip):not(:has(:is(.chip-check, .os-chip-check))) {
  padding: 4px 10px;
}
:is(.dive-chip, .os-dive-chip):has(:is(.diveos-check__input, .os-field-check__input):checked), :is(.dive-chip, .os-dive-chip):has(:is(.dive-chip-menu, .os-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. */
:is(.dive-chip__check, .os-dive-chip__check) {
  gap: 0;
  align-items: center;
}
:is(.dive-chip__check, .os-dive-chip__check) :is(.diveos-check__box, .os-field-check__box) {
  margin-top: 0;
}
:is(.dive-chip__qty, .os-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. */
:is(.dive-chip-menu, .os-dive-chip-menu) {
  display: inline-flex;
  align-items: center;
}
:is(.dive-chip__trigger, .os-dive-chip__trigger) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
:is(.dive-chip__trigger, .os-dive-chip__trigger)::-webkit-details-marker, :is(.dive-chip__trigger, .os-dive-chip__trigger)::marker {
  display: none;
  content: "";
}
:is(.dive-chip__caret, .os-dive-chip__caret) {
  color: var(--muted-2);
  transition: transform 120ms ease;
}
:is(.dive-chip-menu, .os-dive-chip-menu)[open] :is(.dive-chip__caret, .os-dive-chip__caret) {
  transform: rotate(180deg);
}
/* ── Per-chip trip picker popover ────────────────────────────────── */
:is(.chip-popover, .os-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;
}
:is(.chip-popover__label, .os-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);
}
:is(.chip-popover__opt, .os-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);
}
:is(.chip-popover__opt, .os-chip-popover__opt):hover:not(:disabled) {
  background: var(--surface-alt);
}
:is(.chip-popover__opt, .os-chip-popover__opt):disabled {
  color: var(--muted-2);
  cursor: default;
}
/* dive-kind badge — os-badge tints (Fun Dive / Try Dive / Course) for a
   booking card, rendered by shared/patterns/_dive_kind_badges. Loaded after
   trip_workflow.css (owns the base .os-badge) so the tint/sentence-case
   overrides win. */
/* dive_kind_badge.css — dive-KIND chips (Fun Dive / Try Dive / Course).
   Imported by application.css (see the css_import_gate). Rendered by
   shared/patterns/_dive_kind_badges; sits on a booking card next to the
   payment status-pill.

   These are os-badge VARIANTS, not a new component — they extend the badge
   family (.os-badge, defined in trip_workflow.css) with three dive-kind
   tints + two structural modifiers. Kept in their own file so the family is
   discoverable and the tints live beside the tokens that feed them.

   Design intent — a dive-kind chip must NEVER be mistaken for a booking
   status. The status palette (confirmed/briefing/inwater/pending/cancelled)
   is a SATURATED soft-COLOUR fill + a 10px UPPERCASE tracked micro-label.
   The dive-kind chip is the opposite treatment: a NEUTRAL (surface-alt) fill,
   NO border, a 12px SENTENCE-CASE tag, and a single gently-COLOURED icon +
   matching label. Same-shape pill, deliberately different weight/case/fill —
   so the payment status stays the card's primary signal and the dive kinds
   read as a quiet secondary tag. The gentle colour also lifts the icon clear
   of the muted-2 meta-row glyphs (which are neutral grey), so the kind is not
   colour-only-vs-nothing — it's a distinct, legible hue.

   Light-only, token-only (var() — no naked hex, per the raw-hex CSS gate). */
/* Dive-kind semantic tokens. No dedicated dive-kind ramp exists in the os-ds
   token layer (the gem), and the status palette already consumes every colour
   ramp, so these alias existing -700 primitives at the app level. -700 clears
   AA (>=4.5:1) on the surface-alt fill for both the label text and the icon.
   var()-only, so this stays inside the naked-hex gate. Hues are chosen to read
   as the dive kind, NOT a status: water (sky), the orange of a life-buoy
   (amber), and a learning/achievement green. */
:root {
  --dive-fun-fg:    var(--sky-700);    /* waves — water */
  --dive-try-fg:    var(--amber-700);  /* life-buoy — safety orange */
  --dive-course-fg: var(--green-700);  /* graduation-cap — learning */
}
/* Shared dive-kind treatment: quiet, sentence-case tag on a neutral fill.
   Overrides the base .os-badge's uppercase/tracked 10px status-label look. */
:is(.dv-badge--dive, .os-badge--dive) {
  gap: 5px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--surface-alt);
  border-color: transparent;
}
/* Icon inherits the chip colour (Lucide stroke=currentColor). Optical size is
   set by the icon helper; this only guards flex behaviour. */
:is(.dv-badge--dive, .os-badge--dive) :is(.lucide, svg) {
  flex-shrink: 0;
}
/* Compact (dense 300px kanban card): icon-only. Square padding + pill radius
   => a small round tinted glyph; the label is dropped (title + aria-label on
   the span carry the meaning — see the partial). */
:is(.dv-badge--dive-compact, .os-badge--dive-compact) {
  gap: 0;
  padding: 4px;
}
/* The three tints. Colour lands on the whole chip so label AND icon
   (currentColor) share the hue. */
:is(.dv-badge--dive-fun, .os-badge--dive-fun)       { color: var(--dive-fun-fg); }
:is(.dv-badge--dive-try, .os-badge--dive-try)       { color: var(--dive-try-fg); }
:is(.dv-badge--dive-course, .os-badge--dive-course) { color: var(--dive-course-fg); }
/* 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. */
.os-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. */
.os-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). */
.os-datepicker .os-select-field { justify-content: flex-start; }
.os-datepicker .os-select-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. */
.os-pop.os-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. */
.os-pop--cal :is(.cals, .os-cals) { display: flex; gap: 20px; flex-wrap: nowrap; }
.os-pop--cal :is(.cal, .os-cal) { width: 260px; padding: 6px; }
:is(.cal__head, .os-cal__head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
}
:is(.cal__title, .os-cal__title) { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
:is(.cal__nav, .os-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;
}
:is(.cal__nav, .os-cal__nav):hover { background: var(--surface-alt); color: var(--text-primary); }
:is(.cal__nav, .os-cal__nav):disabled, :is(.cal__nav, .os-cal__nav).is-hidden { visibility: hidden; }
:is(.cal__grid, .os-cal__grid) { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
:is(.cal__dow, .os-cal__dow) {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
}
:is(.cal__day, .os-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;
}
:is(.cal__day, .os-cal__day).is-empty { cursor: default; }
:is(.cal__day, .os-cal__day):not(.is-empty):hover { background: var(--surface-alt); }
:is(.cal__day, .os-cal__day).is-muted { color: var(--border-strong); }
/* before today — lighter, but STILL selectable (not disabled) */
:is(.cal__day, .os-cal__day).is-past { color: #9CA3AF; }
:is(.cal__day, .os-cal__day).is-today { font-weight: 700; color: var(--accent); }
:is(.cal__day, .os-cal__day).is-sel { background: var(--accent); color: #fff; font-weight: 600; }
:is(.cal__day, .os-cal__day).is-range { background: var(--accent-light); color: var(--accent-strong); border-radius: 0; }
:is(.cal__day, .os-cal__day).is-range:is(.r-start, .os-r-start) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
:is(.cal__day, .os-cal__day).is-range:is(.r-end, .os-r-end) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* keyboard focus cursor */
:is(.cal__day, .os-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 */
:is(.cal__day, .os-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). */
:is(.cal__time, .os-cal__time) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 2px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
:is(.cal__time-label, .os-cal__time-label) { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
/* ── .dv-time component (HH:MM segment + AM/PM toggle) ── */
.os-time { display: inline-flex; align-items: center; gap: 10px; width: -moz-max-content; width: max-content; }
.os-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;
}
.os-seg:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.os-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;
}
.os-seg input::-webkit-outer-spin-button, .os-seg input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.os-seg__c { color: var(--text-muted); font-size: var(--text-md); }
.os-ampm {
  display: inline-flex;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.os-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;
}
.os-ampm button + button { border-left: 1px solid var(--border-strong); }
.os-ampm button:is(.on, .os-on) { background: var(--accent); color: #fff; }
.os-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. */
.os-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) ── */
:is(.cal__foot, .os-cal__foot) {
  display: flex;
  justify-content: flex-end;
  padding: 8px 6px 2px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
:is(.cal__clear, .os-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);
}
:is(.cal__clear, .os-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. */
.os-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;
}
.os-upload:hover, .os-upload.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.os-upload:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.os-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;
}
.os-upload__icon :is(.lucide, .os-lucide) { display: block; }
.os-upload__t {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.os-upload__t b { color: var(--accent); font-weight: 600; }
.os-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. */
.os-upload--md {
  min-height: 68px;
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
}
.os-upload--md .os-upload__icon {
  width: 38px;
  height: 38px;
}
.os-upload--md .os-upload__h { margin-top: 2px; }
/* --sm — compact single row, icon + inline label, no hint line. */
.os-upload--sm {
  min-height: 44px;
  padding: 0 14px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
}
.os-upload--sm .os-upload__icon {
  width: 26px;
  height: 26px;
}
.os-upload--sm .os-upload__t {
  font-size: var(--text-xs);
}
.os-upload--sm .os-upload__h {
  display: none;
}
/* Uploaded / to-upload file row. */
.os-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);
}
.os-file__ic { color: var(--accent); display: flex; flex-shrink: 0; }
.os-file__ic :is(.lucide, .os-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). */
.os-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;
}
.os-file__nm {
  font-size: var(--text-sm);
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.os-file__sz {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
/* Action affordances on a row (download link, remove/cancel buttons). */
.os-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;
}
.os-file__act:hover {
  color: var(--accent-strong);
  background: var(--surface-alt);
}
.os-file__act :is(.lucide, .os-lucide) { display: block; }
/* When a persisted file is flagged for removal, dim the row. */
.os-file.is-removing {
  opacity: .55;
}
.os-file.is-removing .os-file__nm {
  text-decoration: line-through;
}
/* Upload progress bar (preserved from the gem markup). */
.os-upload-progress {
  margin-top: 8px;
  overflow: hidden;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  position: relative;
}
.os-upload-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: var(--accent);
  border-radius: var(--radius-sm);
}
.os-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;
}
:is(.wz-shell, .os-wz-shell), :is(.wz-main, .os-wz-main), :is(.wz-shell, .os-wz-shell) input, :is(.wz-shell, .os-wz-shell) textarea, :is(.wz-shell, .os-wz-shell) select, :is(.wz-shell, .os-wz-shell) button {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features, normal);
}
:is(.wz-shell, .os-wz-shell) { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); }
:is(.wz-main, .os-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. */
:is(.wz-flow, .os-wz-flow) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
:is(.wz-flow, .os-wz-flow) > form { display: contents; }
/* ── Stepper (horizontal, connected) — lifted from .dp-stepper ── */
:is(.wz-stepper, .os-wz-stepper) { width: 100%; }
:is(.wz-steps, .os-wz-steps) { display: flex; max-width: var(--content-max); margin: 0 auto; }
:is(.wz-step, .os-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; }
:is(.wz-step, .os-wz-step)::before { content: ''; position: absolute; top: 20px; right: calc(50% + 30px);
  width: calc(100% - 60px); height: 2px; background: var(--hairline); z-index: 0; }
:is(.wz-step, .os-wz-step):first-child::before { display: none; }
:is(.wz-step, .os-wz-step):is(.done, .os-done)::before, :is(.wz-step, .os-wz-step):is(.active, .os-active)::before { background: var(--accent); }
:is(.wz-dot, .os-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; }
:is(.wz-step, .os-wz-step):is(.done, .os-done) :is(.wz-dot, .os-wz-dot) { background: var(--accent); border-color: var(--accent); color: var(--surface); }
:is(.wz-step, .os-wz-step):is(.active, .os-active) :is(.wz-dot, .os-wz-dot) { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
:is(.wz-step, .os-wz-step):not(:is(.reach, .os-reach)):hover :is(.wz-dot, .os-wz-dot) { }
:is(.wz-step, .os-wz-step):is(.reach, .os-reach):hover :is(.wz-dot, .os-wz-dot) { border-color: var(--accent); }
:is(.wz-step-label, .os-wz-step-label) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
:is(.wz-step, .os-wz-step):is(.done, .os-done) :is(.wz-step-label, .os-wz-step-label) { color: var(--muted); }
:is(.wz-step, .os-wz-step):is(.active, .os-active) :is(.wz-step-label, .os-wz-step-label) { color: var(--accent); }
:is(.wz-step, .os-wz-step)[disabled] { cursor: default; }
/* ── Vertical spine stepper — lifted from .dp-spine ──────────── */
:is(.wz-spine-grid, .os-wz-spine-grid) { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 32px; align-items: start; }
@media (max-width: 1080px) { :is(.wz-spine-grid, .os-wz-spine-grid) { grid-template-columns: 1fr; } }
:is(.wz-spine, .os-wz-spine) { position: sticky; top: 24px; }
:is(.wz-vsteps, .os-wz-vsteps) { display: flex; flex-direction: column; }
:is(.wz-vstep, .os-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%; }
:is(.wz-vstep, .os-wz-vstep):last-child { padding-bottom: 0; }
:is(.wz-vstep, .os-wz-vstep)::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--hairline); }
:is(.wz-vstep, .os-wz-vstep):last-child::before { display: none; }
:is(.wz-vstep, .os-wz-vstep):is(.done, .os-done)::before, :is(.wz-vstep, .os-wz-vstep):is(.active, .os-active)::before { background: var(--accent); }
:is(.wz-vstep, .os-wz-vstep) :is(.wz-dot, .os-wz-dot) { width: 34px; }
:is(.wz-vstep-body, .os-wz-vstep-body) { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
:is(.wz-vstep-label, .os-wz-vstep-label) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
:is(.wz-vstep, .os-wz-vstep):is(.done, .os-done) :is(.wz-vstep-label, .os-wz-vstep-label) { color: var(--muted); }
:is(.wz-vstep, .os-wz-vstep):is(.active, .os-active) :is(.wz-vstep-label, .os-wz-vstep-label) { color: var(--accent); }
:is(.wz-vstep-sub, .os-wz-vstep-sub) { font-size: var(--text-xs); color: var(--muted-2); }
:is(.wz-vstep, .os-wz-vstep)[disabled] { cursor: default; }
/* ── Sleek segmented bar stepper (layout="bars") ───────────── */
:is(.wz-bars, .os-wz-bars) { width: 100%; max-width: var(--content-max); margin-inline: auto; }
:is(.wz-bars-inner, .os-wz-bars-inner) { display: flex; gap: 10px; max-width: var(--content-max); margin: 0 auto; }
:is(.wz-seg, .os-wz-seg) { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; background: none; border: 0; padding: 0; cursor: default; font: inherit; }
:is(.wz-seg, .os-wz-seg) :is(.bar, .os-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; }
:is(.wz-seg, .os-wz-seg):is(.done, .os-done) :is(.bar, .os-bar), :is(.wz-seg, .os-wz-seg):is(.on, .os-on) :is(.bar, .os-bar) { background: var(--accent); }
:is(.wz-seg, .os-wz-seg):is(.on, .os-on) :is(.bar, .os-bar) { height: 6px; box-shadow: 0 0 0 3px var(--accent-softer); }
:is(.wz-seg, .os-wz-seg) :is(.lbrow, .os-lbrow) { display: flex; align-items: center; gap: 5px; min-width: 0; }
:is(.wz-seg, .os-wz-seg) :is(.lb, .os-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; }
:is(.wz-seg, .os-wz-seg):is(.done, .os-done) :is(.lb, .os-lb) { color: var(--muted); }
:is(.wz-seg, .os-wz-seg):is(.on, .os-on) :is(.lb, .os-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. */
:is(.wz-seg, .os-wz-seg) :is(.tk, .os-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; }
:is(.wz-seg, .os-wz-seg):is(.done, .os-done) :is(.tk, .os-tk) { display: inline-flex; }
:is(.wz-seg, .os-wz-seg):is(.on, .os-on) :is(.lbrow, .os-lbrow)::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
:is(.wz-seg, .os-wz-seg):is(.nav, .os-nav) { cursor: pointer; }
:is(.wz-seg, .os-wz-seg):is(.nav, .os-nav):hover :is(.bar, .os-bar) { background: var(--accent); }
:is(.wz-seg, .os-wz-seg):is(.done, .os-done):is(.nav, .os-nav):hover :is(.bar, .os-bar) { background: var(--accent-strong); }
:is(.wz-seg, .os-wz-seg):is(.nav, .os-nav):hover :is(.lb, .os-lb) { color: var(--ink); }
:is(.wz-seg, .os-wz-seg):is(.done, .os-done):is(.nav, .os-nav):hover :is(.lb, .os-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. */
:is(.wz-seg, .os-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. */
/* The couple is a full-width header BAND (like .wz-foot) so its bottom separator
   spans the whole pane edge-to-edge; the stepper CONTENT self-centers at the
   reading width via .wz-bars / .wz-bars-inner. Capping the couple at
   --content-max clipped the separator to 768px and centred it, leaving dead
   gutters. (full-bleed separator fix) */
:is(.wz-couple, .os-wz-couple) { width: 100%; margin: 0 auto; padding: 0 40px; }
:is(.wz-couple-detached, .os-wz-couple-detached) { padding-top: 22px; padding-bottom: 4px; }
:is(.wz-pills, .os-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; }
:is(.wz-pill, .os-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; }
:is(.wz-pill, .os-wz-pill) :is(.num, .os-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); }
:is(.wz-pill, .os-wz-pill):is(.done, .os-done) { color: var(--gray-700); }
:is(.wz-pill, .os-wz-pill):is(.done, .os-done) :is(.num, .os-num) { background: var(--accent); color: var(--surface); }
:is(.wz-pill, .os-wz-pill):is(.on, .os-on) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
:is(.wz-pill, .os-wz-pill):is(.on, .os-on) :is(.num, .os-num) { background: var(--accent); color: var(--surface); }
:is(.wz-pill, .os-wz-pill):is(.nav, .os-nav) { cursor: pointer; }
:is(.wz-pill, .os-wz-pill):is(.nav, .os-nav):hover { background: var(--surface-alt); }
:is(.wz-pillsep, .os-wz-pillsep) { width: 14px; height: 1px; background: var(--hairline); flex-shrink: 0; }
/* card (V4) — stepper in a card atop the content */
:is(.wz-couple-card, .os-wz-couple-card) { padding-top: 40px; padding-bottom: 6px; }
:is(.wz-couple-card, .os-wz-couple-card) > :is(.wz-bars, .os-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; }
:is(.wz-couple-card, .os-wz-couple-card):is(.bare, .os-bare) > :is(.wz-bars, .os-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. */
:is(.wz-flow, .os-wz-flow) > :is(.wz-couple, .os-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); }
:is(.wz-flow, .os-wz-flow) > :is(.wz-couple, .os-wz-couple).is-scrolled { margin-top: 0; }
/* header-right tracker (V3) */
:is(.wz-hr-cluster, .os-wz-hr-cluster) { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
:is(.wz-track, .os-wz-track) { display: flex; align-items: center; gap: 0; }
:is(.wz-tstep, .os-wz-tstep) { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: default; font: inherit; }
:is(.wz-tstep, .os-wz-tstep):is(.nav, .os-nav) { cursor: pointer; }
:is(.wz-tnum, .os-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); }
:is(.wz-tstep, .os-wz-tstep):is(.done, .os-done) :is(.wz-tnum, .os-wz-tnum) { background: var(--accent); border-color: var(--accent); color: var(--surface); }
:is(.wz-tstep, .os-wz-tstep):is(.on, .os-on) :is(.wz-tnum, .os-wz-tnum) { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
:is(.wz-tlbl, .os-wz-tlbl) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
:is(.wz-tstep, .os-wz-tstep):is(.on, .os-on) :is(.wz-tlbl, .os-wz-tlbl) { color: var(--accent); }
:is(.wz-tstep, .os-wz-tstep):is(.done, .os-done) :is(.wz-tlbl, .os-wz-tlbl) { color: var(--muted); }
:is(.wz-tconn, .os-wz-tconn) { width: 28px; height: 1.5px; background: var(--hairline); margin: 0 2px 18px; }
:is(.wz-tconn, .os-wz-tconn):is(.done, .os-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. */
:is(.wz-body, .os-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) */
:is(.wz-flow, .os-wz-flow) form:is(.form, .os-form) > :is(.wz-body, .os-wz-body) { margin-top: 0 !important; border-top: 0 !important; }
:is(.wz-inner, .os-wz-inner) { max-width: var(--content-max); margin: 0 auto; padding: 30px 40px 40px; }
:is(.wz-inner, .os-wz-inner):is(.narrow, .os-narrow) { max-width: 880px; }
/* ── Header eyebrow — mono "Bookings / New" breadcrumb ───────── */
:is(.wz-eyebrow, .os-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; }
:is(.wz-eyebrow-crumb, .os-wz-eyebrow-crumb) { color: var(--muted); text-decoration: none; }
:is(.wz-eyebrow-crumb, .os-wz-eyebrow-crumb):hover { color: var(--ink); }
:is(.wz-eyebrow-sep, .os-wz-eyebrow-sep) { color: var(--muted-2); }
:is(.wz-eyebrow-cur, .os-wz-eyebrow-cur) { color: var(--accent); font-weight: 500; }
/* ── Stage intro ──────────────────────────────────────────── */
:is(.wz-stage-head, .os-wz-stage-head) { margin-bottom: 22px; }
:is(.wz-stage-head, .os-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); }
:is(.wz-stage-head, .os-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) ── */
:is(.wz-sec-head, .os-wz-sec-head) { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
:is(.wz-sec-title, .os-wz-sec-title) { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
:is(.wz-sec-title, .os-wz-sec-title) :is(.t, .os-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; }
:is(.wz-sec-title, .os-wz-sec-title) :is(.c, .os-c) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
:is(.wz-sec-head, .os-wz-sec-head) :is(.a, .os-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; }
:is(.wz-sec-head, .os-wz-sec-head) :is(.a, .os-a):hover { color: var(--accent-strong); }
/* ── Ledger (single bordered frame for any list) — from .dp-ledger ── */
:is(.wz-ledger, .os-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; }
:is(.wz-row, .os-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; }
:is(.wz-row, .os-wz-row):first-child { border-top: 0; }
:is(.wz-row, .os-wz-row):is(.link, .os-link) { cursor: pointer; }
:is(.wz-row, .os-wz-row):is(.link, .os-link):hover { background: var(--wz-tint); }
:is(.wz-row, .os-wz-row)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
:is(.wz-row, .os-wz-row):is(.rail-accent, .os-rail-accent)::before { background: var(--accent); }
/* ledger sub-head (group divider band inside a ledger) */
:is(.wz-grouphead, .os-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); }
:is(.wz-grouphead, .os-wz-grouphead):first-child { border-top: 0; }
:is(.wz-grouphead, .os-wz-grouphead) :is(.nm, .os-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; }
:is(.wz-grouphead, .os-wz-grouphead) :is(.dts, .os-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; }
:is(.wz-grouphead, .os-wz-grouphead) :is(.sub, .os-sub) { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.wz-grouphead, .os-wz-grouphead):is(.warm, .os-warm) { background: var(--briefing-bg); }
:is(.wz-grouphead, .os-wz-grouphead):is(.warm, .os-warm) :is(.nm, .os-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 */
:is(.wz-kv, .os-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; }
:is(.wz-kv, .os-wz-kv) :is(.cell, .os-cell) { padding: 18px 22px; border-left: 1px solid var(--hairline-2); }
:is(.wz-kv, .os-wz-kv):is(.cols-3, .os-cols-3) :is(.cell, .os-cell):nth-child(3n+1) { border-left: 0; }
:is(.wz-kv, .os-wz-kv) :is(.k, .os-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); }
:is(.wz-kv, .os-wz-kv) :is(.k, .os-k) :is(.ico, .os-ico) { color: var(--muted-2); }
:is(.wz-kv, .os-wz-kv) :is(.v, .os-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; }
:is(.wz-kv, .os-wz-kv) :is(.v, .os-v):is(.mono, .os-mono) { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }
:is(.wz-kv, .os-wz-kv) :is(.v, .os-v):is(.dash, .os-dash) { color: var(--muted-2); font-weight: 500; }
:is(.wz-kv, .os-wz-kv) :is(.v, .os-v):is(.nowrap, .os-nowrap) { white-space: nowrap; }
:is(.wz-kv, .os-wz-kv) :is(.sub, .os-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) ── */
:is(.wz-gate, .os-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; }
:is(.wz-gate-head, .os-wz-gate-head) { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
:is(.wz-gate-head, .os-wz-gate-head) :is(.t, .os-t) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
:is(.wz-gate-head, .os-wz-gate-head) :is(.s, .os-s) { font-size: var(--text-sm); color: var(--muted); margin-top: 3px; }
:is(.wz-gate-head, .os-wz-gate-head) :is(.tot, .os-tot) { text-align: right; }
:is(.wz-gate-head, .os-wz-gate-head) :is(.tot, .os-tot) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:is(.wz-gate-head, .os-wz-gate-head) :is(.tot, .os-tot) :is(.v, .os-v) { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); margin-top: 2px; }
:is(.wz-req, .os-wz-req) { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); }
:is(.wz-req, .os-wz-req):first-of-type { border-top: 0; }
:is(.wz-req, .os-wz-req) :is(.tick, .os-tick) { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
:is(.wz-req, .os-wz-req):is(.ok, .os-ok) :is(.tick, .os-tick) { background: var(--confirmed-bg); color: var(--confirmed); }
:is(.wz-req, .os-wz-req):is(.no, .os-no) :is(.tick, .os-tick) { background: var(--briefing-bg); color: var(--briefing); }
:is(.wz-req, .os-wz-req) :is(.rtxt, .os-rtxt) { color: var(--ink); }
:is(.wz-req, .os-wz-req) :is(.rtxt, .os-rtxt) b { font-weight: 600; }
:is(.wz-req, .os-wz-req) :is(.rstate, .os-rstate) { margin-left: auto; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; font-family: var(--font-mono); }
:is(.wz-req, .os-wz-req):is(.ok, .os-ok) :is(.rstate, .os-rstate) { color: var(--confirmed); }
:is(.wz-req, .os-wz-req):is(.no, .os-no) :is(.rstate, .os-rstate) { color: var(--briefing); }
:is(.wz-gate-foot, .os-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) ─────────── */
:is(.wz-foot, .os-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); }
/* Full-width button row so the actions sit at the pane edges (with the 40px
   band inset), matching the full-width footer band. Capping at --content-max
   pulled Back/Discard and Next toward the middle. (full-bleed footer fix) */
:is(.wz-foot-inner, .os-wz-foot-inner) { margin: 0 auto; padding: 14px 40px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
:is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp) { display: flex; align-items: center; gap: 10px; }
:is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.start, .os-start) { justify-self: start; }
:is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.center, .os-center) { justify-self: center; }
:is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.end, .os-end) { justify-self: end; }
/* Hairline divider between Back and the destructive Discard link. */
:is(.wz-foot-sep, .os-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. */
:is(.dv-btn--ghost, .os-btn--ghost) { background: transparent; border-color: transparent; box-shadow: none; }
:is(.dv-btn--ghost, .os-btn--ghost):hover { background: var(--cancelled-bg); }
:is(.btn-destructive, .os-btn-destructive) { color: var(--cancelled); }
:is(.btn-destructive, .os-btn-destructive):hover { color: var(--cancelled); }
:is(.wz-foot-hint, .os-wz-foot-hint) { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
:is(.wz-foot-hint, .os-wz-foot-hint) :is(.kbd, .os-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); }
:is(.wz-foot-hint, .os-wz-foot-hint) :is(.req, .os-req) { display: inline-flex; align-items: center; gap: 6px; color: var(--briefing); font-weight: 600; }
:is(.wz-foot, .os-wz-foot) :is(.total, .os-total) { display: flex; align-items: baseline; gap: 9px; margin-right: 4px; }
:is(.wz-foot, .os-wz-foot) :is(.total, .os-total) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:is(.wz-foot, .os-wz-foot) :is(.total, .os-total) :is(.v, .os-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 ─────────────────────────────────────── */
:is(.wz-guest, .os-wz-guest) { grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; }
:is(.wz-guest, .os-wz-guest) :is(.id, .os-id) { display: flex; align-items: center; gap: 9px; }
:is(.wz-guest, .os-wz-guest) :is(.nm, .os-nm) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
:is(.wz-guest, .os-wz-guest) :is(.sub, .os-sub) { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
:is(.wz-guest, .os-wz-guest) :is(.sub, .os-sub) :is(.mono, .os-mono) { font-family: var(--font-mono); white-space: nowrap; }
:is(.wz-guest, .os-wz-guest):is(.sel, .os-sel) { background: var(--accent-softer); }
:is(.wz-pick, .os-wz-pick) { font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
/* outline tag badge (Hotel guest / Walk-in / Diver …) */
:is(.wz-tagbadge, .os-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; }
:is(.wz-changelink, .os-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; }
:is(.wz-changelink, .os-wz-changelink):hover { color: var(--accent-strong); }
/* guest search field (44px, search icon room at left) */
:is(.wz-guest-search, .os-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; }
:is(.wz-guest-search, .os-wz-guest-search):focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.wz-guest-results, .os-wz-guest-results) { margin-top: 14px; }
/* Resting/empty search state — bordered (no fill) so it reads as a panel, not floating. */
:is(.wz-guest-empty, .os-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); }
:is(.wz-guest-empty, .os-wz-guest-empty) :is(.ico, .os-ico) { color: var(--muted-2); margin-bottom: 12px; display: flex; }
:is(.wz-guest-empty, .os-wz-guest-empty) :is(.t, .os-t) { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
:is(.wz-guest-empty, .os-wz-guest-empty) :is(.s, .os-s) { margin: 6px 0 0; font-size: var(--text-sm); }
/* setting row (email toggle) — tinted accent-softer when ON */
:is(.wz-setrow, .os-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; }
:is(.wz-setrow, .os-wz-setrow):is(.on, .os-on) { background: var(--accent-softer); border-color: var(--accent-border); }
/* DS ToggleSwitch (checkbox-backed) */
:is(.wz-toggle, .os-wz-toggle) { position: relative; display: inline-flex; flex-shrink: 0; }
:is(.wz-toggle, .os-wz-toggle) input { position: absolute; opacity: 0; width: 0; height: 0; }
:is(.wz-toggle-track, .os-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; }
:is(.wz-toggle-thumb, .os-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); }
:is(.wz-toggle, .os-wz-toggle) input:checked + :is(.wz-toggle-track, .os-wz-toggle-track) { background: var(--accent); }
:is(.wz-toggle, .os-wz-toggle) input:checked + :is(.wz-toggle-track, .os-wz-toggle-track) :is(.wz-toggle-thumb, .os-wz-toggle-thumb) { transform: translateX(18px); }
:is(.wz-toggle, .os-wz-toggle) input:focus-visible + :is(.wz-toggle-track, .os-wz-toggle-track) { box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.wz-setrow, .os-wz-setrow) :is(.lead, .os-lead) { display: flex; gap: 13px; align-items: flex-start; }
:is(.wz-setrow, .os-wz-setrow) :is(.ico, .os-ico) { color: var(--muted-2); margin-top: 1px; }
:is(.wz-setrow, .os-wz-setrow) :is(.t, .os-t) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.wz-setrow, .os-wz-setrow) :is(.s, .os-s) { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
:is(.wz-setrow, .os-wz-setrow) :is(.s, .os-s) b { color: var(--ink); font-weight: 600; }
/* ── Diver block: section head + ledger ───────────────────── */
:is(.wz-diver, .os-wz-diver) { margin-bottom: 26px; }
:is(.wz-diver-head, .os-wz-diver-head) { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
:is(.wz-diver-id, .os-wz-diver-id) { display: flex; align-items: center; gap: 11px; min-width: 0; }
:is(.wz-diver-id, .os-wz-diver-id) :is(.nm, .os-nm) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
:is(.wz-name-input, .os-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; }
:is(.wz-name-input, .os-wz-name-input):focus { border-bottom-color: var(--accent); }
:is(.wz-diver-meta, .os-wz-diver-meta) { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
:is(.wz-diver-tot, .os-wz-diver-tot) { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--ink); }
:is(.wz-diver-tot, .os-wz-diver-tot):is(.zero, .os-zero) { color: var(--muted-2); }
:is(.wz-iconbtn, .os-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; }
:is(.wz-iconbtn, .os-wz-iconbtn):hover { background: var(--gray-100); color: var(--cancelled); }
/* date chips */
:is(.wz-dates, .os-wz-dates) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(.wz-dates, .os-wz-dates) :is(.cap, .os-cap) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
:is(.wz-chip, .os-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; }
:is(.wz-chip, .os-wz-chip) button { display: inline-flex; padding: 0; border: 0; background: none; color: var(--accent); opacity: .6; cursor: pointer; }
:is(.wz-chip, .os-wz-chip) button:hover { opacity: 1; }
:is(.wz-adddate, .os-wz-adddate) { position: relative; display: inline-flex; }
:is(.wz-adddate-btn, .os-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; }
:is(.wz-adddate-btn, .os-wz-adddate-btn):hover { background: var(--accent-softer); }
:is(.wz-menu, .os-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; }
:is(.wz-menu, .os-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; }
:is(.wz-menu, .os-wz-menu) button:hover { background: var(--gray-50); }
:is(.wz-menu, .os-wz-menu) :is(.ico, .os-ico) { color: var(--muted-2); }
:is(.wz-menu, .os-wz-menu) :is(.empty, .os-empty) { padding: 8px 10px; font-size: var(--text-xs); color: var(--muted-2); }
/* date sub-section inside a diver card */
:is(.wz-datesec, .os-wz-datesec) { border-top: 1px solid var(--hairline); }
:is(.wz-datesec, .os-wz-datesec):first-child { border-top: 0; }
/* date as a real section title */
:is(.wz-dsec-title, .os-wz-dsec-title) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 8px; }
:is(.wz-dsec-title, .os-wz-dsec-title) :is(.lhs, .os-lhs) { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
:is(.wz-dsec-title, .os-wz-dsec-title) :is(.cal, .os-cal) { color: var(--accent); display: inline-flex; flex-shrink: 0; }
:is(.wz-dsec-title, .os-wz-dsec-title) :is(.d, .os-d) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); }
:is(.wz-dsec-x, .os-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; }
:is(.wz-datesec, .os-wz-datesec):hover :is(.wz-dsec-x, .os-wz-dsec-x) { opacity: 1; }
:is(.wz-dsec-x, .os-wz-dsec-x):hover { background: var(--gray-100); color: var(--ink); }
/* placeholder add row at the bottom of each date section */
:is(.wz-dsec-add, .os-wz-dsec-add) { display: flex; gap: 8px; padding: 8px 20px 16px; }
:is(.wz-addph, .os-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; }
:is(.wz-addph, .os-wz-addph):hover { background: var(--accent-softer); }
:is(.wz-addph, .os-wz-addph):is(.add, .os-add) { color: var(--confirmed); border-color: var(--confirmed-border); }
:is(.wz-addph, .os-wz-addph):is(.add, .os-add):hover { background: var(--confirmed-bg); }
/* add-date placeholder pinned at the bottom of the card */
:is(.wz-adddate-row, .os-wz-adddate-row) { padding: 12px 20px 14px; border-top: 1px solid var(--hairline); }
:is(.wz-adddate, .os-wz-adddate):is(.block, .os-block) { display: block; }
:is(.wz-adddate, .os-wz-adddate):is(.block, .os-block) :is(.wz-adddate-btn, .os-wz-adddate-btn) { width: 100%; justify-content: center; height: 42px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
:is(.wz-adddate, .os-wz-adddate):is(.block, .os-block) :is(.wz-menu, .os-wz-menu) { width: 100%; }
/* line item row — editable price + per-item actions */
:is(.wz-li, .os-wz-li) { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 98px 92px 56px; align-items: center; gap: 12px; padding: 8px 20px; }
:is(.wz-li, .os-wz-li) :is(.kind, .os-kind) { display: inline-flex; justify-content: center; }
/* micro column header — printed once on the first item of each date section */
:is(.wz-li-head, .os-wz-li-head) { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 98px 92px 56px; gap: 12px; padding: 4px 20px 2px; }
:is(.wz-li-head, .os-wz-li-head) span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); }
:is(.wz-li-head, .os-wz-li-head) :is(.h-qty, .os-h-qty) { text-align: center; }
:is(.wz-li-head, .os-wz-li-head) :is(.h-unit, .os-h-unit), :is(.wz-li-head, .os-wz-li-head) :is(.h-total, .os-h-total) { text-align: right; }
:is(.wz-li, .os-wz-li) :is(.kind, .os-kind):is(.pkg, .os-pkg) { color: var(--accent); }
:is(.wz-li, .os-wz-li) :is(.kind, .os-kind):is(.add, .os-add) { color: var(--confirmed); }
:is(.wz-li, .os-wz-li) :is(.qtywrap, .os-qtywrap) { display: flex; justify-content: center; }
:is(.wz-li, .os-wz-li) :is(.amt, .os-amt) { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.wz-li-acts, .os-wz-li-acts) { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
:is(.wz-li-acts, .os-wz-li-acts) :is(.wz-iconbtn, .os-wz-iconbtn) { opacity: 0.5; transition: opacity .12s ease, background .12s ease, color .12s ease; }
:is(.wz-li, .os-wz-li):hover :is(.wz-li-acts, .os-wz-li-acts) :is(.wz-iconbtn, .os-wz-iconbtn), :is(.wz-li, .os-wz-li):focus-within :is(.wz-li-acts, .os-wz-li-acts) :is(.wz-iconbtn, .os-wz-iconbtn) { opacity: 1; }
:is(.wz-iconbtn, .os-wz-iconbtn):is(.apply, .os-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. */
:is(.wz-li, .os-wz-li) :is(.wz-iconbtn, .os-wz-iconbtn):is(.apply, .os-apply) svg { stroke: var(--wz-copy-ico); }
:is(.wz-li, .os-wz-li) :is(.wz-iconbtn, .os-wz-iconbtn):is(.del, .os-del) svg { stroke: var(--wz-del-ico); }
:is(.wz-li, .os-wz-li) :is(.wz-iconbtn, .os-wz-iconbtn):is(.apply, .os-apply):hover { background: var(--accent-soft); }
:is(.wz-li, .os-wz-li) :is(.wz-iconbtn, .os-wz-iconbtn):is(.del, .os-del):hover { background: var(--cancelled-bg); }
:is(.wz-li-empty, .os-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 */
:is(.wz-dcard, .os-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; }
:is(.wz-dcard-head, .os-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); }
:is(.wz-dcard-head, .os-wz-dcard-head) :is(.wz-diver-id, .os-wz-diver-id) { gap: 11px; }
/* high-stakes diver removal — distinct from the line/chip × ; needs confirm */
:is(.wz-dremove, .os-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; }
:is(.wz-dremove, .os-wz-dremove):hover { background: var(--cancelled-bg); color: var(--cancelled); }
:is(.wz-dconfirm, .os-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); }
:is(.wz-dconfirm, .os-wz-dconfirm) :is(.q, .os-q) { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; }
:is(.wz-dconfirm, .os-wz-dconfirm) :is(.yes, .os-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; }
:is(.wz-dconfirm, .os-wz-dconfirm) :is(.no, .os-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; }
:is(.wz-dconfirm, .os-wz-dconfirm) :is(.no, .os-no):hover { color: var(--ink); }
:is(.wz-dcard-dates, .os-wz-dcard-dates) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px;
  border-bottom: 1px solid var(--hairline-2); }
:is(.wz-dcard-dates, .os-wz-dcard-dates) :is(.cap, .os-cap) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
:is(.wz-dcard-body, .os-wz-dcard-body) { padding: 2px 0 8px; }
:is(.wz-dcard-body, .os-wz-dcard-body) :is(.wz-datesec, .os-wz-datesec):first-child { border-top: 0; }
/* catalogue select shell */
:is(.wz-sel, .os-wz-sel) { position: relative; min-width: 0; }
:is(.wz-sel, .os-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;
  /* Suppress the @tailwindcss/forms select chevron — the .wz-sel .chev Lucide
     caret is the affordance here; appearance:none doesn't remove that bg image. */
  background-image: none; }
:is(.wz-sel, .os-wz-sel) select:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.wz-sel, .os-wz-sel) :is(.chev, .os-chev) { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted-2); }
/* qty stepper — POS-sized touch targets (>=36px) */
:is(.wz-qty, .os-wz-qty) { display: inline-flex; align-items: center; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
:is(.wz-qty, .os-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; }
:is(.wz-qty, .os-wz-qty) button:hover { background: var(--gray-100); color: var(--ink); }
:is(.wz-qty, .os-wz-qty) button:active { background: var(--gray-200); }
:is(.wz-qty, .os-wz-qty) :is(.n, .os-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 */
:is(.wz-price, .os-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; }
:is(.wz-price, .os-wz-price):hover { border-color: var(--gray-300); background: var(--surface); }
:is(.wz-price, .os-wz-price):focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface); }
:is(.wz-price, .os-wz-price) :is(.cur, .os-cur) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
:is(.wz-price, .os-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; }
:is(.wz-price, .os-wz-price) input::-webkit-outer-spin-button, :is(.wz-price, .os-wz-price) input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* add-diver dashed button */
:is(.wz-add-diver, .os-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; }
:is(.wz-add-diver, .os-wz-add-diver):hover { background: var(--accent-softer); }
:is(.wz-copy, .os-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%; }
:is(.wz-copy, .os-wz-copy):hover { color: var(--accent-strong); }
/* ── Order summary rail (Step 2) ──────────────────────────── */
:is(.wz-2col, .os-wz-2col) { display: grid; grid-template-columns: minmax(0,1fr) 332px; gap: 30px; align-items: start; }
@media (max-width: 1080px) { :is(.wz-2col, .os-wz-2col) { grid-template-columns: 1fr; } :is(.wz-sum, .os-wz-sum) { position: static; } }
:is(.wz-sum, .os-wz-sum) { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
:is(.wz-sum-card, .os-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; }
:is(.wz-sum-head, .os-wz-sum-head) { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
:is(.wz-sum-head, .os-wz-sum-head) :is(.t, .os-t) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:is(.wz-sum-scroll, .os-wz-sum-scroll) { max-height: 44vh; overflow-y: auto; padding: 4px 18px; }
:is(.wz-sum-grp, .os-wz-sum-grp) { padding: 12px 0; border-top: 1px solid var(--hairline-2); }
:is(.wz-sum-grp, .os-wz-sum-grp):first-child { border-top: 0; }
:is(.wz-sum-grp, .os-wz-sum-grp) :is(.gh, .os-gh) { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
:is(.wz-sum-grp, .os-wz-sum-grp) :is(.gh, .os-gh) :is(.nm, .os-nm) { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
:is(.wz-sum-grp, .os-wz-sum-grp) :is(.gh, .os-gh) :is(.nm, .os-nm):is(.unset, .os-unset) { color: var(--muted-2); }
:is(.wz-sum-grp, .os-wz-sum-grp) :is(.gh, .os-gh) :is(.nm, .os-nm):is(.warm, .os-warm) { color: var(--gray-700); }
:is(.wz-sum-grp, .os-wz-sum-grp) :is(.gh, .os-gh) :is(.tt, .os-tt) { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.wz-sum-line, .os-wz-sum-line) { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; }
:is(.wz-sum-line, .os-wz-sum-line) :is(.nm, .os-nm) { color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.wz-sum-line, .os-wz-sum-line) :is(.dt, .os-dt) { color: var(--muted-2); font-family: var(--font-mono); }
:is(.wz-sum-line, .os-wz-sum-line) :is(.amt, .os-amt) { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; }
:is(.wz-sum-line, .os-wz-sum-line):is(.empty, .os-empty) { font-style: italic; color: var(--muted-2); }
:is(.wz-sum-total, .os-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); }
:is(.wz-sum-total, .os-wz-sum-total) :is(.k, .os-k) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
:is(.wz-sum-total, .os-wz-sum-total) :is(.v, .os-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 */
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) { background: var(--slate-100); border-color: var(--slate-300); }
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) :is(.wz-sum-head, .os-wz-sum-head) { border-bottom-color: var(--slate-200); }
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) :is(.wz-sum-head, .os-wz-sum-head) :is(.t, .os-t) { color: var(--slate-500); }
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) :is(.wz-sum-grp, .os-wz-sum-grp) { border-top-color: var(--slate-200); }
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) :is(.wz-sum-line, .os-wz-sum-line) :is(.amt, .os-amt) { color: var(--slate-500); }
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) :is(.wz-sum-total, .os-wz-sum-total) { background: var(--slate-200); border-top-color: var(--slate-300); }
/* ── Review line rows ─────────────────────────────────────── */
:is(.wz-rev-li, .os-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); }
:is(.wz-rev-li, .os-wz-rev-li) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); display: block; }
:is(.wz-rev-li, .os-wz-rev-li) :is(.dt, .os-dt) { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; }
:is(.wz-rev-li, .os-wz-rev-li) :is(.qty, .os-qty) { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--gray-700); }
:is(.wz-rev-li, .os-wz-rev-li) :is(.amt, .os-amt) { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.wz-rev-total, .os-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); }
:is(.wz-rev-total, .os-wz-rev-total) :is(.k, .os-k) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.wz-rev-total, .os-wz-rev-total) :is(.v, .os-v) { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; color: var(--ink); }
/* ── Payment ──────────────────────────────────────────────── */
:is(.wz-addpay, .os-wz-addpay) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.wz-pm, .os-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; }
:is(.wz-pm, .os-wz-pm):hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); }
:is(.wz-pm, .os-wz-pm) :is(.ico, .os-ico) { color: var(--muted); }
:is(.wz-pm, .os-wz-pm):hover :is(.ico, .os-ico) { color: var(--accent); }
:is(.wz-payrow, .os-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 */
:is(.wz-pay-add, .os-wz-pay-add) { padding: 16px 20px; }
/* title row inside a card */
:is(.wz-cardtitle, .os-wz-cardtitle) { display: flex; align-items: baseline; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--hairline); }
:is(.wz-cardtitle, .os-wz-cardtitle) :is(.t, .os-t) { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
:is(.wz-cardtitle, .os-wz-cardtitle) :is(.c, .os-c) { font-size: var(--text-xs); color: var(--muted-2); }
:is(.wz-paysec-head, .os-wz-paysec-head) { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px 4px; border-top: 1px solid var(--hairline); }
:is(.wz-paysec-head, .os-wz-paysec-head) :is(.t, .os-t) { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
:is(.wz-paysec-head, .os-wz-paysec-head) :is(.c, .os-c) { font-size: var(--text-xs); color: var(--muted-2); }
/* attribution — selectable staff chips + compact commission */
:is(.wz-attr, .os-wz-attr) { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 16px; }
:is(.wz-attr-search, .os-wz-attr-search) { position: relative; margin-bottom: 10px; max-width: 320px; }
:is(.wz-attr-search, .os-wz-attr-search) :is(.ico, .os-ico) { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; display: flex; }
:is(.wz-attr-search, .os-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; }
:is(.wz-attr-search, .os-wz-attr-search) input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.wz-attr-empty, .os-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). */
:is(.wz-attr-selected, .os-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); }
:is(.wz-attr-selected, .os-wz-attr-selected) :is(.badge, .os-badge) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
:is(.wz-attr-selected, .os-wz-attr-selected) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.wz-attr-selected, .os-wz-attr-selected) :is(.rm, .os-rm) { display: inline-flex; color: var(--muted-2); background: none; border: 0; cursor: pointer; padding: 2px; }
:is(.wz-attr-selected, .os-wz-attr-selected) :is(.rm, .os-rm):hover { color: var(--cancelled); }
:is(.wz-attr-chips, .os-wz-attr-chips) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.wz-attr-chip, .os-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; }
:is(.wz-attr-chip, .os-wz-attr-chip):hover { border-color: var(--accent-border); background: var(--accent-softer); }
:is(.wz-attr-chip, .os-wz-attr-chip):is(.on, .os-on) { border-color: var(--accent); background: var(--accent-softer); }
:is(.wz-attr-chip, .os-wz-attr-chip) :is(.who, .os-who) { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
:is(.wz-attr-chip, .os-wz-attr-chip) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.wz-attr-chip, .os-wz-attr-chip) :is(.role, .os-role) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
:is(.wz-attr-chip, .os-wz-attr-chip):is(.on, .os-on) :is(.role, .os-role) { color: var(--accent); }
:is(.wz-attr-chip, .os-wz-attr-chip) :is(.tick, .os-tick) { display: inline-flex; color: var(--accent); margin-left: 2px; }
:is(.wz-attr-comm, .os-wz-attr-comm) { max-width: 280px; }
:is(.wz-attr-commrow, .os-wz-attr-commrow) { display: flex; align-items: center; gap: 12px; }
:is(.wz-attr-default, .os-wz-attr-default) { font-size: var(--text-xs); color: var(--muted); }
:is(.wz-attr-default, .os-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; }
:is(.wz-attr-default, .os-wz-attr-default) button:hover { color: var(--accent-strong); }
:is(.wz-payrow, .os-wz-payrow) > div { min-width: 0; }
:is(.wz-fl, .os-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; }
:is(.wz-payrow, .os-wz-payrow) :is(.wz-rm, .os-wz-rm) { align-self: start; margin-top: 20px; }
:is(.wz-payrow, .os-wz-payrow):first-child { border-top: 0; }
:is(.wz-fl, .os-wz-fl) :is(.req, .os-req) { color: var(--error); }
:is(.wz-mi, .os-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; }
:is(.wz-mi, .os-wz-mi):is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.wz-mi, .os-wz-mi):focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.wz-paysub, .os-wz-paysub) { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
:is(.wz-paysub, .os-wz-paysub):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.wz-pay-readonly, .os-wz-pay-readonly) { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); }
/* ── Done ─────────────────────────────────────────────────── */
:is(.wz-done, .os-wz-done) { max-width: 620px; margin: 12px auto 0; }
:is(.wz-done-hero, .os-wz-done-hero) { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 26px; }
:is(.wz-done-ring, .os-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; }
:is(.wz-done-hero, .os-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); }
:is(.wz-done-hero, .os-wz-done-hero) p { margin: 8px 0 0; font-size: var(--text-sm); color: var(--muted); max-width: 46ch; }
:is(.wz-done-hero, .os-wz-done-hero) :is(.ref, .os-ref) { font-family: var(--font-mono); font-weight: 600; color: var(--gray-700); }
/* ── Compact density ──────────────────────────────────────── */
:is(.wz-compact, .os-wz-compact) :is(.wz-inner, .os-wz-inner) { padding-top: 22px; }
:is(.wz-compact, .os-wz-compact) :is(.wz-row, .os-wz-row), :is(.wz-compact, .os-wz-compact) :is(.wz-li, .os-wz-li), :is(.wz-compact, .os-wz-compact) :is(.wz-rev-li, .os-wz-rev-li) { padding-top: 6px; padding-bottom: 6px; }
:is(.wz-compact, .os-wz-compact) :is(.wz-req, .os-wz-req) { padding-top: 11px; padding-bottom: 11px; }
:is(.wz-compact, .os-wz-compact) :is(.wz-diver, .os-wz-diver) { margin-bottom: 20px; }
/* small helpers */
:is(.wz-flex, .os-wz-flex) { display: flex; align-items: center; }
:is(.wz-mono, .os-wz-mono) { font-family: var(--font-mono); }
/* ════════════════════════════════════════════════════════════
   Selected-guest card (Step 1) — unmistakably "chosen"
   ════════════════════════════════════════════════════════════ */
:is(.wz-selguest, .os-wz-selguest) { border: 1.5px solid var(--accent); background: var(--accent-softer); border-radius: var(--radius-lg);
  overflow: hidden; }
:is(.wz-selguest-bar, .os-wz-selguest-bar) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px;
  background: var(--accent); }
:is(.wz-selguest-bar, .os-wz-selguest-bar) :is(.lbl, .os-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); }
:is(.wz-selguest-bar, .os-wz-selguest-bar) :is(.chk, .os-chk) { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--surface); }
:is(.wz-selguest-body, .os-wz-selguest-body) { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
:is(.wz-selguest-body, .os-wz-selguest-body) :is(.nm, .os-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) */
:is(.wz-party-sec, .os-wz-party-sec) { margin-top: 22px; }
:is(.wz-stay-sec, .os-wz-stay-sec) { margin-top: 22px; }
:is(.wz-party-lbl, .os-wz-party-lbl) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
:is(.wz-party-row, .os-wz-party-row) { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hairline-2); }
:is(.wz-party-row, .os-wz-party-row):first-child { border-top: 0; }
:is(.wz-party-row, .os-wz-party-row) :is(.nm, .os-nm) { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
:is(.wz-party-row, .os-wz-party-row) :is(.sub, .os-sub) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
:is(.wz-party-row, .os-wz-party-row) :is(.sub, .os-sub) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.wz-addguest, .os-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; }
:is(.wz-addguest, .os-wz-addguest):hover { background: var(--accent-softer); }
:is(.wz-addpanel, .os-wz-addpanel) { margin-top: 18px; padding: 16px; background: var(--gray-50); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
:is(.wz-addpanel, .os-wz-addpanel) :is(.wz-party-lbl, .os-wz-party-lbl) { margin-bottom: 10px; }
:is(.wz-addpanel, .os-wz-addpanel) :is(.wz-changelink, .os-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. */
:is(.wz-addpanel, .os-wz-addpanel).is-bare { padding: 0; background: transparent; border: 0; }
:is(.wz-addpanel, .os-wz-addpanel).is-bare :is(.wz-reg-panel, .os-wz-reg-panel) { margin-top: 0; }
/* The two party actions share one style: matching solid-stroke buttons. */
:is(.wz-party-actions, .os-wz-party-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
:is(.wz-party-actions, .os-wz-party-actions) :is(.wz-addguest, .os-wz-addguest), :is(.wz-party-actions, .os-wz-party-actions) :is(.wz-reg-link, .os-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; }
:is(.wz-party-actions, .os-wz-party-actions) :is(.wz-addguest, .os-wz-addguest):hover, :is(.wz-party-actions, .os-wz-party-actions) :is(.wz-reg-link, .os-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. */
:is(.wz-reg-link, .os-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; }
:is(.wz-reg-link, .os-wz-reg-link):hover { background: var(--accent-softer); color: var(--accent); }
/* (B) No-match empty state inside the results ledger */
:is(.wz-reg-empty, .os-wz-reg-empty) { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 28px 24px; }
:is(.wz-reg-empty-msg, .os-wz-reg-empty-msg) { font-size: var(--text-sm); color: var(--muted); }
:is(.wz-reg-empty-msg, .os-wz-reg-empty-msg) :is(.q, .os-q) { font-weight: 600; color: var(--ink); }
/* Secondary button — outline only, NO fill (register is a fallback here). */
:is(.wz-reg-empty-cta, .os-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; }
:is(.wz-reg-empty-cta, .os-wz-reg-empty-cta):hover { border-color: var(--accent); color: var(--accent-strong); }
/* Shared inline panel */
:is(.wz-reg-panel, .os-wz-reg-panel) { margin-top: 16px; padding: 18px; background: var(--gray-50);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
:is(.wz-reg-panel, .os-wz-reg-panel) :is(.wz-party-lbl, .os-wz-party-lbl) { margin-bottom: 14px; }
:is(.wz-reg-grid, .os-wz-reg-grid) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
:is(.wz-reg-field, .os-wz-reg-field) { display: flex; flex-direction: column; }
:is(.wz-reg-actions, .os-wz-reg-actions) { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
:is(.wz-reg-cancel, .os-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; }
:is(.wz-reg-cancel, .os-wz-reg-cancel):hover { background: var(--gray-50); }
:is(.wz-reg-submit, .os-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; }
:is(.wz-reg-submit, .os-wz-reg-submit):hover { background: var(--accent-strong); }
:is(.wz-reg-errors, .os-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); }
:is(.wz-reg-errors, .os-wz-reg-errors) > div + div { margin-top: 4px; }
@media (max-width: 540px) { :is(.wz-reg-grid, .os-wz-reg-grid) { grid-template-columns: 1fr; } }
/* Review summary — on-system entity header + dividerless KPI row */
:is(.wz-rev-summary, .os-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; }
:is(.wz-rev-party, .os-wz-rev-party) { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
:is(.wz-rev-party, .os-wz-rev-party) :is(.who, .os-who) { min-width: 0; flex: 1; }
:is(.wz-rev-party, .os-wz-rev-party) :is(.nm, .os-nm) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); }
:is(.wz-rev-party, .os-wz-rev-party) :is(.sub, .os-sub) { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.wz-rev-party, .os-wz-rev-party) :is(.sub, .os-sub) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.wz-rev-stats, .os-wz-rev-stats) { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
:is(.wz-rev-stats, .os-wz-rev-stats) :is(.cell, .os-cell) { padding: 14px 22px; }
:is(.wz-rev-stats, .os-wz-rev-stats) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:is(.wz-rev-stats, .os-wz-rev-stats) :is(.v, .os-v) { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
:is(.wz-rev-stats, .os-wz-rev-stats) :is(.v, .os-v):is(.accent, .os-accent) { color: var(--accent); }
/* ════════════════════════════════════════════════════════════
   ALT — Dives "Table" pattern (flat editable ledger)
   ════════════════════════════════════════════════════════════ */
:is(.wz-tbl, .os-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; }
:is(.wz-tbl-head, .os-wz-tbl-head), :is(.wz-trow, .os-wz-trow) { display: grid; grid-template-columns: 168px 132px minmax(0,1fr) 96px 104px 96px 40px; gap: 14px; align-items: center; }
:is(.wz-tbl-head, .os-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); }
:is(.wz-tbl-head, .os-wz-tbl-head) :is(.r, .os-r), :is(.wz-trow, .os-wz-trow) :is(.amt, .os-amt) { text-align: right; }
:is(.wz-trow, .os-wz-trow) { padding: 9px 20px; border-top: 1px solid var(--hairline-2); }
:is(.wz-trow, .os-wz-trow):first-of-type { border-top: 0; }
:is(.wz-trow, .os-wz-trow) :is(.amt, .os-amt) { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.wz-trow, .os-wz-trow) :is(.diver-cell, .os-diver-cell) { display: flex; align-items: center; gap: 9px; min-width: 0; }
:is(.wz-trow, .os-wz-trow) :is(.diver-cell, .os-diver-cell) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.wz-trow, .os-wz-trow):is(.rowspan-start, .os-rowspan-start) { border-top: 1px solid var(--hairline); }
:is(.wz-tbl-foot, .os-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); }
:is(.wz-tbl-addrow, .os-wz-tbl-addrow) { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--hairline-2); }
:is(.wz-tbl-total, .os-wz-tbl-total) { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--accent); }
/* ════════════════════════════════════════════════════════════
   ALT — Review "Invoice" document pattern
   ════════════════════════════════════════════════════════════ */
:is(.wz-inv, .os-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; }
:is(.wz-inv-head, .os-wz-inv-head) { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px; border-bottom: 1px solid var(--hairline); }
:is(.wz-inv-head, .os-wz-inv-head) :is(.brand, .os-brand) { display: flex; align-items: center; gap: 11px; }
:is(.wz-inv-head, .os-wz-inv-head) :is(.brand, .os-brand) :is(.pname, .os-pname) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink); letter-spacing: -0.01em; }
:is(.wz-inv-head, .os-wz-inv-head) :is(.brand, .os-brand) :is(.tname, .os-tname) { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
:is(.wz-inv-head, .os-wz-inv-head) :is(.meta, .os-meta) { text-align: right; }
:is(.wz-inv-head, .os-wz-inv-head) :is(.meta, .os-meta) :is(.doc, .os-doc) { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
:is(.wz-inv-head, .os-wz-inv-head) :is(.meta, .os-meta) :is(.ref, .os-ref) { font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink); margin-top: 5px; }
:is(.wz-inv-head, .os-wz-inv-head) :is(.meta, .os-meta) :is(.dt, .os-dt) { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
:is(.wz-inv-party, .os-wz-inv-party) { display: grid; grid-template-columns: 1fr 1fr; }
:is(.wz-inv-party, .os-wz-inv-party) :is(.cell, .os-cell) { padding: 18px 30px; border-right: 1px solid var(--hairline-2); }
:is(.wz-inv-party, .os-wz-inv-party) :is(.cell, .os-cell):last-child { border-right: 0; }
:is(.wz-inv-party, .os-wz-inv-party) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:is(.wz-inv-party, .os-wz-inv-party) :is(.v, .os-v) { font-size: var(--text-sm); color: var(--ink); margin-top: 7px; font-weight: 500; }
:is(.wz-inv-party, .os-wz-inv-party) :is(.s, .os-s) { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
:is(.wz-inv-tbl-head, .os-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); }
:is(.wz-inv-tbl-head, .os-wz-inv-tbl-head) :is(.c, .os-c) { text-align: center; }
:is(.wz-inv-tbl-head, .os-wz-inv-tbl-head) :is(.r, .os-r) { text-align: right; }
:is(.wz-inv-grp, .os-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); }
:is(.wz-inv-grp, .os-wz-inv-grp):is(.warm, .os-warm) { color: var(--briefing); }
:is(.wz-inv-li, .os-wz-inv-li) { display: grid; grid-template-columns: minmax(0,1fr) 120px 56px 100px; gap: 16px; align-items: center; padding: 9px 30px; }
:is(.wz-inv-li, .os-wz-inv-li) :is(.nm, .os-nm) { font-size: var(--text-sm); color: var(--ink); }
:is(.wz-inv-li, .os-wz-inv-li) :is(.dt, .os-dt) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
:is(.wz-inv-li, .os-wz-inv-li) :is(.qty, .os-qty) { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--gray-700); }
:is(.wz-inv-li, .os-wz-inv-li) :is(.amt, .os-amt) { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.wz-inv-totals, .os-wz-inv-totals) { display: flex; justify-content: flex-end; padding: 18px 30px 26px; border-top: 1px solid var(--hairline); margin-top: 8px; }
:is(.wz-inv-totals, .os-wz-inv-totals) :is(.box, .os-box) { width: 300px; }
:is(.wz-inv-totals, .os-wz-inv-totals) :is(.line, .os-line) { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); color: var(--muted); }
:is(.wz-inv-totals, .os-wz-inv-totals) :is(.line, .os-line) :is(.v, .os-v) { font-family: var(--font-mono); color: var(--ink); }
:is(.wz-inv-totals, .os-wz-inv-totals) :is(.grand, .os-grand) { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; margin-top: 6px; border-top: 1px solid var(--hairline); }
:is(.wz-inv-totals, .os-wz-inv-totals) :is(.grand, .os-grand) :is(.k, .os-k) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.wz-inv-totals, .os-wz-inv-totals) :is(.grand, .os-grand) :is(.v, .os-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)
   ════════════════════════════════════════════════════════════ */
:is(.wz-bal-grid, .os-wz-bal-grid) { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 24px; align-items: start; }
@media (max-width: 1020px) { :is(.wz-bal-grid, .os-wz-bal-grid) { grid-template-columns: 1fr; } }
:is(.wz-bal, .os-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; }
:is(.wz-bal, .os-wz-bal) :is(.eyebrow, .os-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); }
:is(.wz-bal-amt, .os-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; }
:is(.wz-bal-amt, .os-wz-bal-amt) :is(.cents, .os-cents) { color: var(--muted-2); }
:is(.wz-bal-sub, .os-wz-bal-sub) { font-size: var(--text-xs); color: var(--muted); }
:is(.wz-bal-bar, .os-wz-bal-bar) { height: 6px; border-radius: 6px; background: var(--hairline); overflow: hidden; margin: 18px 0 12px; }
:is(.wz-bal-bar, .os-wz-bal-bar) > span { display: block; height: 100%; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
:is(.wz-bal-foot, .os-wz-bal-foot) { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); }
:is(.wz-bal-foot, .os-wz-bal-foot) :is(.paid, .os-paid) { color: var(--accent); font-weight: 500; }
:is(.wz-bal-foot, .os-wz-bal-foot) :is(.total, .os-total) { color: var(--muted); }
:is(.wz-bal-state, .os-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); }
:is(.wz-bal-state, .os-wz-bal-state) :is(.tick, .os-tick) { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
:is(.wz-bal-state, .os-wz-bal-state):is(.ok, .os-ok) :is(.tick, .os-tick) { background: var(--confirmed-bg); color: var(--confirmed); }
:is(.wz-bal-state, .os-wz-bal-state):is(.no, .os-no) :is(.tick, .os-tick) { background: var(--briefing-bg); color: var(--briefing); }
/* ════════════════════════════════════════════════════════════
   Order-summary visualization options (exploration canvas)
   ════════════════════════════════════════════════════════════ */
:is(.wz-sum-card, .os-wz-sum-card):is(.summary, .os-summary) :is(.so-meta, .os-so-meta) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate-500); white-space: nowrap; }
/* A · roll-up */
:is(.so-rollrow, .os-so-rollrow) { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--slate-200); }
:is(.so-rollrow, .os-so-rollrow):first-child { border-top: 0; }
:is(.so-rollrow, .os-so-rollrow) :is(.so-ico, .os-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; }
:is(.so-rollrow, .os-so-rollrow) :is(.who, .os-who) { flex: 1; min-width: 0; }
:is(.so-rollrow, .os-so-rollrow) :is(.who, .os-who) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.so-rollrow, .os-so-rollrow) :is(.who, .os-who) :is(.nm, .os-nm):is(.unset, .os-unset) { color: var(--muted-2); }
:is(.so-rollrow, .os-so-rollrow) :is(.who, .os-who) :is(.sub, .os-sub) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
:is(.so-rollrow, .os-so-rollrow) :is(.amt, .os-amt) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
/* A2 · roll-up header + nested itemized lines */
:is(.so-grp, .os-so-grp) { border-top: 1px solid var(--slate-200); }
:is(.so-grp, .os-so-grp):first-child { border-top: 0; }
:is(.so-grp, .os-so-grp) :is(.so-rollrow, .os-so-rollrow) { border-top: 0; padding: 12px 0 6px; }
:is(.so-items, .os-so-items) { display: flex; flex-direction: column; gap: 4px; padding: 0 0 13px 44px; }
:is(.so-item, .os-so-item) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--text-xs); }
:is(.so-item, .os-so-item) :is(.nm, .os-nm) { color: var(--gray-700); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.so-item, .os-so-item) :is(.dt, .os-dt) { color: var(--slate-400); font-family: var(--font-mono); }
:is(.so-item, .os-so-item) :is(.amt, .os-amt) { font-family: var(--font-mono); color: var(--slate-500); flex-shrink: 0; }
/* B · category */
:is(.so-catrow, .os-so-catrow) { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--slate-200); }
:is(.so-catrow, .os-so-catrow):first-child { border-top: 0; }
:is(.so-catico, .os-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; }
:is(.so-catrow, .os-so-catrow) :is(.who, .os-who) { flex: 1; }
:is(.so-catrow, .os-so-catrow) :is(.who, .os-who) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.so-catrow, .os-so-catrow) :is(.who, .os-who) :is(.sub, .os-sub) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
:is(.so-catrow, .os-so-catrow) :is(.amt, .os-amt) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
/* C · share */
:is(.so-bigtotal, .os-so-bigtotal) { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
:is(.so-bigsub, .os-so-bigsub) { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
:is(.so-bar, .os-so-bar) { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; margin: 16px 0 16px; background: var(--gray-100); gap: 2px; }
:is(.so-bar, .os-so-bar) > span { display: block; height: 100%; min-width: 3px; }
:is(.so-bar, .os-so-bar) > span:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
:is(.so-bar, .os-so-bar) > span:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
:is(.so-legend, .os-so-legend) { display: flex; flex-direction: column; gap: 2px; }
:is(.so-leg, .os-so-leg) { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--slate-200); }
:is(.so-leg, .os-so-leg):first-child { border-top: 0; }
:is(.so-leg, .os-so-leg) :is(.dot, .os-dot) { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
:is(.so-leg, .os-so-leg) :is(.nm, .os-nm) { flex: 1; font-size: var(--text-sm); color: var(--gray-700); }
:is(.so-leg, .os-so-leg) :is(.pct, .os-pct) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); min-width: 34px; text-align: right; }
:is(.so-leg, .os-so-leg) :is(.amt, .os-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.
   ═══════════════════════════════════════════════════════════════════════ */
:is(.dn, .os-dn) { margin: 0 auto 8px; padding-top: 30px; }
:is(.dn, .os-dn):is(.receipt, .os-receipt) { max-width: 660px; }
:is(.dn, .os-dn):is(.console, .os-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 ─────────────────────────────────────── */
:is(.dn-card, .os-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; }
:is(.dn-card, .os-dn-card) + :is(.dn-card, .os-dn-card) { margin-top: 16px; }
/* Gap from the hero/actions region to the cards block (was an inline 24px). */
:is(.dn-cards, .os-dn-cards) { margin-top: 24px; }
:is(.dn-card-head, .os-dn-card-head) { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; }
:is(.dn-card-head, .os-dn-card-head) :is(.lbl, .os-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); }
:is(.dn-card-head, .os-dn-card-head) :is(.lbl, .os-lbl) :is(.ico, .os-ico) { color: var(--muted-2); display: flex; }
:is(.dn-card-head, .os-dn-card-head) :is(.aside, .os-aside) { font-size: var(--text-xs); color: var(--muted); }
:is(.dn-card-head, .os-dn-card-head) :is(.aside, .os-aside):is(.mono, .os-mono) { font-family: var(--font-mono); color: var(--muted-2); letter-spacing: -0.01em; }
/* ── hero ──────────────────────────────────────────────────── */
:is(.dn-hero, .os-dn-hero) { text-align: center; padding: 6px 0 24px; }
:is(.dn-ring, .os-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; }
:is(.dn-hero, .os-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; }
:is(.dn-hero, .os-dn-hero) :is(.sub, .os-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); }
:is(.dn-hero, .os-dn-hero) :is(.sub, .os-sub) :is(.ref, .os-ref) { font-family: var(--font-mono); font-weight: 600; color: var(--gray-700); letter-spacing: -0.01em; white-space: nowrap; }
:is(.dn-hero, .os-dn-hero) :is(.sub, .os-sub) :is(.amt, .os-amt) { font-family: var(--font-mono); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
:is(.dn-hero, .os-dn-hero) :is(.sub, .os-sub) :is(.sep, .os-sep) { color: var(--hairline-strong, var(--muted-2)); }
:is(.dn-hero, .os-dn-hero) :is(.email, .os-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) {
  :is(.dn-ring, .os-dn-ring) { animation: dn-pop 0.42s cubic-bezier(0.32,0.72,0,1) both; }
}
/* console hero — left-aligned bar with inline actions */
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) { display: flex; align-items: center; gap: 16px; text-align: left; padding: 0 0 4px; }
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) :is(.dn-ring, .os-dn-ring) { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) h2 { font-size: var(--text-xl); }
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) :is(.htxt, .os-htxt) { min-width: 0; }
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) :is(.sub, .os-sub) { justify-content: flex-start; margin-top: 5px; }
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) :is(.email, .os-email) { justify-content: flex-start; }
:is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) :is(.htxt-grow, .os-htxt-grow) { flex: 1; }
/* ── action cluster ────────────────────────────────────────── */
:is(.dn-actions, .os-dn-actions) { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 4px; }
:is(.dn-actions, .os-dn-actions):is(.console, .os-console) { justify-content: flex-end; margin: 0; flex-wrap: nowrap; }
/* ── record summary card ───────────────────────────────────── */
:is(.dn-rec, .os-dn-rec) { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
:is(.dn-rec, .os-dn-rec) :is(.cell, .os-cell) { padding: 14px 20px; border-left: 1px solid var(--hairline-2); min-width: 0; }
:is(.dn-rec, .os-dn-rec) :is(.cell, .os-cell):first-child { border-left: 0; }
:is(.dn-rec, .os-dn-rec) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:is(.dn-rec, .os-dn-rec) :is(.v, .os-v) { margin-top: 7px; font-size: var(--text-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.dn-rec, .os-dn-rec) :is(.v, .os-v):is(.mono, .os-mono) { font-family: var(--font-mono); letter-spacing: -0.01em; }
:is(.dn-rec, .os-dn-rec) :is(.v, .os-v):is(.accent, .os-accent) { color: var(--accent); }
:is(.dn-rec-status, .os-dn-rec-status) { display: flex; align-items: center; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--hairline-2);
  background: var(--slate-100); }
:is(.dn-rec-status, .os-dn-rec-status) :is(.spacer, .os-spacer) { flex: 1; }
:is(.dn-rec-status, .os-dn-rec-status) :is(.agent, .os-agent) { font-size: var(--text-xs); color: var(--muted); }
:is(.dn-rec-status, .os-dn-rec-status) :is(.agent, .os-agent) b { color: var(--accent); font-weight: 500; }
/* financial pill */
:is(.dn-fpill, .os-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; }
:is(.dn-fpill, .os-dn-fpill):is(.ok, .os-ok) { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
:is(.dn-fpill, .os-dn-fpill):is(.due, .os-due) { color: var(--briefing); background: var(--briefing-bg); border-color: var(--briefing-border); }
/* ── invoice expander ──────────────────────────────────────── */
:is(.dn-inv-bar, .os-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; }
:is(.dn-inv-bar, .os-dn-inv-bar):hover { background: var(--surface); }
:is(.dn-inv-bar, .os-dn-inv-bar) :is(.k, .os-k) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:is(.dn-inv-bar, .os-dn-inv-bar) :is(.id, .os-id) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
:is(.dn-inv-bar, .os-dn-inv-bar) :is(.grow, .os-grow) { flex: 1; }
:is(.dn-inv-bar, .os-dn-inv-bar) :is(.tot, .os-tot) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.dn-inv-bar, .os-dn-inv-bar) :is(.chev, .os-chev) { color: var(--muted-2); display: flex; transition: transform 200ms cubic-bezier(0.32,0.72,0,1); }
:is(.dn-inv-bar, .os-dn-inv-bar)[aria-expanded="true"] :is(.chev, .os-chev) { transform: rotate(180deg); }
:is(.dn-inv-body, .os-dn-inv-body) { padding: 4px 20px 18px; border-top: 1px solid var(--hairline-2); }
:is(.dn-inv-group, .os-dn-inv-group) { margin-top: 14px; }
:is(.dn-inv-date, .os-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; }
:is(.dn-inv-li, .os-dn-inv-li) { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; }
:is(.dn-inv-li, .os-dn-inv-li) :is(.ico, .os-ico) { color: var(--muted-2); display: flex; align-self: center; }
:is(.dn-inv-li, .os-dn-inv-li) :is(.nm, .os-nm) { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--ink); }
:is(.dn-inv-li, .os-dn-inv-li) :is(.nm, .os-nm) :is(.q, .os-q) { display: block; font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); margin-top: 1px; }
:is(.dn-inv-li, .os-dn-inv-li) :is(.amt, .os-amt) { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.dn-inv-sums, .os-dn-inv-sums) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
:is(.dn-sum-row, .os-dn-sum-row) { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0; font-size: var(--text-sm); }
:is(.dn-sum-row, .os-dn-sum-row) :is(.l, .os-l) { color: var(--muted); }
:is(.dn-sum-row, .os-dn-sum-row) :is(.r, .os-r) { font-family: var(--font-mono); color: var(--gray-700); }
:is(.dn-sum-row, .os-dn-sum-row):is(.total, .os-total) { padding-top: 9px; margin-top: 5px; border-top: 1px solid var(--hairline-2); }
:is(.dn-sum-row, .os-dn-sum-row):is(.total, .os-total) :is(.l, .os-l) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); text-transform: none; letter-spacing: 0; }
:is(.dn-sum-row, .os-dn-sum-row):is(.total, .os-total) :is(.r, .os-r) { font-size: var(--text-md); font-weight: 600; color: var(--confirmed); }
:is(.dn-pay, .os-dn-pay) { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
:is(.dn-pay, .os-dn-pay) :is(.hd, .os-hd) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
:is(.dn-pay-row, .os-dn-pay-row) { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; font-size: var(--text-sm); }
:is(.dn-pay-row, .os-dn-pay-row) :is(.l, .os-l) { display: flex; align-items: center; gap: 9px; color: var(--ink); }
:is(.dn-pay-row, .os-dn-pay-row) :is(.l, .os-l) :is(.ico, .os-ico) { color: var(--muted-2); display: flex; }
:is(.dn-pay-row, .os-dn-pay-row) :is(.meta, .os-meta) { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }
:is(.dn-pay-row, .os-dn-pay-row) :is(.r, .os-r) { font-family: var(--font-mono); color: var(--ink); }
/* ── waiver links ──────────────────────────────────────────── */
:is(.dn-wv-rows, .os-dn-wv-rows) { border-top: 1px solid var(--hairline); }
:is(.dn-wv-row, .os-dn-wv-row) { padding: 13px 20px; border-top: 1px solid var(--hairline-2); }
:is(.dn-wv-row, .os-dn-wv-row):first-child { border-top: 0; }
:is(.dn-wv-top, .os-dn-wv-top) { display: flex; align-items: center; gap: 12px; }
:is(.dn-wv-av, .os-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; }
:is(.dn-wv-id, .os-dn-wv-id) { flex: 1; min-width: 0; }
:is(.dn-wv-id, .os-dn-wv-id) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.dn-wv-id, .os-dn-wv-id) :is(.toggle, .os-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); }
:is(.dn-wv-id, .os-dn-wv-id) :is(.toggle, .os-toggle) :is(.chev, .os-chev) { display: flex; transition: transform 200ms cubic-bezier(0.32,0.72,0,1); }
:is(.dn-wv-id, .os-dn-wv-id) :is(.toggle, .os-toggle)[aria-expanded="true"] :is(.chev, .os-chev) { transform: rotate(180deg); }
:is(.dn-wv-status, .os-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); }
:is(.dn-wv-status, .os-dn-wv-status):is(.signed, .os-signed) { color: var(--confirmed); background: var(--confirmed-bg); border-color: var(--confirmed-border); }
:is(.dn-copy, .os-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; }
:is(.dn-copy, .os-dn-copy):hover { background: var(--surface-alt); color: var(--ink); }
:is(.dn-copy, .os-dn-copy):is(.copied, .os-copied) { color: var(--confirmed); border-color: var(--confirmed-border); background: var(--confirmed-bg); }
:is(.dn-wv-expand, .os-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); }
:is(.dn-wv-expand, .os-dn-wv-expand) :is(.qr, .os-qr) { flex-shrink: 0; width: 108px; height: 108px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 8px; }
:is(.dn-wv-expand, .os-dn-wv-expand) :is(.qr, .os-qr) svg { display: block; width: 100%; height: 100%; }
:is(.dn-wv-expand, .os-dn-wv-expand) :is(.urlbox, .os-urlbox) { flex: 1; min-width: 0; }
:is(.dn-wv-expand, .os-dn-wv-expand) :is(.urlbox, .os-urlbox) :is(.cap, .os-cap) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:is(.dn-wv-expand, .os-dn-wv-expand) :is(.urlbox, .os-urlbox) :is(.url, .os-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; }
:is(.dn-wv-foot, .os-dn-wv-foot) { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--hairline); background: var(--surface-alt); }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.live, .os-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); }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.live, .os-live) :is(.dot, .os-dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--confirmed); }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.exp, .os-exp) { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.spacer, .os-spacer) { flex: 1; }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.lnk, .os-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; }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.lnk, .os-lnk):hover { color: var(--accent); }
:is(.dn-wv-foot, .os-dn-wv-foot) :is(.lnk, .os-lnk):is(.danger, .os-danger):hover { color: var(--cancelled); }
/* ── console grid ──────────────────────────────────────────── */
:is(.dn-grid, .os-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) { :is(.dn-grid, .os-dn-grid) { grid-template-columns: 1fr; } }
:is(.dn-col-label, .os-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 */
:is(.wz-compact, .os-wz-compact) :is(.dn-rec, .os-dn-rec) :is(.cell, .os-cell) { padding: 11px 16px; }
:is(.wz-compact, .os-wz-compact) :is(.dn-wv-row, .os-dn-wv-row) { padding: 10px 16px; }
:is(.wz-compact, .os-wz-compact) :is(.dn-card-head, .os-dn-card-head) { padding: 12px 16px; }
/* Provision-tenant outlet list (admin/tenants/new). Each row lays the outlet
   name input and its remove button on one line inside a full-width field-grid
   cell; the "Add another outlet" button sits below the list. Tokens only. */
.outlet-row__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.outlet-row__control .os-input {
  flex: 1 1 auto;
  min-width: 0;
}
.outlet-list__add {
  margin-top: var(--space-3);
}
/* Mobile pane treatment for the wizard (dv-wizm-*) — MUST load after
   wizard.css so its ≤640px overrides win the cascade. Desktop untouched. */
/* ============================================================
   wizard-mobile.css — the dv-wizm-* mobile pane treatment for the
   DiveOS wizard (app-first build; migrates to os-ds `.os-wizm-*` once
   dive-os is on os-ds ≥1.18 — see the mobile-wizard-pattern spec).

   BELOW the phone breakpoint (≤640px) the existing wizard chrome
   (.wz-flow / .wz-couple stepper / .wz-body / .wz-foot, hand-composed in
   account/bookings/_form.html.erb) is re-skinned into the approved
   full-screen PANE model: a fixed full-screen surface with an app-bar
   (back + title/subtitle), a slim segmented progress strip, an `svh`
   scroll body, and a sticky full-width action bar.

   DESKTOP IS UNTOUCHED — every rule here lives inside the @media block,
   plus the .dv-wizm-bar app-bar markup that is `display:none` above the
   breakpoint. Semantic tokens only (design-system gate); no raw palette.

   Platform constraints (os-ds docs/mobile-primitives.md):
     · `svh` not `dvh` for the shell height (vh fallback first).
     · the sticky footer must NOT rely on position:fixed under an open
       keyboard — the shell height is driven from `visualViewport.height`
       by wizard_mobile_controller.js (--wizm-vh), so the flex-pinned
       footer stays glued above the keyboard.
     · action bar pads with env(safe-area-inset-bottom) (34px notch).
   ============================================================ */
/* ── App-bar — mobile only; hidden on desktop ──────────────── */
.dv-wizm-bar { display: none; }
@media (max-width: 640px) {
  /* ── The pane surface: a fixed, full-screen, viewport-tall column.
     Height comes from --wizm-vh (set to visualViewport.height by the
     mobile controller); 100svh is the no-JS fallback. Taking over the
     full screen matches the approved full-screen-pane design and sidesteps
     the surrounding account chrome for the focused booking flow. */
  :is(.wz-flow, .os-wz-flow) {
    position: fixed;
    inset: 0;
    z-index: 60;
    height: var(--wizm-vh, 100svh);
    height: var(--wizm-vh, 100vh); /* older engines: vh fallback */
    background: var(--canvas);
  }

  /* ── App-bar: back chevron + title/subtitle. Replaces the stepper band
     as the top bar (the segmented progress sits just beneath it). ─────── */
  .dv-wizm-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    /* Always clear the status bar / notch: 16px of breathing room BELOW the
       safe-area inset, so the title never clips against the top edge when the
       wizard is a fixed full-screen surface. */
    padding: calc(env(safe-area-inset-top) + 16px) 10px 12px;
    background: var(--surface);
  }
  .dv-wizm-bar__back {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .dv-wizm-bar__back:active { background: var(--surface-alt); }
  .dv-wizm-bar__back[hidden] { display: none; }
  .dv-wizm-bar__ttl {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .dv-wizm-bar__ttl .t {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dv-wizm-bar__ttl .s {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Escape hatch back to the app — right-aligned in the app-bar. */
  .dv-wizm-bar__cancel {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    padding: 8px 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
  }
  .dv-wizm-bar__cancel:active { color: var(--ink); }

  /* ── Segmented progress: reuse the .wz-bars stepper, slimmed to a bare
     progress strip — hide the per-step labels + check pips, keep the bars.
     Sits directly under the app-bar (no card, no top margin). ─────────── */
  :is(.wz-flow, .os-wz-flow) > :is(.wz-couple, .os-wz-couple) {
    margin-top: 0;
    padding: 0 16px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
  }
  :is(.wz-flow, .os-wz-flow) > :is(.wz-couple, .os-wz-couple).is-scrolled { margin-top: 0; }
  :is(.wz-couple, .os-wz-couple):is(.wz-couple-card, .os-wz-couple-card) { padding-top: 0; padding-bottom: 12px; }
  :is(.wz-bars, .os-wz-bars) { max-width: none; }
  :is(.wz-bars-inner, .os-wz-bars-inner) { max-width: none; gap: 6px; }
  /* Tappable to jump between REACHED steps (goToStep gates the terminal Done
     step itself). Vertical padding gives the thin bar a real touch target. */
  :is(.wz-seg, .os-wz-seg) { gap: 0; pointer-events: auto; padding: 7px 0; cursor: pointer; }
  /* Bars only — drop the label row on the compact strip. */
  :is(.wz-seg, .os-wz-seg) :is(.lbrow, .os-lbrow) { display: none; }
  :is(.wz-seg, .os-wz-seg):is(.on, .os-on) :is(.bar, .os-bar) { height: 5px; box-shadow: none; }

  /* ── Body: the svh scroll region. It already flex:1's inside .wz-flow;
     just strip the desktop reading-width inset so panes go edge-to-edge. */
  :is(.wz-body, .os-wz-body) { background: var(--canvas); scrollbar-gutter: auto; }
  :is(.wz-inner, .os-wz-inner) { max-width: none; padding: 16px; }
  :is(.wz-inner, .os-wz-inner):is(.narrow, .os-narrow) { max-width: none; }
  /* The Done receipt renders straight into the step (no .wz-inner), so it needs
     its own mobile inset — otherwise its cards sit flush against the edges. */
  :is(.wz-body, .os-wz-body) :is(.dn, .os-dn) { max-width: none; margin: 0; padding: 16px 16px 8px; }

  /* ── Done step success section — mobile redesign ──────────────────
     Hero: ring aligned to the title (not floating mid-block), larger confirm.
     Actions: the repeat action (Start new sale) is a full-width primary on
     top; Print receipt + View booking split the row beneath it — no orphaned,
     centre-wrapped button. */
  :is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) { align-items: flex-start; gap: 14px; padding-bottom: 2px; }
  :is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) h2 { font-size: var(--text-2xl); }
  :is(.dn-hero, .os-dn-hero):is(.bar, .os-bar) :is(.dn-ring, .os-dn-ring) { margin-top: 2px; }

  :is(.dn-actions, .os-dn-actions) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0 4px;
  }
  :is(.dn-actions, .os-dn-actions) :is(.os-btn, .dv-btn) { justify-content: center; height: 46px; margin: 0; }
  :is(.dn-actions, .os-dn-actions) :is(.os-btn--primary, .dv-btn--primary) { order: -1; grid-column: 1 / -1; }
  /* Wrap hero + actions in a card so the top section matches the record/waiver
     cards below it instead of floating on the canvas. (Desktop: plain wrapper.) */
  :is(.dn-top, .os-dn-top) {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 16px;
  }
  :is(.dn-top, .os-dn-top) :is(.dn-actions, .os-dn-actions) { margin-bottom: 0; }
  /* Even 16px gaps between all three cards (matches .dn-card + .dn-card and the
     .dn top inset), so the confirmation card isn't spaced differently. */
  :is(.dn-cards, .os-dn-cards) { margin-top: 16px; }

  /* ── Sticky action bar: full-width primary button per the mockup.
     The footer is a flex sibling pinned at the bottom of the --wizm-vh
     column (NOT position:fixed), so an open keyboard can't shove it off —
     see the controller's visualViewport listener. ─────────────────────── */
  :is(.wz-foot, .os-wz-foot) {
    position: static;
    flex: 0 0 auto;
    box-shadow: 0 -4px 16px -8px rgba(2, 6, 23, 0.12);
  }
  :is(.wz-foot-inner, .os-wz-foot-inner) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  }
  /* One row: a compact "Back" on the left (only where a Back exists — not Guest),
     the primary "Next" filling the rest with its folded total. Discard leaves
     the footer entirely — the app-bar Cancel is the exit. */
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.center, .os-center) { display: none; }
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.start, .os-start) { display: none; }
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.start, .os-start):has(:is(.os-btn--secondary, .dv-btn--secondary)) {
    display: flex; order: -1; flex: 0 0 auto; align-items: center;
  }
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.start, .os-start) :is(.btn-destructive, .os-btn-destructive),
  :is(.wz-foot, .os-wz-foot) :is(.wz-foot-sep, .os-wz-foot-sep) { display: none; }
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.start, .os-start) :is(.os-btn--secondary, .dv-btn--secondary) {
    background: transparent; border-color: transparent; box-shadow: none;
    color: var(--muted); height: auto; padding: 6px 12px; font-size: var(--text-sm); font-weight: 600;
  }
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.end, .os-end) {
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
  }
  :is(.wz-foot, .os-wz-foot) :is(.grp, .os-grp):is(.end, .os-end) :is(.os-btn, .dv-btn) {
    width: 100%;
    justify-content: center;
    height: 50px;
    font-size: var(--text-md);
  }
  /* Folded footer keeps the label left + total pushed right inside the button. */
  :is(.wz-foot, .os-wz-foot).dv-wizm-foot--folded :is(.grp, .os-grp):is(.end, .os-end) :is(.os-btn--primary, .dv-btn--primary) {
    justify-content: flex-start;
  }

  /* Date sub-header row inside a diver card — the date on the left, a per-date
     "Add dive" on the right (opens packages for that date, skipping the picker).
     Same-day dives group under one date row instead of repeating the date. */
  :is(.dv-wizm-daterow, .os-dv-wizm-daterow) {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 14px; border-top: 1px solid var(--hairline-2);
  }
  :is(.dv-wizm-ghead, .os-dv-wizm-ghead) + :is(.dv-wizm-daterow, .os-dv-wizm-daterow) { border-top: 0; }
  :is(.dv-wizm-daterow, .os-dv-wizm-daterow) .d {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted-2);
  }
  :is(.dv-wizm-adddive-btn, .os-dv-wizm-adddive-btn) {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; margin: -4px -6px -4px 0;
    font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--accent);
    background: none; border: 0; cursor: pointer;
  }
  /* Items under a date row are tighter (no per-row date now). */
  :is(.dv-wizm-daterow, .os-dv-wizm-daterow) + :is(.dv-wizm-li, .os-dv-wizm-li) { border-top: 0; }
}
/* The four dv-wizm-* add-dive sub-patterns (date / pick-list / option-group /
   group-summary). Inert on desktop (classes only render in the mobile flow). */
/* ============================================================
   wizard-mobile-panes.css — the four dv-wizm-* sub-patterns that the
   mobile add-dive pane flow slots into (date → package → configure →
   summary). Ported 1:1 from the approved mockup
   (docs/superpowers/specs/assets/mobile-add-dive-panes.html) into
   semantic tokens (design-system gate: no raw palette / hex).

   These are the reusable primitives; they migrate to os-ds `.os-*`
   (_date_pane / _pick_list / _option_group / _group_summary_list) when
   dive-os is on os-ds ≥1.18. The classes only ever appear inside the
   mobile pane flow, so they carry no media query — they're inert markup
   on desktop (never rendered there).

   Verify in isolation at /admin/design_system (mobile viewport) before
   the live add-dive flow adopts them.
   ============================================================ */
/* ── Pane scaffold: a full-screen pane pushed over the wizard body ──
   The add-dive sub-flow pushes these panes; each has its own scroll body
   and (where needed) a self-contained sticky foot. These classes are NOT
   media-scoped, so they render identically at any width — which lets the
   showcase preview the mobile look on a desktop screen. */
.dv-wizm-pane { display: flex; flex-direction: column; min-height: 0; background: var(--canvas); }
.dv-wizm-pane__body { flex: 1; min-height: 0; overflow-y: auto; }
/* self-contained action bar (mockup's full-width primary button) — used by the
   add-dive panes; distinct from the shell's media-scoped .wz-foot restyle. */
.dv-wizm-foot { flex: 0 0 auto; background: var(--surface); border-top: 1px solid var(--hairline);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px -8px rgba(2, 6, 23, 0.12); }
.dv-wizm-foot__meta { display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-xs); color: var(--muted); margin-bottom: 8px; }
.dv-wizm-foot .os-btn { width: 100%; height: 50px; }
.dv-wizm-foot .os-btn--primary { justify-content: space-between; }
/* Keep each label/value cluster (e.g. "Fri, Jul 31 ›") on one line — the inline
   chevron SVG otherwise wraps below the date when the button is tight. */
.dv-wizm-foot .os-btn > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
/* Showcase-only: the app-bar is display:none off-mobile (shell file); the
   /admin/design_system phone frames force it visible so the panes read as
   whole screens regardless of the viewer's window width. */
.dv-wizm-demo .dv-wizm-bar { display: flex; }
.dv-wizm-pane__eyebrow { padding: 16px 16px 0;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted-2); }
.dv-wizm-pane__h { padding: 4px 16px 12px;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); }
/* ══════════════════════════════════════════════════════════════
   1 · _date_pane — date-only picker (quick chips + month calendar)
   ══════════════════════════════════════════════════════════════ */
.dv-wizm-date__chips { display: flex; gap: 8px; padding: 0 16px 14px; }
.dv-wizm-date__chip { flex: 1; height: 52px; border-radius: var(--radius);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: inherit; cursor: pointer; color: var(--ink); }
.dv-wizm-date__chip b { font-size: var(--text-sm); font-weight: 600; }
.dv-wizm-date__chip span { font-size: var(--text-xs); color: var(--muted); }
.dv-wizm-date__chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dv-wizm-date__chip.is-on span { color: var(--accent); }
.dv-wizm-cal { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); margin: 0 16px; padding: 14px; box-shadow: var(--shadow-sm); }
.dv-wizm-cal__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dv-wizm-cal__hd b { font-size: var(--text-sm); font-weight: 600; }
.dv-wizm-cal__nav { display: flex; gap: 6px; }
.dv-wizm-cal__nav button { width: 30px; height: 30px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--surface); display: grid; place-items: center;
  color: var(--muted); cursor: pointer; }
.dv-wizm-cal__dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.dv-wizm-cal__dow span { text-align: center; font-size: var(--text-2xs); font-weight: 600;
  color: var(--muted-2); text-transform: uppercase; }
.dv-wizm-cal__days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.dv-wizm-cal__day { aspect-ratio: 1; display: grid; place-items: center; font-size: var(--text-sm);
  border-radius: var(--radius); color: var(--ink); font-variant-numeric: tabular-nums;
  border: 0; background: none; font: inherit; cursor: pointer; }
.dv-wizm-cal__day.is-mut { color: var(--hairline-strong); pointer-events: none; }
.dv-wizm-cal__day.is-today { border: 1.5px solid var(--accent-border); }
.dv-wizm-cal__day.is-sel { background: var(--accent); color: var(--surface); font-weight: 600; }
/* ══════════════════════════════════════════════════════════════
   2 · _pick_list — package menu (category + search + row w/ single +)
   ══════════════════════════════════════════════════════════════ */
.dv-wizm-pick__bar { display: flex; gap: 8px; padding: 12px 16px;
  background: var(--surface); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 1; }
.dv-wizm-pick__drop { flex: 1; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.dv-wizm-pick__drop .chev { margin-left: auto; color: var(--muted); display: inline-flex; }
.dv-wizm-pick__search { width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong); background: var(--surface); display: grid; place-items: center;
  color: var(--ink); cursor: pointer; }
.dv-wizm-pick__sec { padding: 14px 16px 6px; font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dv-wizm-pick-row { display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--hairline-2); align-items: flex-start; }
.dv-wizm-pick-row__info { flex: 1; min-width: 0; }
.dv-wizm-pick-row__info b { font-size: var(--text-sm); font-weight: 600; display: block; margin-bottom: 2px; color: var(--ink); }
.dv-wizm-pick-row__info p { font-size: var(--text-xs); color: var(--muted); line-height: 1.4; margin-bottom: 6px; }
.dv-wizm-pick-row__info .pr { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dv-wizm-pick-row__info .pr s { color: var(--muted-2); font-weight: 400; margin-left: 6px; font-size: var(--text-xs); }
/* the single + affordance — filled (fast-path add) / ghost (opens configure) / qty (already in cart) */
.dv-wizm-plus, .dv-wizm-plus--ghost, .dv-wizm-qtymini {
  width: 38px; height: 38px; border-radius: var(--radius-pill); flex: 0 0 auto;
  display: grid; place-items: center; font: inherit; cursor: pointer; }
.dv-wizm-plus { background: var(--accent); color: var(--surface); border: 0; box-shadow: var(--shadow-sm); }
.dv-wizm-plus--ghost { border: 1.5px solid var(--accent-border); color: var(--accent); background: var(--surface); }
.dv-wizm-qtymini { border: 1.5px solid var(--accent); color: var(--accent); background: var(--surface);
  font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
/* ══════════════════════════════════════════════════════════════
   3 · _option_group — configure (Pick-1 radios + optional checks + note + qty)
   ══════════════════════════════════════════════════════════════ */
.dv-wizm-optsec { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.dv-wizm-optsec:last-of-type { border-bottom: 0; }
.dv-wizm-optsec__hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.dv-wizm-optsec__hd b { font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.dv-wizm-badge { font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); }
.dv-wizm-badge--pick { background: var(--confirmed-bg); color: var(--confirmed); }
.dv-wizm-badge--opt { background: var(--surface-alt); color: var(--muted); }
.dv-wizm-badge--done { background: var(--accent); color: var(--surface); }
/* rows: single hairline between SECTIONS, none between rows within a section */
.dv-wizm-opt-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.dv-wizm-opt-row__info { flex: 1; }
.dv-wizm-opt-row__info b { font-size: var(--text-sm); font-weight: 500; display: block; color: var(--ink); }
.dv-wizm-opt-row .pr { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.dv-wizm-radio, .dv-wizm-check { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--hairline-strong); }
.dv-wizm-radio { border-radius: 50%; }
.dv-wizm-radio.is-on { border-color: var(--accent); background: radial-gradient(var(--accent) 42%, var(--surface) 46%); }
.dv-wizm-check { border-radius: 6px; }
.dv-wizm-check.is-on { background: var(--accent); border-color: var(--accent); display: grid; place-items: center; color: var(--surface); }
.dv-wizm-note { margin: 12px 16px; border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  min-height: 74px; padding: 11px; font: inherit; font-size: var(--text-sm); color: var(--ink); width: calc(100% - 32px); resize: vertical; }
.dv-wizm-note::-moz-placeholder { color: var(--muted-2); }
.dv-wizm-note::placeholder { color: var(--muted-2); }
.dv-wizm-qtybar { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 14px; }
.dv-wizm-qtybar button { width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong); background: var(--surface); display: grid; place-items: center;
  font-size: var(--text-xl); color: var(--accent); cursor: pointer; }
.dv-wizm-qtybar b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
/* ══════════════════════════════════════════════════════════════
   4 · _group_summary_list — order summary grouped by diver
      (avatar-led header, no intra-group separators, stronger between
      groups, price + tap-to-expand qty stacked right)
   ══════════════════════════════════════════════════════════════ */
.dv-wizm-sum__hd { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 8px; }
.dv-wizm-sum__hd .h { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.dv-wizm-sum__hd a { color: var(--accent); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
/* diver header — STRONGER hairline between people (border-top on the group) */
.dv-wizm-diver { display: flex; align-items: center; gap: 10px; padding: 18px 16px 10px; border-top: 1px solid var(--hairline); }
.dv-wizm-diver:first-of-type { padding-top: 6px; border-top: 0; }
.dv-wizm-diver__av { width: 34px; height: 34px; border-radius: var(--radius-pill); flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: 600; }
.dv-wizm-diver__who b { font-size: var(--text-sm); font-weight: 700; letter-spacing: -0.01em; display: block; color: var(--ink); }
.dv-wizm-diver__who span { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
/* item rows — NO separators within a diver group */
.dv-wizm-srow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; position: relative; }
.dv-wizm-srow__info { flex: 1; min-width: 0; }
.dv-wizm-srow__info b { font-size: var(--text-sm); font-weight: 600; display: block; color: var(--ink); }
.dv-wizm-srow__info .sub { font-size: var(--text-xs); color: var(--muted); display: block; margin-top: 1px; }
.dv-wizm-srow__info .ed { color: var(--accent); font-size: var(--text-xs); font-weight: 600; margin-top: 3px; display: inline-block; cursor: pointer; }
.dv-wizm-srow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: 0 0 auto; }
.dv-wizm-srow__right .pr { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink); }
.dv-wizm-srow.is-hl { background: var(--accent-soft); }
.dv-wizm-sqty { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1.5px solid var(--accent);
  color: var(--accent); display: grid; place-items: center; font-size: var(--text-sm); font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--surface); cursor: pointer; }
/* tap-to-expand qty popover — a compact − n + right on the row */
.dv-wizm-qtypop { position: absolute; right: 12px; top: 34px; z-index: 5;
  display: flex; align-items: center; background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-panel); overflow: hidden; }
.dv-wizm-qtypop button { width: 40px; height: 40px; border: 0; background: var(--surface);
  font-size: var(--text-lg); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.dv-wizm-qtypop b { width: 30px; text-align: center; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
/* ══════════════════════════════════════════════════════════════
   Mobile add-dive integration — desktop composer ⇄ mobile pane flow
   ══════════════════════════════════════════════════════════════ */
/* The mobile flow container is inert on desktop; the ≤640px breakpoint swaps
   the two-column composer out for it. (Matches the shell's 640px breakpoint.) */
.dv-wizm-mob { display: none; }
@media (max-width: 640px) {
  .bk2-dives-desktop { display: none; }
  .dv-wizm-mob { display: block; }
}
/* mobile order-summary chrome (renders into the dives step body) */
.dv-wizm-sum__hd a { display: inline-flex; align-items: center; gap: 4px; }
.dv-wizm-diver__add { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--accent-border);
  color: var(--accent); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.dv-wizm-mob-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; gap: 6px; }
.dv-wizm-mob-empty .ic { color: var(--muted-2); margin-bottom: 6px; }
.dv-wizm-mob-empty .t { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.dv-wizm-mob-empty .s { font-size: var(--text-sm); color: var(--muted); }
.dv-wizm-mob-emptybtn { margin-top: 14px; width: auto; padding: 0 20px; height: 44px; }
.dv-wizm-mob-tot { display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px; margin-top: 4px; border-top: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--muted); }
.dv-wizm-mob-tot .v { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: var(--text-md); }
/* full-screen add-dive overlay (Date → Package → Configure pane stack) */
.dv-wizm-ov { position: fixed; inset: 0; z-index: 80; background: var(--canvas); }
.dv-wizm-ov__pane { position: absolute; inset: 0; display: flex; flex-direction: column;
  height: 100vh; height: 100svh; background: var(--canvas); }
.dv-wizm-ov .dv-wizm-pane__body { flex: 1; min-height: 0; overflow-y: auto; }
/* per-diver multi-date sub-label inside the mobile summary */
.dv-wizm-datelbl { padding: 8px 16px 2px; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
/* per-diver "Add date" — a quiet dashed affordance under the diver's dives */
.dv-wizm-mob-adddate { padding: 6px 16px 4px; }
.dv-wizm-mob-adddate button { display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--accent);
  background: transparent; border: 1px dashed var(--accent-border); border-radius: var(--radius-pill); cursor: pointer; }
.dv-wizm-mob-adddate button:active { background: var(--accent-soft); }
/* bottom-of-summary "Add another diver" — full-width dashed action */
.dv-wizm-mob-adddiver { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 32px); margin: 14px 16px 6px; padding: 12px; font: inherit; font-size: var(--text-sm);
  font-weight: 600; color: var(--accent); background: var(--surface);
  border: 1px dashed var(--accent-border); border-radius: var(--radius); cursor: pointer; }
.dv-wizm-mob-adddiver:active { background: var(--accent-soft); }
/* "Remove this dive" — quiet destructive link inside the edit Configure pane */
.dv-wizm-mob-removedive { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 8px;
  padding: 8px 0; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--cancelled);
  background: none; border: 0; cursor: pointer; }
/* ══════════════════════════════════════════════════════════════
   Mobile Dives summary — Review-style ledger cards (per diver)
   Name-first 2-row header band, no avatar, no per-row icons, total
   folded into the footer button. Supersedes the avatar-led summary
   for the LIVE dives step (the showcase keeps _group_summary_list).
   ══════════════════════════════════════════════════════════════ */
.dv-wizm-mob .dv-wizm-sum__hd { padding: 2px 2px 12px; }
.dv-wizm-card { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin: 0 0 14px; }
/* header band — row 1: name (full) + diver total; row 2: dive count */
.dv-wizm-ghead { display: flex; flex-wrap: wrap; align-items: baseline; -moz-column-gap: 12px; column-gap: 12px; row-gap: 2px;
  padding: 11px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--hairline-2); }
.dv-wizm-ghead .nm { flex: 1 1 auto; min-width: 0; font-size: var(--text-md); font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-wizm-ghead .tot { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dv-wizm-ghead .dcount { flex: 1 0 100%; font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
/* editable name for added divers — reads as the name, dashed underline signals edit */
.dv-wizm-ghead__name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--text-md);
  font-weight: 700; letter-spacing: -0.01em; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px dashed var(--accent-border); padding: 1px 0 2px; outline: none; }
.dv-wizm-ghead__name::-moz-placeholder { color: var(--muted-2); font-weight: 500; }
.dv-wizm-ghead__name::placeholder { color: var(--muted-2); font-weight: 500; }
.dv-wizm-ghead__name:focus { border-bottom-color: var(--accent); }
/* line row — no icon column; name gets the width */
.dv-wizm-li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px;
  padding: 12px 14px; border-top: 1px solid var(--hairline-2); position: relative; }
.dv-wizm-li:first-of-type { border-top: 0; }
.dv-wizm-li.is-hl { background: var(--accent-soft); }
.dv-wizm-li .info { min-width: 0; }
.dv-wizm-li .info .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); display: block; }
.dv-wizm-li .info .dt { font-size: var(--text-xs); color: var(--muted); display: block; margin-top: 2px; }
.dv-wizm-li .info .sub { font-size: var(--text-xs); color: var(--muted); display: block; margin-top: 2px; }
.dv-wizm-li .info .ed { color: var(--accent); font-size: var(--text-xs); font-weight: 600; margin-top: 5px; display: inline-block; cursor: pointer; }
.dv-wizm-li .right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.dv-wizm-li .amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dv-wizm-card-empty { padding: 14px; font-size: var(--text-sm); color: var(--muted); }
.dv-wizm-cardfoot { padding: 10px 14px 12px; border-top: 1px solid var(--hairline-2); }
.dv-wizm-mob-adddate-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--accent); background: transparent;
  border: 1px dashed var(--accent-border); border-radius: var(--radius-pill); cursor: pointer; }
.dv-wizm-mob-adddate-btn:active { background: var(--accent-soft); }
/* Fold the running total into the dives-step footer button (one row) — only
   that footer is tagged .dv-wizm-foot--folded, so other steps stay intact. */
.dv-wizm-foot-amt { display: none; }
@media (max-width: 640px) {
  :is(.wz-foot, .os-wz-foot).dv-wizm-foot--folded :is(.total, .os-total) { display: none; }
  :is(.wz-foot, .os-wz-foot).dv-wizm-foot--folded :is(.os-btn--primary, .dv-btn--primary) { justify-content: flex-start; }
  :is(.wz-foot, .os-wz-foot).dv-wizm-foot--folded .dv-wizm-foot-amt {
    display: inline; margin-left: auto; font-family: var(--font-mono); font-weight: 600; }
}
/* ============================================================
   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.
   ============================================================ */
:is(.ds-sum, .os-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 */
:is(.ds-sum-head, .os-ds-sum-head) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px 13px; }
:is(.ds-sum-head, .os-ds-sum-head) :is(.t, .os-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; }
:is(.ds-sum-head, .os-ds-sum-head) :is(.st, .os-st) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
:is(.ds-sum-head, .os-ds-sum-head) :is(.st, .os-st):is(.ok, .os-ok) { color: var(--confirmed); }
/* icon-tile rows */
:is(.ds-sum-row, .os-ds-sum-row) { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ds-sum-line); }
:is(.ds-sum-row, .os-ds-sum-row):first-of-type { border-top: 0; }
:is(.ds-sum-row, .os-ds-sum-row) :is(.ico, .os-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. */
:is(.ds-sum-row, .os-ds-sum-row) :is(.main, .os-main) { flex: 0 0 auto; }
:is(.ds-sum-row, .os-ds-sum-row) :is(.main, .os-main) :is(.nm, .os-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; }
:is(.ds-sum-row, .os-ds-sum-row) :is(.main, .os-main) :is(.sub, .os-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. */
:is(.ds-sum-row, .os-ds-sum-row) :is(.val, .os-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) */
:is(.ds-sum-prog, .os-ds-sum-prog) { padding: 13px 20px; border-top: 1px solid var(--ds-sum-line); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.bar, .os-bar) { height: 7px; border-radius: 99px; background: rgba(100,116,139,0.20); overflow: hidden; }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.bar, .os-bar) > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.bar, .os-bar):is(.full, .os-full) > span { background: var(--confirmed); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.row, .os-row) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.row, .os-row) :is(.paid, .os-paid) { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.row, .os-row) :is(.paid, .os-paid):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.row, .os-row) :is(.total, .os-total) { color: var(--muted); }
:is(.ds-sum-prog, .os-ds-sum-prog) :is(.row, .os-row) :is(.total, .os-total) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.ds-sum-state, .os-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); }
:is(.ds-sum-state, .os-ds-sum-state):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.ds-sum-state, .os-ds-sum-state):is(.no, .os-no) { color: var(--briefing); }
:is(.ds-sum-state, .os-ds-sum-state) :is(.ico, .os-ico) { display: inline-flex; }
:is(.ds-sum-defer, .os-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); }
:is(.ds-sum-defer, .os-ds-sum-defer) :is(.mono, .os-mono) { font-family: var(--font-mono); }
/* tinted total footer */
:is(.ds-sum-foot, .os-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); }
:is(.ds-sum-foot, .os-ds-sum-foot) :is(.k, .os-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)); }
:is(.ds-sum-foot, .os-ds-sum-foot) :is(.v, .os-v) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1; }
:is(.ds-sum-foot, .os-ds-sum-foot) :is(.v, .os-v):is(.accent, .os-accent) { color: var(--accent); }
:is(.ds-sum-foot, .os-ds-sum-foot) :is(.v, .os-v):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.ds-sum-foot, .os-ds-sum-foot) :is(.v, .os-v) :is(.cents, .os-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). */
:is(.wz-stage-head, .os-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. */
:is(.wz-ledger, .os-wz-ledger) :is(.wz-grouphead, .os-wz-grouphead) { background: var(--sky-50); }
:is(.wz-ledger, .os-wz-ledger) :is(.wz-grouphead, .os-wz-grouphead) :is(.nm, .os-nm) { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; }
:is(.wz-ledger, .os-wz-ledger) :is(.wz-grouphead, .os-wz-grouphead):is(.warm, .os-warm) { background: var(--sky-50); }
:is(.wz-ledger, .os-wz-ledger) :is(.wz-grouphead, .os-wz-grouphead):is(.warm, .os-warm) :is(.nm, .os-nm) { color: var(--ink); }
/* ── Done step — record status band uses slate, not gray-100 ── */
:is(.dn-rec-status, .os-dn-rec-status) { background: var(--sky-50); border-top: 1px solid var(--hairline-2); }
:is(.bk2-stage, .os-bk2-stage) { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
:is(.bk2-stage, .os-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); }
:is(.bk2-stage, .os-bk2-stage) p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; max-width: 60ch; }
:is(.bk2-stage, .os-bk2-stage) :is(.meta, .os-meta) { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
:is(.bk2-stage, .os-bk2-stage) :is(.meta, .os-meta) :is(.m, .os-m) { text-align: right; }
:is(.bk2-stage, .os-bk2-stage) :is(.meta, .os-meta) :is(.m, .os-m) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:is(.bk2-stage, .os-bk2-stage) :is(.meta, .os-meta) :is(.m, .os-m) :is(.v, .os-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.) */
:is(.bk2-2col, .os-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. */
:is(.wz-inner, .os-wz-inner):is(.wz-inner--dives, .os-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). */
:is(.bk2-pay-rail, .os-bk2-pay-rail) { max-width: 1188px; margin-inline: auto; padding: 30px 40px 40px; }
:is(.bk2-2col, .os-bk2-2col) { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { :is(.bk2-2col, .os-bk2-2col) { grid-template-columns: 1fr; } :is(.bk2-rail, .os-bk2-rail) { position: static !important; } }
:is(.bk2-col, .os-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; }
:is(.bk2-rail, .os-bk2-rail) { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
/* ════════════════════════════════════════════════════════════
   DATE BADGE — the recurring instrument tile (sky-50)
   ════════════════════════════════════════════════════════════ */
:is(.bk2-dbadge, .os-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; }
:is(.bk2-dbadge, .os-bk2-dbadge) :is(.m, .os-m) { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
:is(.bk2-dbadge, .os-bk2-dbadge) :is(.d, .os-d) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: 2px; }
:is(.bk2-dbadge, .os-bk2-dbadge) :is(.w, .os-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
   ════════════════════════════════════════════════════════════ */
:is(.bk2-dcard, .os-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; }
:is(.bk2-dhead, .os-bk2-dhead) { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
:is(.bk2-dhead, .os-bk2-dhead) :is(.who, .os-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). */
:is(.bk2-dhead__ident, .os-bk2-dhead__ident) { min-width: 0; flex: 1; }
:is(.bk2-dhead, .os-bk2-dhead) :is(.nm, .os-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%; }
:is(.bk2-dhead, .os-bk2-dhead) :is(.name-input, .os-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; }
:is(.bk2-dhead, .os-bk2-dhead) :is(.name-input, .os-name-input):focus { border-bottom-color: var(--accent); }
:is(.bk2-dhead, .os-bk2-dhead) :is(.cert, .os-cert) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.bk2-dhead, .os-bk2-dhead) :is(.tot, .os-tot) { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
:is(.bk2-dhead, .os-bk2-dhead) :is(.tot, .os-tot):is(.zero, .os-zero) { color: var(--muted-2); }
:is(.bk2-drm, .os-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; }
:is(.bk2-dcard, .os-bk2-dcard):hover :is(.bk2-drm, .os-bk2-drm) { opacity: 1; }
:is(.bk2-drm, .os-bk2-drm):hover { background: var(--cancelled-bg); color: var(--cancelled); }
:is(.bk2-dconfirm, .os-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); }
:is(.bk2-dconfirm, .os-bk2-dconfirm) :is(.q, .os-q) { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; }
:is(.bk2-dconfirm, .os-bk2-dconfirm) :is(.yes, .os-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; }
:is(.bk2-dconfirm, .os-bk2-dconfirm) :is(.no, .os-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 ──────────────────────── */
:is(.bk2-day, .os-bk2-day) { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 16px 18px; border-top: 1px solid var(--hairline-2); }
:is(.bk2-day, .os-bk2-day):first-child { border-top: 0; }
:is(.bk2-day-spine, .os-bk2-day-spine) { display: flex; flex-direction: column; align-items: center; gap: 8px; }
:is(.bk2-day-spine, .os-bk2-day-spine) :is(.line, .os-line) { flex: 1; width: 1px; background: var(--hairline); min-height: 8px; }
:is(.bk2-day-main, .os-bk2-day-main) { min-width: 0; }
:is(.bk2-day-top, .os-bk2-day-top) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
:is(.bk2-day-top, .os-bk2-day-top) :is(.dl, .os-dl) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); }
:is(.bk2-day-top, .os-bk2-day-top) :is(.dl, .os-dl) :is(.full, .os-full) { color: var(--muted); font-weight: 400; font-family: var(--font-sans); font-size: var(--text-xs); margin-left: 7px; }
:is(.bk2-day-x, .os-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; }
:is(.bk2-day, .os-bk2-day):hover :is(.bk2-day-x, .os-bk2-day-x) { opacity: 1; }
:is(.bk2-day-x, .os-bk2-day-x):hover { background: var(--gray-100); color: var(--ink); }
/* line items — reuse .wz-li grid but lighter padding here */
:is(.bk2-items, .os-bk2-items) :is(.wz-li, .os-wz-li) { padding-left: 0; padding-right: 0; }
:is(.bk2-items, .os-bk2-items) :is(.wz-li-head, .os-wz-li-head) { padding-left: 0; padding-right: 0; }
/* add chips under a day */
:is(.bk2-addrow, .os-bk2-addrow) { display: flex; gap: 8px; margin-top: 8px; }
:is(.bk2-addchip, .os-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; }
:is(.bk2-addchip, .os-bk2-addchip):hover { background: var(--accent-softer); }
:is(.bk2-addchip, .os-bk2-addchip):is(.add, .os-add) { color: var(--confirmed); border-color: var(--confirmed-border); }
:is(.bk2-addchip, .os-bk2-addchip):is(.add, .os-add):hover { background: var(--confirmed-bg); }
/* add-date footer of a card — opens the browser-native date picker */
:is(.bk2-adddate, .os-bk2-adddate) { padding: 12px 18px; border-top: 1px solid var(--hairline-2); }
:is(.bk2-adddate-wrap, .os-bk2-adddate-wrap) { position: relative; }
:is(.bk2-adddate-btn, .os-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; }
:is(.bk2-adddate-btn, .os-bk2-adddate-btn):hover { background: var(--accent-softer); border-color: var(--accent); }
:is(.bk2-date-native, .os-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 */
:is(.bk2-fees-head, .os-bk2-fees-head) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
:is(.bk2-fees-head, .os-bk2-fees-head) :is(.t, .os-t) { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
:is(.bk2-fees-head, .os-bk2-fees-head) :is(.c, .os-c) { font-size: var(--text-xs); color: var(--muted); }
:is(.bk2-fees-head, .os-bk2-fees-head) :is(.a, .os-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; }
:is(.bk2-fees-head, .os-bk2-fees-head) :is(.a, .os-a):hover { color: var(--accent-strong); }
:is(.bk2-fee, .os-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); }
:is(.bk2-fee, .os-bk2-fee):first-of-type { border-top: 0; }
:is(.bk2-fee, .os-bk2-fee) :is(.kind, .os-kind) { display: inline-flex; justify-content: center; color: var(--muted); }
:is(.bk2-fee, .os-bk2-fee) :is(.amt, .os-amt) { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.bk2-fee-empty, .os-bk2-fee-empty) { padding: 14px 18px; font-size: var(--text-sm); color: var(--muted-2); font-style: italic; }
:is(.bk2-adddiver, .os-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; }
:is(.bk2-adddiver, .os-bk2-adddiver):hover { background: var(--accent-softer); }
/* package header band — accent-tinted, sits above a diver's day cards */
:is(.bk2-pkghead, .os-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); }
:is(.bk2-pkghead__main, .os-bk2-pkghead__main) { display: flex; align-items: center; gap: 8px; min-width: 0; }
:is(.bk2-pkghead__title, .os-bk2-pkghead__title) { font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
:is(.bk2-pkghead__price, .os-bk2-pkghead__price) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
:is(.bk2-pkghead__remove, .os-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; }
:is(.bk2-pkghead__remove, .os-bk2-pkghead__remove):hover { background: var(--danger-bg); border-color: var(--danger); }
/* ════════════════════════════════════════════════════════════
   ITINERARY direction — day ticket band per date
   ════════════════════════════════════════════════════════════ */
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-day, .os-bk2-day) { display: block; padding: 0; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-day-spine, .os-bk2-day-spine) { display: none; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-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)); }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-day, .os-bk2-day):first-child :is(.bk2-ticketband, .os-bk2-ticketband) { border-top: 0; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-bk2-ticketband) :is(.cal, .os-cal) { display: inline-flex; color: var(--accent); flex-shrink: 0; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-bk2-ticketband) :is(.dtxt, .os-dtxt) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-bk2-ticketband) :is(.dow, .os-dow) { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-bk2-ticketband) :is(.dow, .os-dow)::before { content: '·'; margin-right: 7px; color: var(--muted-2); }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-bk2-ticketband) :is(.cnt, .os-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; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticketband, .os-bk2-ticketband) :is(.wz-li-acts, .os-wz-li-acts) { display: inline-flex; align-items: center; gap: 2px; }
:is(.bk2-itin, .os-bk2-itin) :is(.bk2-ticket-body, .os-bk2-ticket-body) { padding: 8px 18px 14px; }
/* ════════════════════════════════════════════════════════════
   RAIL · KPI summary tiles (console direction)
   ════════════════════════════════════════════════════════════ */
:is(.bk2-card, .os-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; }
:is(.bk2-card-head, .os-bk2-card-head) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
:is(.bk2-card-head, .os-bk2-card-head) :is(.t, .os-t) { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:is(.bk2-card-head, .os-bk2-card-head) :is(.ico, .os-ico) { color: var(--muted-2); display: inline-flex; }
:is(.bk2-tiles, .os-bk2-tiles) { display: grid; grid-template-columns: 1fr 1fr; }
:is(.bk2-tile, .os-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); }
:is(.bk2-tile, .os-bk2-tile):nth-child(-n+2) { border-top: 0; }
:is(.bk2-tile, .os-bk2-tile):nth-child(odd) { border-left: 0; }
:is(.bk2-tile, .os-bk2-tile) :is(.ico, .os-ico) { width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
:is(.bk2-tile, .os-bk2-tile) :is(.k, .os-k) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
:is(.bk2-tile, .os-bk2-tile) :is(.v, .os-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; }
:is(.bk2-tile, .os-bk2-tile) :is(.v, .os-v):is(.sm, .os-sm) { font-size: var(--text-sm); }
/* rail itemized breakdown */
:is(.bk2-break, .os-bk2-break) { max-height: 38vh; overflow-y: auto; padding: 4px 16px; }
:is(.bk2-break-grp, .os-bk2-break-grp) { padding: 11px 0; border-top: 1px solid var(--hairline-2); }
:is(.bk2-break-grp, .os-bk2-break-grp):first-child { border-top: 0; }
:is(.bk2-break-grp, .os-bk2-break-grp) :is(.gh, .os-gh) { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
:is(.bk2-break-grp, .os-bk2-break-grp) :is(.gh, .os-gh) :is(.nm, .os-nm) { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
:is(.bk2-break-grp, .os-bk2-break-grp) :is(.gh, .os-gh) :is(.nm, .os-nm):is(.unset, .os-unset) { color: var(--muted-2); }
:is(.bk2-break-grp, .os-bk2-break-grp) :is(.gh, .os-gh) :is(.nm, .os-nm):is(.warm, .os-warm) { color: var(--gray-700); }
:is(.bk2-break-grp, .os-bk2-break-grp) :is(.gh, .os-gh) :is(.tt, .os-tt) { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
:is(.bk2-break-li, .os-bk2-break-li) { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; }
:is(.bk2-break-li, .os-bk2-break-li) :is(.nm, .os-nm) { color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.bk2-break-li, .os-bk2-break-li) :is(.dt, .os-dt) { color: var(--muted-2); font-family: var(--font-mono); }
:is(.bk2-break-li, .os-bk2-break-li) :is(.amt, .os-amt) { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; }
:is(.bk2-break-li, .os-bk2-break-li):is(.empty, .os-empty) { font-style: italic; color: var(--muted-2); }
:is(.bk2-total, .os-bk2-total) { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
:is(.bk2-total, .os-bk2-total) :is(.k, .os-k) { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
:is(.bk2-total, .os-bk2-total) :is(.v, .os-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) */
:is(.bk2-roll, .os-bk2-roll) { padding: 4px 16px; }
:is(.bk2-rollrow, .os-bk2-rollrow) { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--hairline-2); }
:is(.bk2-rollrow, .os-bk2-rollrow):first-child { border-top: 0; }
:is(.bk2-rollrow, .os-bk2-rollrow) :is(.who, .os-who) { flex: 1; min-width: 0; }
:is(.bk2-rollrow, .os-bk2-rollrow) :is(.who, .os-who) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.bk2-rollrow, .os-bk2-rollrow) :is(.who, .os-who) :is(.sub, .os-sub) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
:is(.bk2-rollrow, .os-bk2-rollrow) :is(.so-ico, .os-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; }
:is(.bk2-rollrow, .os-bk2-rollrow) :is(.amt, .os-amt) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
/* special requests */
:is(.bk2-notes, .os-bk2-notes) { padding: 16px 18px; }
:is(.bk2-notes, .os-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; }
:is(.bk2-notes, .os-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; }
:is(.bk2-notes, .os-bk2-notes) textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
/* ════════════════════════════════════════════════════════════
   BALANCE METER — shared payment primitive
   ════════════════════════════════════════════════════════════ */
:is(.bk2-meter, .os-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; }
:is(.bk2-meter, .os-bk2-meter) :is(.eyebrow, .os-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); }
:is(.bk2-meter, .os-bk2-meter) :is(.amt, .os-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; }
:is(.bk2-meter, .os-bk2-meter) :is(.amt, .os-amt) :is(.cents, .os-cents) { color: var(--muted-2); font-size: var(--text-3xl); }
:is(.bk2-meter, .os-bk2-meter) :is(.amt, .os-amt):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-meter, .os-bk2-meter) :is(.sub, .os-sub) { font-size: var(--text-xs); color: var(--muted); }
:is(.bk2-meter, .os-bk2-meter) :is(.bar, .os-bar) { height: 8px; border-radius: 99px; background: var(--gray-200); overflow: hidden; margin: 18px 0 11px; }
:is(.bk2-meter, .os-bk2-meter) :is(.bar, .os-bar) > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
:is(.bk2-meter, .os-bk2-meter) :is(.bar, .os-bar):is(.full, .os-full) > span { background: var(--confirmed); }
:is(.bk2-meter, .os-bk2-meter) :is(.foot, .os-foot) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
:is(.bk2-meter, .os-bk2-meter) :is(.foot, .os-foot) :is(.paid, .os-paid) { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
:is(.bk2-meter, .os-bk2-meter) :is(.foot, .os-foot) :is(.paid, .os-paid):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-meter, .os-bk2-meter) :is(.foot, .os-foot) :is(.total, .os-total) { color: var(--muted); }
:is(.bk2-meter, .os-bk2-meter) :is(.foot, .os-foot) :is(.total, .os-total) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.bk2-meter, .os-bk2-meter) :is(.state, .os-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); }
:is(.bk2-meter, .os-bk2-meter) :is(.state, .os-state) :is(.tick, .os-tick) { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
:is(.bk2-meter, .os-bk2-meter) :is(.state, .os-state):is(.ok, .os-ok) :is(.tick, .os-tick) { background: var(--confirmed-bg); color: var(--confirmed); }
:is(.bk2-meter, .os-bk2-meter) :is(.state, .os-state):is(.no, .os-no) :is(.tick, .os-tick) { background: var(--briefing-bg); color: var(--briefing); }
:is(.bk2-meter, .os-bk2-meter) :is(.defer, .os-defer) { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; font-size: var(--text-xs); color: var(--muted); }
:is(.bk2-meter, .os-bk2-meter) :is(.defer, .os-defer) :is(.mono, .os-mono) { font-family: var(--font-mono); }
/* ════════════════════════════════════════════════════════════
   PAYMENT layouts
   ════════════════════════════════════════════════════════════ */
:is(.bk2-pay-split, .os-bk2-pay-split) { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 26px; align-items: start; }
@media (max-width: 1040px) { :is(.bk2-pay-split, .os-bk2-pay-split) { grid-template-columns: 1fr; } }
:is(.bk2-pay-split, .os-bk2-pay-split) :is(.bk2-meter, .os-bk2-meter) { position: sticky; top: 24px; }
/* itinerary payment — full-width meter hero on a tinted band */
:is(.bk2-pay-hero, .os-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) { :is(.bk2-pay-hero, .os-bk2-pay-hero) { grid-template-columns: 1fr; } }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.lead, .os-lead) :is(.eyebrow, .os-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); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.lead, .os-lead) :is(.amt, .os-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; }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.lead, .os-lead) :is(.amt, .os-amt) :is(.cents, .os-cents) { color: var(--sky-700); opacity: 0.6; font-size: var(--text-3xl); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.lead, .os-lead) :is(.amt, .os-amt):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.lead, .os-lead) :is(.sub, .os-sub) { font-size: var(--text-sm); color: var(--sky-800); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) { width: 232px; }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.bar, .os-bar) { height: 8px; border-radius: 99px; background: rgba(3,105,161,0.14); overflow: hidden; }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.bar, .os-bar) > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.bar, .os-bar):is(.full, .os-full) > span { background: var(--confirmed); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.row, .os-row) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: var(--text-xs); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.row, .os-row) :is(.paid, .os-paid) { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.row, .os-row) :is(.paid, .os-paid):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.row, .os-row) :is(.total, .os-total) { color: var(--sky-800); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.state, .os-state) { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--text-xs); font-weight: 500; }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.state, .os-state):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-pay-hero, .os-bk2-pay-hero) :is(.gauge, .os-gauge) :is(.state, .os-state):is(.no, .os-no) { color: var(--briefing); }
/* method chips */
:is(.bk2-methods, .os-bk2-methods) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
:is(.bk2-pm, .os-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; }
:is(.bk2-pm, .os-bk2-pm):hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); }
:is(.bk2-pm, .os-bk2-pm) :is(.ico, .os-ico) { color: var(--muted-2); display: inline-flex; }
:is(.bk2-pm, .os-bk2-pm):hover :is(.ico, .os-ico) { color: var(--accent); }
/* #379 — off-premises settlement methods, revealed by the "Other" disclosure.
   Indented and rule-led so they read as a subordinate group rather than five
   more peers of Cash. Same chip component, quieter resting state: these are
   the exception, not the common path. */
:is(.bk2-methods--other, .os-bk2-methods--other) {
  margin-top: -8px; padding-left: 12px;
  border-left: 2px solid var(--hairline);
}
:is(.bk2-pm--other, .os-bk2-pm--other) { background: var(--surface-alt); color: var(--muted); }
/* #379 — the optional booking ref sitting under the Agent Paid row's agent
   picker. Secondary to the picker above it, so it sits quieter and tighter. */
:is(.bk2-mi--ref, .os-bk2-mi--ref) { margin-top: 6px; font-size: var(--text-xs); }
/* payment rows ledger */
:is(.bk2-prows, .os-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; }
:is(.bk2-prow, .os-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); }
:is(.bk2-prow, .os-bk2-prow):first-child { border-top: 0; }
:is(.bk2-prow, .os-bk2-prow) > div { min-width: 0; }
:is(.bk2-prow, .os-bk2-prow) :is(.fl, .os-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; }
:is(.bk2-prow, .os-bk2-prow) :is(.fl, .os-fl) :is(.req, .os-req) { color: var(--error); margin-left: 3px; }
:is(.bk2-prow, .os-bk2-prow) :is(.rm, .os-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; }
:is(.bk2-prow, .os-bk2-prow) :is(.rm, .os-rm):hover { background: var(--cancelled-bg); color: var(--cancelled); }
:is(.bk2-mi, .os-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; }
:is(.bk2-mi, .os-bk2-mi):is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.bk2-mi, .os-bk2-mi):focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.bk2-psub, .os-bk2-psub) { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
:is(.bk2-psub, .os-bk2-psub):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-pro, .os-bk2-pro) { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); }
:is(.bk2-pcheck, .os-bk2-pcheck) { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
:is(.bk2-pcheck, .os-bk2-pcheck) input { width: 14px; height: 14px; accent-color: var(--accent); }
:is(.bk2-pempty, .os-bk2-pempty) { padding: 22px 18px; text-align: center; font-size: var(--text-sm); color: var(--muted-2); }
/* attribution */
:is(.bk2-attr, .os-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; }
:is(.bk2-attr-top, .os-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. */
:is(.bk2-attr-top, .os-bk2-attr-top):is(.diveos-check, .os-field-check) { align-items: center; }
:is(.bk2-attr-top, .os-bk2-attr-top) :is(.diveos-check__box, .os-field-check__box) { margin-top: 0; }
:is(.bk2-attr-top, .os-bk2-attr-top) :is(.t, .os-t) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.bk2-attr-body, .os-bk2-attr-body) { padding: 4px 18px 18px; border-top: 1px solid var(--hairline-2); display: flex; flex-direction: column; gap: 14px; }
:is(.bk2-attr-fl, .os-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; }
:is(.bk2-chips, .os-bk2-chips) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.bk2-chip, .os-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; }
:is(.bk2-chip, .os-bk2-chip):hover { border-color: var(--accent-border); background: var(--accent-softer); }
:is(.bk2-chip, .os-bk2-chip):is(.on, .os-on) { border-color: var(--accent); background: var(--accent-softer); }
:is(.bk2-chip, .os-bk2-chip) :is(.who, .os-who) { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
:is(.bk2-chip, .os-bk2-chip) :is(.who, .os-who) :is(.nm, .os-nm) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.bk2-chip, .os-bk2-chip) :is(.who, .os-who) :is(.role, .os-role) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
:is(.bk2-chip, .os-bk2-chip):is(.on, .os-on) :is(.who, .os-who) :is(.role, .os-role) { color: var(--accent); }
:is(.bk2-chip, .os-bk2-chip) :is(.tick, .os-tick) { display: inline-flex; color: var(--accent); }
:is(.bk2-commrow, .os-bk2-commrow) { display: flex; align-items: center; gap: 12px; }
:is(.bk2-commrow, .os-bk2-commrow) :is(.wz-price, .os-wz-price) { height: 36px; }
:is(.bk2-commrow, .os-bk2-commrow) :is(.note, .os-note) { font-size: var(--text-xs); color: var(--muted); }
:is(.bk2-commrow, .os-bk2-commrow) :is(.note, .os-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.
   ════════════════════════════════════════════════════════════ */
:is(.bk2-pay-rail, .os-bk2-pay-rail) { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 1080px) { :is(.bk2-pay-rail, .os-bk2-pay-rail) { grid-template-columns: 1fr; } :is(.bk2-pay-rail, .os-bk2-pay-rail) :is(.ds-sum, .os-ds-sum) { position: static !important; } }
:is(.bk2-pay-rail, .os-bk2-pay-rail) :is(.ds-sum, .os-ds-sum) { position: sticky; top: 24px; }
:is(.bk2-sumcard, .os-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; }
:is(.bk2-sumcard-head, .os-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); }
:is(.bk2-sumcard-head, .os-bk2-sumcard-head) :is(.t, .os-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); }
:is(.bk2-sumcard-head, .os-bk2-sumcard-head) :is(.st, .os-st) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
:is(.bk2-sumcard-head, .os-bk2-sumcard-head) :is(.st, .os-st):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-sumrow, .os-bk2-sumrow) { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--hairline-2); }
:is(.bk2-sumrow, .os-bk2-sumrow):first-of-type { border-top: 0; }
:is(.bk2-sumrow, .os-bk2-sumrow) :is(.ico, .os-ico) { color: var(--muted-2); display: inline-flex; flex-shrink: 0; }
:is(.bk2-sumrow, .os-bk2-sumrow) :is(.main, .os-main) { flex: 1; min-width: 0; }
:is(.bk2-sumrow, .os-bk2-sumrow) :is(.main, .os-main) :is(.nm, .os-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; }
:is(.bk2-sumrow, .os-bk2-sumrow) :is(.main, .os-main) :is(.sub, .os-sub) { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
:is(.bk2-sumrow, .os-bk2-sumrow) :is(.val, .os-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 */
:is(.bk2-sumprog, .os-bk2-sumprog) { padding: 15px 22px; border-top: 1px solid var(--hairline-2); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.bar, .os-bar) { height: 7px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.bar, .os-bar) > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.bar, .os-bar):is(.full, .os-full) > span { background: var(--confirmed); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.row, .os-row) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.row, .os-row) :is(.paid, .os-paid) { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.row, .os-row) :is(.paid, .os-paid):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.row, .os-row) :is(.total, .os-total) { color: var(--muted); }
:is(.bk2-sumprog, .os-bk2-sumprog) :is(.row, .os-row) :is(.total, .os-total) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.bk2-sumcard-foot, .os-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); }
:is(.bk2-sumcard-foot, .os-bk2-sumcard-foot) :is(.k, .os-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); }
:is(.bk2-sumcard-foot, .os-bk2-sumcard-foot) :is(.v, .os-v) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; color: var(--accent); line-height: 1; }
:is(.bk2-sumcard-foot, .os-bk2-sumcard-foot) :is(.v, .os-v):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-sumcard-foot, .os-bk2-sumcard-foot) :is(.v, .os-v) :is(.cents, .os-cents) { font-size: var(--text-lg); color: var(--muted-2); }
:is(.bk2-sumcard-state, .os-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); }
:is(.bk2-sumcard-state, .os-bk2-sumcard-state):is(.ok, .os-ok) { color: var(--confirmed); }
:is(.bk2-sumcard-state, .os-bk2-sumcard-state):is(.no, .os-no) { color: var(--briefing); }
:is(.bk2-sumcard-state, .os-bk2-sumcard-state) :is(.ico, .os-ico) { display: inline-flex; }
:is(.bk2-sumcard-defer, .os-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); }
:is(.bk2-sumcard-defer, .os-bk2-sumcard-defer) :is(.mono, .os-mono) { font-family: var(--font-mono); }
/* Stepper band — centered, narrower block (per direct edits) */
:is(.wz-bars-inner, .os-wz-bars-inner) { max-width: 720px; }
/* compact density trims */
:is(.wz-compact, .os-wz-compact) :is(.bk2-day, .os-bk2-day) { padding-top: 11px; padding-bottom: 11px; }
:is(.wz-compact, .os-wz-compact) :is(.bk2-tile, .os-bk2-tile) { padding-top: 11px; padding-bottom: 11px; }
:is(.wz-compact, .os-wz-compact) :is(.bk2-prow, .os-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.
   ───────────────────────────────────────────────────────────────────── */
.os-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. */
.os-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. */
.os-card > .os-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. */
.os-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--space-6) 0;
}
.os-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);
}
.os-card__title i, .os-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. */
.os-card__title--display {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--font-display);
}
.os-card__actions { display: flex; align-items: center; gap: var(--space-2); }
.os-card__body { padding: 22px var(--space-6); }
/* Foot — trailing action row; the mirror of __head. Bottom-only padding so the
   body flows into it with no divider, exactly as the head flows into the body.
   Actions sit right, primary rightmost (--split when a destructive or secondary
   action anchors left). Pair with --divided when the card needs the hairline
   band; the divided rule below mirrors the head's.

   This is the canonical home for a card's actions. `.os-card__actions` is the
   HEAD's action slot (a bare flex row with no padding or divider) — placed
   after the body it renders as a naked row butting the content, which is what
   consumers were hand-rolling card footers to work around. */
.os-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0 var(--space-6) 22px;
}
.os-card__foot--split { justify-content: space-between; }
/* ── 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. */
.os-card--raised { box-shadow: var(--shadow-sm); }
/* --float: the card overlaps a tinted page hero and must lift off it. The ONLY
   other place the overlay tier is used besides the sticky action footer — see
   the two-elevation rule. Deliberately not a third shadow: `--shadow-float` was
   proposed and withdrawn after a pixel diff put it 0.54/765 from this. */
.os-card--float { box-shadow: var(--elevation-overlay); }
.os-card--divided .os-card__head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.os-card--divided .os-card__foot {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}
/* ── Interaction states (from handoff .dos-card) ─────────────────────────
   Apply --interactive only when the whole card is a click target. */
.os-card--interactive { cursor: pointer; }
.os-card--interactive:hover {
  box-shadow: var(--shadow-hover);
  background-color: var(--canvas);
}
.os-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.os-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.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(.dv-stops, .os-stops) { position: relative; }
:is(.dv-stops__row, .os-stops__row) {
  display: grid;
  grid-template-columns: 62px 36px minmax(0, 1fr);
  align-items: start;
}
/* Time gutter */
:is(.dv-stops__time, .os-stops__time) { text-align: right; padding: 16px 14px 0 0; }
:is(.dv-stops__hh, .os-stops__hh) {
  font-family: var(--font-mono);
  font-size: var(--text-md); font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em;
}
:is(.dv-stops__hh--editing, .os-stops__hh--editing) { color: var(--muted-2); letter-spacing: 0.06em; }
:is(.dv-stops__lbl, .os-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 */
:is(.dv-stops__rail, .os-stops__rail) {
  display: flex; flex-direction: column; align-items: center;
  align-self: stretch;
}
:is(.dv-stops__node, .os-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;
}
:is(.dv-stops__node, .os-stops__node) svg { flex-shrink: 0; }
:is(.dv-stops__rail, .os-stops__rail) > :is(.dv-stops__node, .os-stops__node) { flex: 0 0 30px; height: 30px; max-height: 30px; }
:is(.dv-stops__node--accent, .os-stops__node--accent) {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
:is(.dv-stops__node--num, .os-stops__node--num) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
:is(.dv-stops__line, .os-stops__line) {
  flex: 1; width: 2px; background: var(--hairline);
  margin: 4px 0; min-height: 18px;
}
:is(.dv-stops__row, .os-stops__row):last-child :is(.dv-stops__line, .os-stops__line) { display: none; }
/* Cards */
:is(.dv-stops__card, .os-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;
}
:is(.dv-stops__card--bookend, .os-stops__card--bookend) {
  background: var(--surface-alt);
  box-shadow: none; cursor: default;
  margin: 4px 0 6px 12px;
}
:is(.dv-stops__card--stop, .os-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. */
:is(.dv-stops__card-main, .os-stops__card-main) { flex: 1; min-width: 0; }
/* Editing state gets extra padding so the inline form breathes. */
:is(.dv-stops__card--stop, .os-stops__card--stop).is-editing { align-items: flex-start; padding: 16px 18px; }
:is(.dv-stops__card--stop, .os-stops__card--stop):hover { border-color: var(--accent-border); }
:is(.dv-stops__card--stop, .os-stops__card--stop).is-editing { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
:is(.dv-stops__eye, .os-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);
}
:is(.dv-stops__ttl, .os-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;
}
:is(.dv-stops__card--bookend, .os-stops__card--bookend) :is(.dv-stops__ttl, .os-stops__ttl) { font-size: var(--text-sm); color: var(--muted); }
:is(.dv-stops__ttl--edit, .os-stops__ttl--edit) { cursor: pointer; }
:is(.dv-stops__ttl--edit, .os-stops__ttl--edit):hover { color: var(--accent); }
/* ── Read-only Plan (inside the info_card) — even stop rhythm ─────────────────
   ROOT CAUSE: the timeline never sets an explicit inter-stop gap. Each row is a
   grid with `align-items: start`; the rail column (node + flex-1 line) stretches
   to the row height, and the row height is max(card-height, rail-intrinsic). So
   the visible gap = row-height − card-height = rail slack, which DEPENDS ON CARD
   CONTENT: a card with a "Max depth" meta line (~84px) exceeds the rail's intrinsic
   height (~70px) → ~6px gap, while a single-line card (~57px) is shorter than the
   rail → ~17px gap. The editable timeline hides this behind fixed-height hover
   gap-zones between every stop; the read-only timeline has none, so the variance
   shows as uneven spacing.
   ROOT FIX: make the gap an EXPLICIT value, not emergent rail slack. An 8px
   top/bottom margin sets the gap; `min-height: 0` on the rail line stops the rail
   from ever out-talling the card, so the card always drives the row and the gap is
   EXACTLY the margins (16px) no matter the card's content. Content-independent, no
   magic card-height constant. Scoped to `.os-card` (info_card) so the editable
   timeline — which already spaces itself via the gap-zones — is untouched. */
.os-card :is(.dv-stops__card--stop, .os-stops__card--stop) {
  margin-top: 8px;
  margin-bottom: 8px;
}
.os-card :is(.dv-stops__line, .os-stops__line) { min-height: 0; }
/* 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) {
  :is(.dv-stops__ttl--field, .os-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;
  }
  :is(.dv-stops__ttl--field, .os-stops__ttl--field):hover {
    border-color: var(--hairline-strong);
    background: var(--surface);
    cursor: text;
  }
}
:is(.dv-stops__meta, .os-stops__meta) {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-top: 7px;
}
:is(.dv-stops__grip, .os-stops__grip) {
  color: var(--muted-2); flex-shrink: 0; cursor: grab; margin-top: 3px;
}
/* Row actions — edit (signifier) before delete */
:is(.dv-stops__acts, .os-stops__acts) { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
:is(.dv-stops__act, .os-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;
}
:is(.dv-stops__act, .os-stops__act):hover {
  border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent);
}
:is(.dv-stops__act--del, .os-stops__act--del):hover {
  border-color: var(--cancelled-border); background: var(--cancelled-bg); color: var(--cancelled);
}
/* Board time-slot control (prototype trip time slot) */
:is(.dv-stops__slot, .os-stops__slot) { margin-top: 12px; max-width: 240px; }
/* Read-only summary: quiet time slot + pencil; the select is revealed on click. */
:is(.dv-stops__slot--ro, .os-stops__slot--ro) { display: flex; align-items: center; gap: 8px; }
:is(.dv-stops__slot-sum, .os-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;
}
:is(.dv-stops__slot-sum, .os-stops__slot-sum) svg { color: var(--muted-2); }
:is(.dv-stops__slot-edit, .os-stops__slot-edit) { width: 26px; height: 26px; }
:is(.dv-stops__slot-edit-row, .os-stops__slot-edit-row) { display: flex; align-items: flex-end; gap: 8px; }
:is(.dv-stops__slot-edit-row, .os-stops__slot-edit-row) :is(.dv-select--inline, .os-select--inline) { flex: 1; }
/* Inline edit form — roomy, not cramped (prototype-review: "collapsed too
   much, should be plenty of space"). */
:is(.dv-stops__edit, .os-stops__edit) { margin-top: 12px; }
:is(.dv-stops__edit-fields, .os-stops__edit-fields) { display: flex; gap: 14px; align-items: flex-end; }
:is(.dv-stops__edit-actions, .os-stops__edit-actions) { display: flex; gap: 8px; margin-top: 14px; }
/* Shared inline stop form (add === edit) — ONE horizontal row: the site select
   grows to fill the container width; time + Save/Cancel sit inline beside it.
   Supersedes the old stacked .os-stops__edit-fields + .os-stops__edit-actions
   two-row layout (kept above for any legacy callers). */
/* nowrap: Save + Cancel (and the time input) stay inline on ONE row; the site
   select is the flexible item that shrinks first (min-width:0) instead of the
   buttons wrapping to a second line. */
:is(.dv-stops__form, .os-stops__form) { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
:is(.dv-stops__form, .os-stops__form) > :is(.dv-select--inline, .os-select--inline) { flex: 1 1 120px; min-width: 0; }
/* Equal height: the os-ds dv-select trigger (.os-select-field) is 46px, so the
   time input and Save/Cancel buttons match it — one control height across the row. */
:is(.dv-stops__form, .os-stops__form) > :is(.dv-btn, .os-btn) { flex: 0 0 auto; min-height: 46px; }
/* .os-stops__card--stop is display:flex, so the edit form (a flex item beside
   the hidden display row) must grow to fill the card — otherwise it collapses
   to content width with dead space to the right. The endwrap/gap forms are
   block children and already fill their cell. */
:is(.dv-stops__card--stop, .os-stops__card--stop) > :is(.dv-stops__form, .os-stops__form) { flex: 1 1 auto; min-width: 0; }
:is(.dv-stops__card--stop, .os-stops__card--stop) :is(.dv-stops__form, .os-stops__form),
:is(.dv-stops__endwrap, .os-stops__endwrap) :is(.dv-stops__form, .os-stops__form),
:is(.dv-stops__gap, .os-stops__gap) :is(.dv-stops__form, .os-stops__form) { margin-top: 12px; }
/* Empty stop-shell: the ADD form (end-cap + gap-insert), which is NOT inside a
   stop card, renders as a bordered inset card matching a real stop card / the
   collapsed .os-stops__add pill — so the expanded add row aligns left + right
   with the stops instead of breaking out full-bleed and skewing the column.
   Styled on the form itself (display:none until revealed) so no empty box shows
   while collapsed. Left margin + padding mirror .os-stops__card exactly. */
:is(.dv-stops__endwrap, .os-stops__endwrap) :is(.dv-stops__form, .os-stops__form),
:is(.dv-stops__gap, .os-stops__gap) :is(.dv-stops__form, .os-stops__form) {
  margin-left: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px 16px;
}
:is(.dv-stops__field-label, .os-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;
}
:is(.dv-stops__time-input, .os-stops__time-input) {
  width: 112px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: var(--text-sm);
}
/* ── Gap zone (hover-to-insert) ───────────────────────────────────────────── */
:is(.dv-stops__gap, .os-stops__gap) {
  display: grid;
  grid-template-columns: 62px 36px minmax(0, 1fr);
  align-items: center;
  /* FIXED height + clip so the collapsed reveal (the opacity:0 "Add stop" pill,
     ~26px of natural height) can't inflate the gap — that inflation was spreading
     the stops apart and making the vertical rhythm look uneven. Hover/active
     expand it. */
  height: 10px;
  overflow: hidden;
  transition: height .14s;
}
:is(.dv-stops__gap, .os-stops__gap).is-hover { height: 46px; }
:is(.dv-stops__gap, .os-stops__gap).is-active { height: auto; overflow: visible; }
:is(.dv-stops__gap, .os-stops__gap) :is(.dv-stops__rail, .os-stops__rail) { align-self: stretch; }
:is(.dv-stops__gap, .os-stops__gap) :is(.dv-stops__line, .os-stops__line) {
  flex: 1; width: 2px; min-height: 0; margin: 0;
  background: var(--hairline); transition: background .14s;
}
:is(.dv-stops__gap, .os-stops__gap).is-hover :is(.dv-stops__line, .os-stops__line) { background: var(--accent-border); }
:is(.dv-stops__reveal, .os-stops__reveal) {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 0 12px;
  opacity: 0; transition: opacity .14s;
}
:is(.dv-stops__gap, .os-stops__gap).is-hover :is(.dv-stops__reveal, .os-stops__reveal) { opacity: 1; transition-delay: .03s; }
:is(.dv-stops__reveal, .os-stops__reveal) :is(.rule, .os-rule) { flex: 1; height: 0; border-top: 1px solid var(--hairline); }
:is(.dv-stops__insert, .os-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;
}
:is(.dv-stops__insert, .os-stops__insert):hover { background: var(--accent-soft); }
:is(.dv-stops__gap-form, .os-stops__gap-form) {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 8px 12px;
}
/* ── Add-stop placeholder / empty state ───────────────────────────────────── */
:is(.dv-stops__add, .os-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;
}
:is(.dv-stops__add, .os-stops__add):hover { border-color: var(--accent-border); background: var(--surface-alt); }
:is(.dv-stops__add--empty, .os-stops__add--empty) { padding: 20px 22px; }
:is(.dv-stops__add, .os-stops__add) :is(.ic, .os-ic) { display: flex; align-items: center; color: var(--muted-2); flex-shrink: 0; }
:is(.dv-stops__add, .os-stops__add):hover :is(.ic, .os-ic) { color: var(--accent); }
:is(.dv-stops__add-txt, .os-stops__add-txt) { display: flex; flex-direction: column; min-width: 0; }
:is(.dv-stops__add-t, .os-stops__add-t) {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink);
}
:is(.dv-stops__add-s, .os-stops__add-s) { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
:is(.dv-stops__endcap, .os-stops__endcap) { display: none; }
:is(.dv-stops__endcap, .os-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. */
:is(.dv-select--inline, .os-select--inline) { position: relative; display: block; }
:is(.dv-select--inline, .os-select--inline) > select {
  width: 100%;
  min-height: 46px;
  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;
  /* Kill the @tailwindcss/forms select chevron (a hardcoded gray SVG painted on
     every <select>) so it doesn't double up with our Lucide .os-select__chevron.
     `appearance:none` removes the NATIVE arrow but not this background image. */
  background-image: none;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
:is(.dv-select--inline, .os-select--inline) > select:hover { border-color: var(--accent); }
:is(.dv-select--inline, .os-select--inline) > select:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
:is(.dv-select--inline, .os-select--inline) :is(.dv-select__chevron, .os-select__chevron) {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); display: flex;
}
:is(.dv-stops__time-input, .os-stops__time-input) {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
:is(.dv-stops__time-input, .os-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. */
:is(.dv-stops__row, .os-stops__row)[draggable] { outline: none; }
:is(.dv-stops__row, .os-stops__row)[draggable]:focus-visible :is(.dv-stops__card--stop, .os-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). */
:is(.dv-stops__row, .os-stops__row).is-dragging { opacity: 0.5; }
/* Moved-row pulse (signature motion, carried from dashboard's reorder pulse). */
:is(.dv-stops__row--pulse, .os-stops__row--pulse) :is(.dv-stops__card--stop, .os-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). */
:is(.dv-stops__act--move, .os-stops__act--move) svg { flex-shrink: 0; }
:is(.dv-stops__act, .os-stops__act)[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.dv-stops__act--move, .os-stops__act--move) { opacity: 0; transition: opacity .12s; }
  :is(.dv-stops__card--stop, .os-stops__card--stop):hover :is(.dv-stops__act--move, .os-stops__act--move), :is(.dv-stops__row, .os-stops__row)[draggable]:focus-visible :is(.dv-stops__act--move, .os-stops__act--move), :is(.dv-stops__act--move, .os-stops__act--move):focus-visible { opacity: 1; }
}
@media (pointer: coarse) {
  :is(.dv-stops__act--move, .os-stops__act--move) { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.dv-stops__row--pulse, .os-stops__row--pulse) :is(.dv-stops__card--stop, .os-stops__card--stop) { animation: none; }
}
/* Off-screen live region for reorder announcements. */
:is(.dv-visually-hidden, .os-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. */
:is(.dv-stops__gap, .os-stops__gap):hover { min-height: 46px; }
:is(.dv-stops__gap, .os-stops__gap):hover :is(.dv-stops__line, .os-stops__line) { background: var(--accent-border); }
:is(.dv-stops__gap, .os-stops__gap):hover :is(.dv-stops__reveal, .os-stops__reveal), :is(.dv-stops__gap, .os-stops__gap):focus-within :is(.dv-stops__reveal, .os-stops__reveal) { opacity: 1; transition-delay: .03s; }
:is(.dv-stops__gap, .os-stops__gap):focus-within { min-height: 46px; }
/* ─────────────────────────────────────────────────────────────────────
   os-meter — a slim horizontal coverage/progress bar.

   Canonical component for "X% of a module's cases are covered" (QA landing).
   A subtle surface track with an accent fill whose width is DATA-DRIVEN via
   the `--os-meter-fill` custom property (set inline at the call site, 0–100%),
   so no literal `style="width: …"` is ever hand-specced.

   Anatomy:
     .os-meter          → the track (fixed height, rounded, clips the fill)
     .os-meter__fill    → the accent fill; width = var(--os-meter-fill)

   Usage:
     <div class="os-meter" aria-label="42% covered">
       <div class="os-meter__fill" style="--os-meter-fill: 42%"></div>
     </div>
   ───────────────────────────────────────────────────────────────────── */
.os-meter {
  --os-meter-fill: 0%;
  height: 7px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  /* Faint gauge outline so an EMPTY track reads as "measured, 0%" rather than
     "no data / not rendered". The minimum state carries meaning. */
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.os-meter__fill {
  display: block;
  height: 100%;
  width: var(--os-meter-fill);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
/* ── Meter card — a coverage-FIRST nav card (QA module grid).
   Coverage % is the hero figure; the module name is a readable title; the
   meter + covered/total fraction are supporting detail. Built on the boxed
   `.os-stat-card--interactive` shell (whole-card link), overriding only the
   internal rhythm so the KPI stat-card's "tiny label / big value" order is
   inverted into "title → hero % → gauge". */
.os-meter-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.os-meter-card__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.os-meter-card__code {
  flex-shrink: 0;
}
.os-meter-card__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
/* Neutralise the stat-card value/sub top margins — the flex gap owns spacing. */
.os-meter-card__metric .os-stat-card-value,
.os-meter-card__metric .os-stat-card-sub {
  margin-top: 0;
}
/* run_logsheet.css — person-first Return>Log-dives matrix (sticky name/sign
   columns, two-tier dive-group header), sticky close-bar, and the drawer
   sign/switch/field form. PROMOTION CANDIDATE → os-ds. Token-clean. */
/* PROMOTION CANDIDATE → os-ds: person-first logsheet matrix, close-bar, drawer sign/switch. App-owned until coordinated with the os-ds gem session (v1.3.0 pinned). */
/* ══════════════ side-panel DRAWER chrome ══════════════
   Fixed scrim + right-anchored panel that slides in on `.is-open` (toggled by
   logsheet_controller). Named .dv-drawer to avoid the os-ds `.side-drawer`
   scroll-container utility; the inner body is the os-ds `.side-panel`. Ported
   from the by-person.html mockup, tokenised. */
.dv-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
/* A dv-select opened inside the drawer (e.g. the Guide field) escapes its
   overflow by rendering its .os-pop menu on <body> at z-index 30 (os-ds). Our
   drawer sits at z-index 80, so that menu opened BEHIND the panel and read as
   "the dropdown won't open". The controller only lifts the menu into a
   <dialog open> host (top layer); this drawer is a plain high-z overlay, so
   scope a lift here — only while a drawer is open, so no other dv-select is
   touched. */
body:has(.dv-drawer.is-open) .os-pop { z-index: 90; }
.dv-drawer__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
}
.dv-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(520px, 94%);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  transform: translateX(100%);
  transition: transform 0.24s var(--ease-out-quart);
  display: flex;
  flex-direction: column;
}
/* the lazy turbo-frame + its .side-panel body fill the panel height */
.dv-drawer__panel > turbo-frame,
.dv-drawer__panel .side-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}
/* The drawer body scrolls; header + action bar stay pinned. The per-diver form
   wraps the body + action-bar, so it too must be a flex column that fills, or
   the body can't grow/scroll and the sign-off section clips off the bottom. */
.dv-drawer .side-panel > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dv-drawer .side-panel__header,
.dv-drawer .side-panel__action-bar { flex: 0 0 auto; }
.dv-drawer .side-panel__body { flex: 1; min-height: 0; overflow-y: auto; }
.dv-drawer.is-open {
  pointer-events: auto;
}
.dv-drawer.is-open .dv-drawer__scrim {
  opacity: 1;
}
.dv-drawer.is-open .dv-drawer__panel {
  transform: translateX(0);
}
/* ══════════════ RETURN panel — width driven by dive-stop count ══════════════
   The whole panel (callout + matrix card + close-bar) is exactly as wide as the
   matrix needs for N dive stops — name column + N dive-groups + sign column —
   so the chrome hugs the table instead of a narrow card floating in a full-width
   bar. Capped at the available width; past ~3 stops it exceeds most screens and
   the matrix card scrolls horizontally. The column widths live here as the
   single source of truth (kept in sync with the cell rules below). */
.dv-return-panel {
  --dv-col-name: 248px;
  --dv-col-group: 310px; /* M 54 + Bar 54 + O₂ 54 + In/Out 148 */
  --dv-col-sign: 108px;
  --dv-stops: 2;
  width: calc(var(--dv-col-name) + var(--dv-col-group) * var(--dv-stops) + var(--dv-col-sign));
  max-width: 100%;
  margin-inline: auto; /* centre the panel in the available width */
}
.dv-return-panel[data-stops="1"] { --dv-stops: 1; }
.dv-return-panel[data-stops="2"] { --dv-stops: 2; }
.dv-return-panel[data-stops="3"] { --dv-stops: 3; }
.dv-return-panel[data-stops="4"] { --dv-stops: 4; }
.dv-return-panel[data-stops="5"] { --dv-stops: 5; }
.dv-return-panel[data-stops="6"] { --dv-stops: 6; }
/* Chrome fills the panel; only the matrix card drives/absorbs overflow. */
.dv-return-panel > .os-tabnav,
.dv-return-panel .os-callout,
.dv-return-panel .dv-close-bar { width: 100%; box-sizing: border-box; }
/* ══════════════ person-first LOGSHEET MATRIX ══════════════
   Sticky diver name (left) + sign (right) columns; the dive-group numeric
   columns scroll horizontally between them. Ported verbatim in structure from
   the by-person.html mockup, renamed to the .dv-* vocabulary and re-tokenised
   (every literal palette value → its semantic token; scroll-shadow gradients
   use color-mix over var(--ink) instead of a raw rgba). */
.dv-logsheet-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  /* Dynamic width: the bordered card hugs the table's content width (no dead
     space inside the border) up to the available width; when the dives outgrow
     it, the card caps at 100% and scrolls horizontally instead. */
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}
.dv-logsheet {
  border-collapse: collapse;
  /* Content-sized, not stretched to fill: each column takes its defined width
     (below) and the table is the sum of them. In wide mode this leaves clean
     empty space on the right instead of ballooning every column; when the
     dives outgrow the container the wrap scrolls. */
  width: -moz-max-content;
  width: max-content;
}
.dv-logsheet thead tr { background: var(--canvas); }
.dv-logsheet thead tr:last-child { border-bottom: 1px solid var(--hairline); }
.dv-logsheet th {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: left;
  padding: 12px 14px;
  white-space: nowrap;
}
.dv-logsheet tbody tr {
  border-bottom: 1px solid var(--hairline-2);
  cursor: pointer;
}
.dv-logsheet tbody tr:last-child { border-bottom: none; }
.dv-logsheet tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dv-logsheet td { padding: 11px 14px; vertical-align: middle; }
.dv-logsheet tr.is-absent-all { opacity: .5; }
/* sticky name column (left) */
.dv-logsheet__name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  width: 248px;
  max-width: 248px;
}
.dv-logsheet thead .dv-logsheet__name { background: var(--canvas); }
.dv-logsheet tbody tr:hover .dv-logsheet__name { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dv-logsheet__name::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 16px;
  transform: translateX(100%);
  pointer-events: none;
  background: linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.dv-logsheet-wrap.is-scroll .dv-logsheet__name::after { opacity: 1; }
.dv-logsheet__name-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.dv-logsheet__name-txt { min-width: 0; flex: 1; }
/* Cap long names to the fixed column width — ellipsize instead of ballooning
   the pinned column (and pushing the whole matrix wider). */
.dv-logsheet__name-txt .os-table__primary,
.dv-logsheet__name-txt .os-table__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* two-tier logsheet header — dive-spot group over fixed field sub-columns */
.dv-logsheet thead .dv-logsheet__grp {
  text-align: center;
  padding: 11px 8px 8px;
  border-left: 1px solid var(--hairline);
}
.dv-logsheet__grp-sub {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-2xs);
  color: var(--muted-2);
}
.dv-logsheet thead tr.dv-logsheet__subrow th {
  padding: 6px 8px 9px;
  text-align: right;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--muted-2);
}
.dv-logsheet thead tr.dv-logsheet__subrow th.is-gstart { border-left: 1px solid var(--hairline); }
.dv-logsheet thead tr.dv-logsheet__subrow th sub { font-size: .8em; }
/* numeric value cells — Geist Mono figures under fixed sub-columns.
   `.dv-logsheet td.dv-logsheet__num` out-specifies the generic `.dv-logsheet td`
   padding so the numeric cells keep their tight 8px sides. Widths are border-box,
   so the content area = width − 16px (e.g. In/Out = 136 − 16 = 120px of value). */
.dv-logsheet td.dv-logsheet__num {
  text-align: right;
  padding: 11px 8px;
  width: 54px;
}
.dv-logsheet__num.is-gstart { border-left: 1px solid var(--hairline); }
/* In/Out is the last cell of each dive group — extra right padding gives the
   time value breathing room before the group divider (width 148 keeps the
   value's content at ~120px). The header cell matches so they stay aligned. */
.dv-logsheet td.dv-logsheet__num.is-io { width: 148px; padding-right: 20px; }
.dv-logsheet thead tr.dv-logsheet__subrow th.is-io { padding-right: 20px; }
.dv-logsheet__fig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--ink);
  white-space: nowrap;
}
.dv-logsheet__fig.is-empty { color: var(--muted-2); }
/* mobile-only summary body + chevron — hidden on desktop/tablet */
.dv-logsheet__mcard { display: none; }
.dv-logsheet__mchev { display: none; }
/* absent span cell (colspan across a dive group) */
.dv-logsheet__absent {
  text-align: center;
  border-left: 1px solid var(--hairline);
}
.dv-logsheet__chip-absent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cancelled);
  background: var(--cancelled-bg);
  border: 1px solid var(--cancelled-border);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}
.dv-logsheet__chip-absent svg { width: 12px; height: 12px; }
/* sticky sign column (right) */
.dv-logsheet__sign {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  text-align: right;
  width: 108px;
}
.dv-logsheet thead .dv-logsheet__sign { background: var(--canvas); }
.dv-logsheet tbody tr:hover .dv-logsheet__sign { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dv-logsheet__sign::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  transform: translateX(-100%);
  pointer-events: none;
  background: linear-gradient(to left, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.dv-logsheet-wrap.is-scroll .dv-logsheet__sign::before { opacity: 1; }
.dv-logsheet__sig-mini {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-strong);
}
/* ══════════════ sticky close bar ══════════════ */
.dv-close-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -6px 16px -12px color-mix(in srgb, var(--ink) 20%, transparent);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.dv-close-bar__stats {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  flex-wrap: wrap;
}
.dv-cstat { display: flex; align-items: baseline; gap: 7px; }
.dv-cstat__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.dv-cstat__n--good { color: var(--confirmed); }
.dv-cstat__n--warn { color: var(--cancelled); }
.dv-cstat__l { font-size: var(--text-xs); color: var(--muted); }
/* ══════════════ drawer sign / switch / field form ══════════════
   Scoped under .dv-form-section so these local field rules never clobber the
   global os-ds .dv-field / .os-field form component. */
.dv-form-section { margin-bottom: 22px; }
.dv-form-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dv-form-section__badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dv-form-section__badge svg { width: 15px; height: 15px; }
.dv-field-grid {
  display: grid;
  /* minmax(0, 1fr) — not 1fr — so the columns can shrink below the inputs'
     intrinsic (size-attribute) width; otherwise the grid overflows on narrow
     drawers (the fields would blow out to ~200px each). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dv-field-grid.is-disabled { opacity: .4; pointer-events: none; }
/* Full-width field in the 2-col grid (e.g. the Guide dv-select). */
.dv-field-grid .dv-field--wide { grid-column: 1 / -1; }
.dv-form-section .dv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dv-form-section .dv-field label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted-2);
}
.dv-form-section .dv-field__in {
  min-height: 46px;
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}
.dv-form-section .dv-field__in:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}
.dv-form-section .dv-field__in::-moz-placeholder {
  font-family: var(--font-sans);
  color: var(--muted-2);
}
.dv-form-section .dv-field__in::placeholder {
  font-family: var(--font-sans);
  color: var(--muted-2);
}
.dv-form-section .dv-field__in--text { font-family: var(--font-sans); }
.dv-abs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-top: 12px;
}
.dv-abs-row.on {
  background: var(--cancelled-bg);
  border-color: var(--cancelled-border);
}
.dv-abs-row__label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: 500;
  color: var(--ink);
}
.dv-switch {
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.dv-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform .15s;
  box-shadow: var(--shadow-sm);
}
.dv-switch.on { background: var(--cancelled); }
.dv-switch.on::after { transform: translateX(18px); }
.dv-sign-box {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  background: var(--canvas);
}
.dv-sign-box.signed {
  border-style: solid;
  background: var(--confirmed-bg);
  border-color: var(--confirmed-border);
}
.dv-sign-scrawl {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  color: var(--accent-strong);
  min-height: 34px;
}
.dv-sign-scrawl.is-empty { color: var(--muted-2); }
/* Drawer signature pad canvas (reuses the .sig-* engine styles + signature
   controller). Class instead of an inline style so the canvas sizes cleanly. */
.dv-sign-frame { position: relative; background: var(--surface); }
.dv-sign-canvas { display: block; width: 100%; height: 132px; touch-action: none; }
.dv-sign-actions { display: flex; align-items: center; gap: 8px; }
.dv-signed-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--confirmed); font-weight: 500; }
/* Signed view — the captured signature shown clearly, with a Re-sign button
   that swaps in the drawing canvas (.dv-sign-edit). */
.dv-sign-view,
.dv-sign-edit { display: block; }
.dv-sign-view[hidden],
.dv-sign-edit[hidden] { display: none; }
/* Match the waiver-form signature display: neutral surface + hairline, not a
   status colour (app/views/account/waiver_forms/show.html.erb). */
.dv-sign-view__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dv-sign-view__img { max-height: 88px; max-width: 100%; }
.dv-sign-view__typed {
  font-family: "Brush Script MT", cursive;
  font-size: var(--text-2xl);
  color: var(--ink);
}
.dv-sign-view__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
/* Drawer loading skeleton — swapped into the turbo-frame while the per-diver
   body fetches. Mirrors the diver form's shape (header + two stop blocks + a
   sign row) using the os-ds `.loading-state` shimmer bars, so the panel reads
   as content arriving the instant it slides open (matching the booking
   side-panel), never a blank window or a dead spinner. */
.dv-drawer-skel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
.dv-drawer-skel__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dv-drawer-skel__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.dv-drawer-skel__block,
.dv-drawer-skel__foot { margin: 0; }
.dv-drawer-skel__foot { margin-top: auto; }
/* ══════════════ mobile card-collapse (≤640px) ══════════════
   Matrix → one summary card per diver: the desktop numeric cells hide and the
   grouped .dv-logsheet__mcard renders instead — each dive labelled ONCE with a
   dense stat strip. The whole card taps through to the drawer to edit. */
@media (max-width: 640px) {
  /* Full-width on mobile — override the desktop content-width panel + wrap so the
     stacked diver cards fill the screen instead of shrinking to their content. */
  .dv-return-panel { width: 100%; margin-inline: 0; }
  .dv-logsheet-wrap { border: 0; background: transparent; overflow: visible; width: auto; max-width: none; }
  .dv-logsheet { min-width: 0; width: 100%; display: block; }
  .dv-logsheet thead { display: none; }
  .dv-logsheet tbody { display: block; }
  .dv-logsheet tbody tr {
    display: block;
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }
  .dv-logsheet tbody tr:active { background: var(--accent-soft); }
  .dv-logsheet tbody tr:hover { background: var(--surface); }

  /* desktop grid cells: gone on mobile */
  .dv-logsheet td.dv-logsheet__num,
  .dv-logsheet td.dv-logsheet__absent { display: none !important; }

  /* name header row */
  .dv-logsheet td.dv-logsheet__name {
    display: block;
    position: static;
    min-width: 0;
    width: auto;
    max-width: none;
    background: transparent;
    padding: 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding-bottom: 10px !important;
    margin-bottom: 2px;
  }
  .dv-logsheet td.dv-logsheet__name::before { content: none; }
  .dv-logsheet__mchev {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: var(--muted-2);
  }
  .dv-logsheet__mchev svg { width: 19px; height: 19px; }

  /* grouped summary body */
  .dv-logsheet td.dv-logsheet__mcard {
    display: block;
    padding: 0 !important;
    border: 0 !important;
  }
  .dv-logsheet td.dv-logsheet__mcard::before { content: none; }
  .dv-mdive { padding: 10px 0; }
  .dv-mdive + .dv-mdive { border-top: 1px solid var(--hairline-2); }
  .dv-mdive__h {
    margin-bottom: 7px;
    color: var(--muted-2);
    display: flex;
    gap: 7px;
    align-items: baseline;
  }
  .dv-mdive__t {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-2);
    font-family: var(--font-mono);
  }
  .dv-mstat {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .dv-mstat__u { display: flex; flex-direction: column; gap: 2px; }
  .dv-mstat .dv-logsheet__fig {
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.1;
  }
  .dv-mstat__us {
    font-size: var(--text-xs);
    color: var(--muted-2);
    margin-left: 1px;
    font-weight: 400;
  }
  .dv-mstat__ul {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted-2);
    font-weight: 600;
  }
  .dv-mtime { margin-top: 6px; font-family: var(--font-mono); }

  /* sign footer row — reuse ::before as the "Sign" label */
  .dv-logsheet td.dv-logsheet__sign {
    display: flex;
    position: static;
    width: auto;
    max-width: none;
    background: transparent;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--hairline) !important;
    padding: 10px 0 0 !important;
    margin-top: 8px;
    text-align: right;
  }
  /* No sticky-column hover tint on the stacked mobile cards. */
  .dv-logsheet tbody tr:hover .dv-logsheet__name,
  .dv-logsheet tbody tr:hover .dv-logsheet__sign { background: transparent; }
  .dv-logsheet td.dv-logsheet__sign::before {
    content: attr(data-label);
    position: static;
    transform: none;
    width: auto;
    background: none;
    opacity: 1;
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .dv-logsheet__name::after { display: none; }

  .dv-close-bar { padding: 12px 14px; }
  /* Full-bleed drawer on phones (no scrim strip). */
  .dv-drawer__panel { width: 100%; }
}
/* ══════════════ Running screen — log-later default (boat out) ══════════════
   The "laptop closed" state: a calm spinner + Returned/Emergency + an optional
   ghost link to live logging. Mirrors the log-later prototype's `running` frame. */
.run-running {
  text-align: center;
  max-width: 520px;
  margin: 8px auto 0;
  padding: 32px 20px;
}
.run-running__ring {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid var(--hairline-strong);
  border-top-color: var(--accent);
  animation: run-running-spin 2.4s linear infinite;
}
@keyframes run-running-spin { to { transform: rotate(360deg); } }
.run-running__title { margin-top: 12px; }
.run-running__lead { color: var(--muted); margin: 8px auto 24px; max-width: 46ch; }
.run-running__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.run-running__optional { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .run-running__ring { animation: none; } }
/* The trip-page "Trip is running" info banner: spin its leading loader-circle
   icon so the running state reads as live at a glance. transform-origin:center
   keeps it rotating in place (SVGs otherwise pivot oddly). */
.run-live-banner .dv-callout__icon svg {
  animation: run-running-spin 0.9s linear infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) { .run-live-banner .dv-callout__icon svg { animation: none; } }
/* ── 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).
   ────────────────────────────────────────────────────────────────────────── */
.os-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;
}
.os-avatar--xs { width: 28px; height: 28px; font-size: var(--text-2xs); }
.os-avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.os-avatar--lg { width: 56px; height: 56px; font-size: var(--text-xl); }
/* Neutral fallback (no initials) */
.os-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).
   ────────────────────────────────────────────────────────────────────────── */
.os-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%;
}
.os-chip--entity:not(:has(.os-chip__x)) { padding-right: 12px; }
.os-chip--entity .os-chip__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.os-chip__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-chip__meta {
  font-size: var(--text-2xs);
  color: var(--muted-2);
  white-space: nowrap;
}
.os-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;
}
.os-chip__x:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.os-chip__x :is(.lucide, .os-lucide) { display: block; }
/* ── .os-chip--sm — compact single-line dismissible pill ────────────────────
   A lighter alternative to --entity for simple one-line tags (dietary flags,
   filters, selected options) where the name/meta stack of the entity chip
   reads as cramped. Single line, tighter padding, a smaller ✕. Pairs with the
   same .os-chip__x remove control. Token-only.
   Promoted from arena-ops (HotelOS) 2026-07-25. */
.os-chip--sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  max-width: 100%;
}
.os-chip--sm:not(:has(.os-chip__x)) { padding-right: 10px; }
.os-chip--sm .os-chip__x { width: 16px; height: 16px; }
/* ═══════════════════════════════════════════════════════════════════════
   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)
   ═══════════════════════════════════════════════════════════════════════ */
.os-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);
}
.os-bulkbar__count {
  font-weight: 600;
  font-size: var(--text-xs);
  padding-right: 4px;
}
.os-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;
}
.os-bulkbar__action:hover { background: rgba(255, 255, 255, .22); }
.os-bulkbar__action :is(.lucide, .os-lucide) { opacity: .9; }
.os-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;
}
.os-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 90svh (see the note on .dv-sheet__panel) 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
   ═══════════════════════════════════════════════════════════════════════ */
.os-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);
}
.os-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}
.os-sheet__panel {
  width: 100%;
  /* `svh`, not `vh` or `dvh` — and on a bottom sheet the distinction is not
     cosmetic. `vh` is the LARGE viewport (toolbar hidden), so with the toolbar
     showing a 90vh panel is taller than the visible area and `.dv-sheet__foot`
     — the action row — sits behind the browser chrome on the one component
     type where the actions matter most.

     `dvh` would track the toolbar live and repaint the panel mid-scroll.
     `svh` is the small viewport (toolbar shown), so the sheet always fits.
     `vh` stays first as the fallback; both svh/dvh are Safari 15.4+.
     See docs/mobile-primitives.md §1. */
  max-height: 90vh;
  max-height: 90svh;
  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);
}
.os-sheet.is-open .os-sheet__panel { transform: translateY(0); }
.os-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
  margin: 10px auto 4px;
  flex-shrink: 0;
}
.os-sheet__head {
  padding: 8px 20px 12px;
  border-bottom: 1px solid var(--hairline);
}
.os-sheet__head .os-eyebrow { color: var(--muted-2); }
.os-sheet__body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.os-sheet__body > .os-eyebrow { display: block; color: var(--muted-2); margin-bottom: 4px; }
.os-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);
}
.os-sheet__foot > .os-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) {
  .os-sheet__panel { max-width: 440px; margin: 0 auto; border-radius: var(--radius-xl); }
  .os-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).
   ────────────────────────────────────────────────────────────────────────── */
:is(.dv-gear-slot-grid, .os-gear-slot-grid) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 24px;
}
@media (min-width: 560px) {
  :is(.dv-gear-slot-grid, .os-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). */
:is(.side-panel, .os-side-panel) :is(.dv-gear-slot-grid, .os-gear-slot-grid) { grid-template-columns: 1fr; }
:is(.dv-gear-slot, .os-gear-slot) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* Grid cells stretch to the tallest slot in their row, so a slot WITH size
   pills is taller than one without (e.g. Fin vs Regulator). Pin the field to
   the bottom of the cell so every slot's dropdown lands on the same baseline
   across the 2-up grid — the pills float at the top, the inputs align in a
   clean horizontal line. The last child is the <select>/.diveos-input. */
:is(.dv-gear-slot, .os-gear-slot) > :last-child {
  margin-top: auto;
}
:is(.dv-gear-slot__head, .os-gear-slot__head) {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.dv-gear-slot__icon, .os-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);
}
:is(.dv-gear-slot__icon, .os-gear-slot__icon) svg { width: 15px; height: 15px; }
:is(.dv-gear-slot__name, .os-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. */
:is(.dv-gear-slot, .os-gear-slot) :is(.dv-segment, .os-segment) {
  flex-wrap: wrap;
  gap: 6px;
}
:is(.dv-gear-slot, .os-gear-slot) :is(.dv-segment__option, .os-segment__option) {
  flex: 0 0 auto;
}
:is(.dv-gear-slot, .os-gear-slot) :is(.dv-segment__label, .os-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)
------------------------------------------------------------------------------- */
.os-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.os-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;
}
.os-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;
}
.os-accordion__head:hover { background: var(--surface-alt); }
.os-accordion__head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.os-accordion__item.is-open .os-accordion__head {
  border-bottom: 1px solid var(--hairline);
}
.os-accordion__icon {
  display: inline-flex;
  color: var(--muted-2);
  flex-shrink: 0;
}
.os-accordion__title {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  font-size: var(--text-base, 15px);
  color: var(--ink);
}
.os-accordion__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12.5px);
  color: var(--muted);
  white-space: nowrap;
}
.os-accordion__chev {
  display: inline-flex;
  color: var(--muted-2);
  flex-shrink: 0;
  transition: transform .18s ease;
}
.os-accordion__item.is-open .os-accordion__chev { transform: rotate(180deg); }
.os-accordion__body { padding: 4px 18px 16px; }
.os-accordion__item:not(.is-open) .os-accordion__body { display: none; }
/* Right-aligned actions strip inside a body (e.g. "Return all"). */
.os-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). */
.os-msel { position: relative; }
.os-pop {
  position: absolute;
  z-index: 40; top: calc(100% + 8px); left: 0;
  width: var(--width-xs);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.os-pop[hidden] { display: none; }
.os-pop__search {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--hairline);
}
.os-pop__search :is(.lucide, .os-lucide) { color: var(--muted-2); flex-shrink: 0; }
.os-pop__search input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.os-pop__search input::-moz-placeholder { color: var(--muted-2); }
.os-pop__search input::placeholder { color: var(--muted-2); }
.os-pop__list { max-height: 268px; overflow-y: auto; padding: 4px; }
.os-pop__empty { padding: 16px; text-align: center; }
/* Option row — works as a bare <button> or a button_to form's button. */
.os-pop__list form { display: contents; }
.os-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;
}
.os-opt:hover { background: var(--hover-warm); }
.os-opt__body { flex: 1; min-width: 0; line-height: 1.25; }
.os-opt__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.os-opt__meta { font-size: var(--text-2xs); color: var(--muted-2); }
.os-opt__meta.is-off { color: var(--cancelled); }
.os-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;
}
.os-opt.is-on .os-optcheck { background: var(--accent); border-color: var(--accent); }
.os-optcheck :is(.lucide, .os-lucide) { opacity: 0; }
.os-opt.is-on .os-optcheck :is(.lucide, .os-lucide) { opacity: 1; }
.os-pop__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-top: 1px solid var(--hairline);
}
.os-pop__foot :is(.cnt, .os-cnt) { font-size: var(--text-2xs); color: var(--muted); }
.os-pop__foot :is(.cnt, .os-cnt) :is(.mono, .os-mono) { font-family: var(--font-mono); }
@media (max-width: 1024px) {
  .os-pop { width: min(var(--width-xs), calc(100vw - 48px)); }
}
/* ─── Popover dialog (.os-popover) ───────────────────────────────────────────
   A small anchored FORM DIALOG — head / body / foot in a bordered panel,
   role="dialog". Distinct from .os-pop above (a select/search DROPDOWN): this
   is for a focused mini-form (edit a flight, add a payment) rather than picking
   an option. Promoted from arena-ops (HotelOS) 2026-07-25. Token-only. */
.os-popover {
  width: 100%;
  max-width: var(--width-sm);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
}
.os-popover__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.os-popover__body {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.os-popover__body--flush { padding: 0; }
.os-popover__sep { height: 1px; background: var(--hairline); margin: var(--space-1) 0; }
.os-popover__foot {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
}
.os-popover__foot--bare { padding: var(--space-3) 0 0; border: none; }
/* profile_row — the shared person/entity row (avatar · name+meta · trailing
   status/action). os-ds v1.3.0 promoted it after DiveOS's `.bk-detail
   .waiver-diver-row` and arena's `.hos-occrow` proved to be the same rule.
   Consumed by account/bookings/_waiver_roster. Do NOT re-add a local copy. */
/* ─── Profile row (.os-profile-row) ──────────────────────────────────────────
   A person/entity row: avatar · name + meta · trailing status/action. The most
   repeated list shape in both products — guest capture, occupants, waiver
   divers, crew, agents, staff pickers.

   Promoted 2026-07-26 from arena-ops `.hos-occrow` (the fuller BEM version);
   dive-os had the same base rule as the page-scoped `.bk-detail
   .waiver-diver-row` (identical flex/gap/padding/border), and arena carried a
   second copy in its guest-portal sheet. One component, three implementations —
   this is the one.

   Structure:
     .os-profile-row            (or --link on an <a>, --pick on a <label>)
       .os-profile-row__avatar  (+ --alt / --empty)
       .os-profile-row__info
         .os-profile-row__name
         .os-profile-row__meta
       .os-profile-row__trail   (or __badges / __status)

   Domain colourings (a role pill, an id pill) stay in the consuming app —
   they are status vocabulary, not row structure. Token-only. */
.os-profile-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.os-profile-row:last-child { border-bottom: none; }
/* Whole row is a link — keeps the row's own type colour, tints on hover. */
.os-profile-row--link {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
}
.os-profile-row--link:hover { background: var(--accent-softer); }
.os-profile-row__avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-pill);
  /* Accent-derived, NOT a raw ramp stop: this shipped in v1.3.0 reading
     `--teal-900`, which the gem does not define. An unresolvable var() voids
     the WHOLE background declaration, so the avatar lost its fill and its
     white initials vanished — invisible in arena (which defines that token
     locally) and broken in dive-os. Gem components read gem tokens. */
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--surface);
}
/* --alt flips the gradient so adjacent rows read as different people. */
.os-profile-row__avatar--alt   { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); }
/* --empty: a placeholder person (not captured / unassigned). */
.os-profile-row__avatar--empty { background: var(--surface-alt); color: var(--muted-2); }
.os-profile-row__info { flex: 1; min-width: 0; }
.os-profile-row__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.os-profile-row__meta { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
/* Trailing zones — __trail for actions, __status for pills, __badges for both. */
.os-profile-row__trail,
.os-profile-row__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.os-profile-row__status { flex-wrap: wrap; }
.os-profile-row__badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex: none;
  flex-wrap: wrap;
}
/* The trailing "Open ›" affordance on a --link row. */
.os-profile-row__open {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}
/* ── --last: an explicit terminal row ───────────────────────────────────────
   `:last-child` is not enough when a control follows the list (a "view all"
   link after a capped roster) — the last ROW is then not the last CHILD.
   Requested by dive-os during the v1.4.0 adoption. */
.os-profile-row--last { border-bottom: none; }
/* ── __badges--columns: align trailing slots across rows ────────────────────
   The flex default lets each row size its own trailing block, so status pills
   drift out of alignment when labels differ in length ("Signed" vs "Valid
   waiver on file"). This switches to a grid whose track list the consumer
   sets, e.g. `style="--os-profile-row-badge-cols: 158px 80px"`. */
.os-profile-row__badges--columns {
  display: grid;
  grid-template-columns: var(--os-profile-row-badge-cols, auto auto);
  align-items: center;
}
/* NOTE: the --teal-900 shim profile_row.css needs is at the BOTTOM of this file.
   It cannot live here — postcss-import drops every @import that follows a
   non-@import statement, which silently deletes the rest of the bundle. */
/* 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) ──────────────────────────────────────── */
:is(.bw-cal-grid, .os-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. */
:is(.booking-wizard, .os-booking-wizard) :is(.bw-cal-grid, .os-bw-cal-grid) :is(.bg-blue-600, .os-bg-blue-600) {
  background-color: var(--accent) !important;
}
:is(.booking-wizard, .os-booking-wizard) :is(.bw-cal-grid, .os-bw-cal-grid) :is(.ring-blue-600, .os-ring-blue-600) {
  --tw-ring-color: var(--accent) !important;
}
:is(.booking-wizard, .os-booking-wizard) :is(.bw-cal-grid, .os-bw-cal-grid) :is(.text-blue-600, .os-text-blue-600) {
  color: var(--accent) !important;
}
:is(.booking-wizard, .os-booking-wizard) :is(.bw-cal-grid, .os-bw-cal-grid) :is(.hover, .os-hover)\:bg-blue-50:hover {
  background-color: var(--accent-soft) !important;
}
/* Selected-date chips + product prices the controllers inject in raw blue. */
:is(.booking-wizard, .os-booking-wizard) :is(.bg-blue-50, .os-bg-blue-50) { background-color: var(--accent-soft) !important; }
:is(.booking-wizard, .os-booking-wizard) :is(.border-blue-200, .os-border-blue-200) { border-color: var(--accent-border) !important; }
:is(.booking-wizard, .os-booking-wizard) :is(.text-blue-700, .os-text-blue-700), :is(.booking-wizard, .os-booking-wizard) :is(.text-blue-600, .os-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. */
:is(.booking-step-indicator, .os-booking-step-indicator) {
  background-color: var(--surface-alt);
  color: var(--muted);
  cursor: pointer;
}
/* Current step — accent fill + focus ring. (base_wizard JS toggles .active.) */
:is(.booking-step-indicator, .os-booking-step-indicator):is(.active, .os-active) {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.active, .os-active) :is(.bw-step-number, .os-bw-step-number) { display: inline !important; }
:is(.booking-step-indicator, .os-booking-step-indicator):is(.active, .os-active) :is(.bw-step-check, .os-bw-step-check) { display: none !important; }
/* Completed step — accent fill + checkmark. (base_wizard JS toggles .completed.) */
:is(.booking-step-indicator, .os-booking-step-indicator):is(.completed, .os-completed) {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none;
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.completed, .os-completed) :is(.bw-step-number, .os-bw-step-number) { display: none !important; }
:is(.booking-step-indicator, .os-booking-step-indicator):is(.completed, .os-completed) :is(.bw-step-check, .os-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). */
:is(.booking-step-indicator, .os-booking-step-indicator):is(.border-2, .os-border-2) {
  background-color: var(--surface-alt) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: none !important;
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.text-white, .os-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). */
:is(.booking-step-connector, .os-booking-step-connector) { background-color: var(--hairline); }
:is(.booking-step-connector, .os-booking-step-connector):is(.bg-accent, .os-bg-accent) { background-color: var(--accent) !important; }
/* ── Waiver signature field ─────────────────────────────────────────── */
/* Mode toggle (Draw / Type); the signature controller toggles .active. */
:is(.sig-mode-btn, .os-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;
}
:is(.sig-mode-btn, .os-sig-mode-btn):hover { background-color: var(--surface-alt); }
:is(.sig-mode-btn, .os-sig-mode-btn):is(.active, .os-active) {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}
/* Canvas — white surface with a subtle ruled guide line. */
:is(.sig-canvas-container, .os-sig-canvas-container) {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 39px, var(--hairline) 39px, var(--hairline) 40px
  );
}
:is(.sig-canvas, .os-sig-canvas) { cursor: crosshair; display: block; }
/* Typed signature — dashed field, cursive preview. */
:is(.sig-typed-input, .os-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);
}
:is(.sig-typed-input, .os-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. */
:is(.engine-body, .os-engine-body) :is(.btn-group, .os-btn-group) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
:is(.engine-body, .os-engine-body) :is(.btn-group, .os-btn-group) :is(.btn, .os-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;
}
:is(.engine-body, .os-engine-body) :is(.btn-group, .os-btn-group) :is(.btn-outline-secondary, .os-btn-outline-secondary):hover { background-color: var(--surface-alt); }
:is(.engine-body, .os-engine-body) :is(.btn-group, .os-btn-group) :is(.btn-primary, .os-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. */
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-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). */
:is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay):is(.hidden, .os-hidden) { display: none !important; }
:is(.engine-body, .os-engine-body) :is(.bw-modal-panel, .os-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) {
  :is(.engine-body, .os-engine-body) :is(.bw-modal-overlay, .os-bw-modal-overlay) { align-items: center; }
  :is(.engine-body, .os-engine-body) :is(.bw-modal-panel, .os-bw-modal-panel) {
    max-width: var(--bw-modal-max-width, 56rem);
    margin: 0 1rem;
    max-height: 85vh;
  }
}
:is(.bw-modal-grid, .os-bw-modal-grid) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 576px) {
  :is(.bw-modal-grid, .os-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).
   ─────────────────────────────────────────────────────────────────── */
:is(.toast-stack, .os-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;
}
:is(.toast-stack, .os-toast-stack):is(.tr, .os-tr) { top: 16px; right: 16px; }
:is(.toast, .os-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: os-toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
:is(.toast, .os-toast):is(.out, .os-out) { animation: os-toast-out 0.18s ease forwards; }
@keyframes os-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes os-toast-out {
  to {
    opacity: 0;
    transform: translateX(16px);
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -10px;
  }
}
:is(.toast__ic, .os-toast__ic) { flex-shrink: 0; margin-top: 1px; }
:is(.toast__ic, .os-toast__ic) svg { display: block; }
:is(.toast__body, .os-toast__body) { flex: 1; min-width: 0; }
:is(.toast__title, .os-toast__title) { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
:is(.toast__msg, .os-toast__msg) { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 1px; }
:is(.toast__x, .os-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;
}
:is(.toast__x, .os-toast__x) svg { display: block; }
:is(.toast__x, .os-toast__x):hover { background: var(--surface-alt, var(--gray-100)); color: var(--text-primary); }
:is(.toast__bar, .os-toast__bar) {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  animation: os-toast-shrink 4s linear forwards;
}
@keyframes os-toast-shrink {
  from { width: 100%; }
  to   { width: 0; }
}
/* status accents — generic notification semantics from tokens.css */
:is(.toast, .os-toast):is(.success, .os-success) { background: var(--green-100); border-color: var(--success-border); border-left-color: var(--success); }
:is(.toast, .os-toast):is(.success, .os-success) :is(.toast__ic, .os-toast__ic), :is(.toast, .os-toast):is(.success, .os-success) :is(.toast__bar, .os-toast__bar) { color: var(--success); }
:is(.toast, .os-toast):is(.error, .os-error) { background: var(--rose-100); border-color: var(--danger-border); border-left-color: var(--danger); }
:is(.toast, .os-toast):is(.error, .os-error) :is(.toast__ic, .os-toast__ic), :is(.toast, .os-toast):is(.error, .os-error) :is(.toast__bar, .os-toast__bar) { color: var(--danger); }
:is(.toast, .os-toast):is(.warning, .os-warning) { background: var(--amber-100); border-color: var(--warning-border); border-left-color: var(--warning); }
:is(.toast, .os-toast):is(.warning, .os-warning) :is(.toast__ic, .os-toast__ic), :is(.toast, .os-toast):is(.warning, .os-warning) :is(.toast__bar, .os-toast__bar) { color: var(--warning); }
:is(.toast, .os-toast):is(.info, .os-info) { background: var(--sky-100); border-color: var(--info-border); border-left-color: var(--info); }
:is(.toast, .os-toast):is(.info, .os-info) :is(.toast__ic, .os-toast__ic), :is(.toast, .os-toast):is(.info, .os-info) :is(.toast__bar, .os-toast__bar) { color: var(--info); }
@media (prefers-reduced-motion: reduce) {
  :is(.toast, .os-toast), :is(.toast, .os-toast):is(.out, .os-out) { animation-duration: 0.01ms; }
  :is(.toast__bar, .os-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. */
:is(.wv-share, .os-wv-share) {
  margin-top: 8px;
}
:is(.wv-share__toggle, .os-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;
}
:is(.wv-share__toggle, .os-wv-share__toggle):hover {
  color: var(--accent-strong);
}
:is(.wv-share__panel, .os-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;
}
:is(.wv-share__qr, .os-wv-share__qr) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px;
  line-height: 0;
}
:is(.wv-share__linkrow, .os-wv-share__linkrow) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
:is(.wv-share__url, .os-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;
}
:is(.wv-share__copy, .os-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;
}
:is(.wv-share__copy, .os-wv-share__copy):hover {
  background: var(--surface-alt);
}
:is(.wv-share__copy, .os-wv-share__copy):is(.copied, .os-copied) {
  color: var(--confirmed);
  border-color: var(--confirmed-border);
}
/* Waiver amendment ledger (#347) — the audit trail in the waiver show rail.
   "Ledger" direction: each amendment is a ledger entry hung off a 2px accent
   rule, with the value transitions set in the figure/mono face so a staff
   member can compare old against new down a column at a glance.

   Sits inside the 320px .hero-show__rail, so every measure here is tuned for
   that width. Tokens only — no raw hex, no px type. */
:is(.wv-ledger, .os-wv-ledger) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* An entry. The left rule carries recency: the newest amendment gets the
   accent, older ones a muted hairline. That encodes "most recent" without
   spending a badge or a component on it. */
:is(.wv-ledger__entry, .os-wv-ledger__entry) {
  border-left: 2px solid var(--hairline-strong);
  padding-left: 12px;
}
:is(.wv-ledger__entry--latest, .os-wv-ledger__entry--latest) {
  border-left-color: var(--accent);
}
/* Line 1 — absolute timestamp. Deliberately NOT mono: it is a label, not a
   value to compare, and the eyebrow role already sets 10px/uppercase/0.08em. */
:is(.wv-ledger__stamp, .os-wv-ledger__stamp) {
  display: block;
  margin-bottom: 2px;
}
/* Line 2 — who made the correction, plus an optional medical badge. */
:is(.wv-ledger__actor, .os-wv-ledger__actor) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}
/* The diffs. */
:is(.wv-ledger__diffs, .os-wv-ledger__diffs) {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:is(.wv-ledger__field, .os-wv-ledger__field) {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 1px;
}
/* Values get the mono face — this is the one place monospace earns its keep,
   because it column-aligns the before/after digits for comparison. */
:is(.wv-ledger__values, .os-wv-ledger__values) {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
:is(.wv-ledger__was, .os-wv-ledger__was) {
  color: var(--muted-2);
  text-decoration: line-through;
}
:is(.wv-ledger__arrow, .os-wv-ledger__arrow) {
  color: var(--muted-2);
  flex-shrink: 0;
}
:is(.wv-ledger__now, .os-wv-ledger__now) {
  color: var(--ink);
  font-weight: 600;
}
/* Divider between the factual diff and the human justification. */
:is(.wv-ledger__rule, .os-wv-ledger__rule) {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 10px 0;
}
/* Why it was changed. */
:is(.wv-ledger__why, .os-wv-ledger__why) {
  font-size: var(--text-xs);
  color: var(--ink);
}
:is(.wv-ledger__category, .os-wv-ledger__category) {
  margin-left: 6px;
}
/* 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). */
:is(.vessel-card, .os-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;
}
:is(.vessel-card, .os-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. */
:is(.vessel-illu, .os-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;
}
:is(.vessel-illu, .os-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;
}
:is(.vessel-illu, .os-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;
}
:is(.vessel-illu, .os-vessel-illu):is(.catamaran, .os-catamaran)::before {
  clip-path: polygon(0 0, 45% 0, 50% 100%, 55% 0, 100% 0, 100% 100%, 0 100%);
  height: 18px; bottom: 14px;
}
:is(.vessel-illu, .os-vessel-illu):is(.catamaran, .os-catamaran)::after { display: none; }
:is(.vessel-illu, .os-vessel-illu):is(.dhoni, .os-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). */
:is(.view-toggle, .os-view-toggle) {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
:is(.view-btn, .os-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;
}
:is(.view-btn, .os-view-btn):hover { color: var(--ink); background: var(--hairline-2); }
:is(.view-btn, .os-view-btn):is(.active, .os-active) { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
:is(.view-btn, .os-view-btn).is-disabled { cursor: not-allowed; }
:is(.view-btn, .os-view-btn).is-disabled:hover { color: var(--muted-2); background: transparent; }
/* ── Search field (toolbar) ───────────────────────────────────────────
   WL .search-wrap. Presentational (no fleet-search backend yet). */
:is(.fleet-search, .os-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;
}
:is(.fleet-search, .os-fleet-search) svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
:is(.fleet-search, .os-fleet-search) input {
  border: none; outline: none; background: transparent;
  font-size: var(--text-sm); color: var(--ink); font-family: var(--font-sans); width: 100%;
}
:is(.fleet-search, .os-fleet-search) input::-moz-placeholder { color: var(--muted); }
:is(.fleet-search, .os-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. */
:is(.type-card, .os-type-card) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
:is(.type-card, .os-type-card):hover { border-color: var(--hairline-strong); }
:is(.type-card, .os-type-card).is-on { background: var(--accent-soft); border-color: var(--accent-border); }
:is(.type-card, .os-type-card) :is(.swatch, .os-swatch) {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 8px; vertical-align: middle;
}
:is(.type-card, .os-type-card) :is(.tname, .os-tname) { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--ink); }
:is(.type-card, .os-type-card) :is(.tval, .os-tval)  { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--ink); margin-top: 6px; }
:is(.type-card, .os-type-card) :is(.tval, .os-tval) small { color: var(--muted); font-size: var(--text-xs); margin-left: 3px; }
:is(.type-card, .os-type-card) :is(.talert, .os-talert) { font-size: var(--text-2xs); font-weight: 500; color: var(--briefing); letter-spacing: 0.02em; margin-top: 4px; }
:is(.type-card, .os-type-card) :is(.talert--muted, .os-talert--muted) { color: var(--muted); }
:is(.type-card, .os-type-card).is-on :is(.talert, .os-talert) { color: var(--accent); }
/* ── Item ID with category color dot ──────────────────────────────────
   mono identifier preceded by an 8px rounded square in the category hue. */
:is(.item-id, .os-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;
}
:is(.item-id, .os-item-id)::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
:is(.item-id, .os-item-id):is(.t-tank, .os-t-tank)::before      { background: var(--cat-tank); }
:is(.item-id, .os-item-id):is(.t-bcd, .os-t-bcd)::before       { background: var(--cat-bcd); }
:is(.item-id, .os-item-id):is(.t-regulator, .os-t-regulator)::before { background: var(--cat-regulator); }
:is(.item-id, .os-item-id):is(.t-suit, .os-t-suit)::before      { background: var(--cat-suit); }
:is(.item-id, .os-item-id):is(.t-fin, .os-t-fin)::before       { background: var(--cat-fin); }
:is(.item-id, .os-item-id):is(.t-computer, .os-t-computer)::before  { background: var(--cat-computer); }
:is(.item-id, .os-item-id):is(.t-mask, .os-t-mask)::before      { background: var(--cat-mask); }
:is(.item-id, .os-item-id):is(.t-smb, .os-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. */
:is(.svc-cell, .os-svc-cell) { display: flex; flex-direction: column; gap: 2px; }
:is(.svc-cell, .os-svc-cell) :is(.l, .os-l) { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
:is(.svc-cell, .os-svc-cell) :is(.v, .os-v) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }
:is(.svc-cell, .os-svc-cell) :is(.v, .os-v):is(.warn, .os-warn)   { color: var(--briefing); }
:is(.svc-cell, .os-svc-cell) :is(.v, .os-v):is(.urgent, .os-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. */
:is(.gear-registry, .os-gear-registry):is(.dv-table-wrap, .os-table-wrap) { overflow-x: auto; }
:is(.gear-registry__stacked, .os-gear-registry__stacked) { display: none; }
@media (max-width: 899px) {
  :is(.gear-registry, .os-gear-registry) th:nth-child(4), :is(.gear-registry, .os-gear-registry) td:nth-child(4), :is(.gear-registry, .os-gear-registry) th:nth-child(5), :is(.gear-registry, .os-gear-registry) td:nth-child(5) { display: none; }
  :is(.gear-registry__stacked, .os-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 ─────────────────────────────────── */
:is(.ledger-table-row, .os-ledger-table-row) {
  transition: background 120ms ease-out;
}
:is(.ledger-table-row, .os-ledger-table-row):hover {
  background: var(--hover-warm, var(--canvas));
}
/* ── Amount colours ───────────────────────────────────────────────── */
:is(.ledger-amount--income, .os-ledger-amount--income) {
  color: var(--green-700, #15803d);
}
:is(.ledger-amount--refund, .os-ledger-amount--refund) {
  color: var(--red-600, #dc2626);
}
/* ── Payment method badge ─────────────────────────────────────────── */
:is(.ledger-method-badge, .os-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) */
:is(.ledger-method-badge--cash, .os-ledger-method-badge--cash)          { background: var(--confirmed-bg); border-color: var(--confirmed-border); color: var(--confirmed); }
:is(.ledger-method-badge--credit_card, .os-ledger-method-badge--credit_card), :is(.ledger-method-badge--debit_card, .os-ledger-method-badge--debit_card)    { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
:is(.ledger-method-badge--bank_transfer, .os-ledger-method-badge--bank_transfer) { background: var(--inwater-bg); border-color: var(--inwater-border); color: var(--inwater); }
:is(.ledger-method-badge--online_payment, .os-ledger-method-badge--online_payment){ background: var(--briefing-bg); border-color: var(--briefing-border); color: var(--briefing); }
:is(.ledger-method-badge--agent_credit, .os-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. */
:is(.ledger-close-card, .os-ledger-close-card) {
  padding: 16px 18px;
}
/* Review-first head — the "what's being locked" lead (left) and the Net for
   the day hero figure (right), so the operator scans the outcome before the
   itemised breakdown below. Wraps to stacked on narrow cards. */
:is(.ledger-close-card__head, .os-ledger-close-card__head) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.os-ledger-close-card__lead {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.os-ledger-close-card__net {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}
.os-ledger-close-card__net-fig {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
}
.os-ledger-close-card__net-fig--neg { color: var(--cancelled); }
/* Action bar — a natural card footer with the irreversibility note (left) and
   the primary/cancel controls (right). Optional steps above are collapsed by
   default, so this stays near the top / immediately reachable on load. */
:is(.ledger-close-card__actions, .os-ledger-close-card__actions) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.os-ledger-close-card__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.os-ledger-close-card__note :is(svg, .lucide) { color: var(--muted-2); flex-shrink: 0; }
.os-ledger-close-card__btns { display: inline-flex; align-items: center; gap: 10px; }
/* Optional-step disclosure — the collapsed card-reconciliation + drawer-count
   sections. Summary carries an icon title, an "Optional" badge, and a chevron
   that rotates when open. */
.os-ledger-close-card__form { display: grid; gap: 10px; }
.os-ledger-optional {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.os-ledger-optional__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.os-ledger-optional__summary::-webkit-details-marker { display: none; }
.os-ledger-optional__summary::marker { content: ""; }
.os-ledger-optional__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.os-ledger-optional__title :is(svg, .lucide) { color: var(--muted-2); flex-shrink: 0; }
.os-ledger-optional__flag { margin-left: auto; }
.os-ledger-optional__chevron { color: var(--muted-2); transition: transform .15s ease; }
.os-ledger-optional[open] .os-ledger-optional__chevron { transform: rotate(180deg); }
.os-ledger-optional__body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}
/* Gap-days — compact count+range summary is the callout title; the full date
   list collapses into this disclosure. */
.os-ledger-gap-days { margin-top: 8px; }
.os-ledger-gap-days__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
}
.os-ledger-gap-days__toggle::-webkit-details-marker { display: none; }
.os-ledger-gap-days__toggle::marker { content: ""; }
.os-ledger-gap-days__chevron { transition: transform .15s ease; }
.os-ledger-gap-days[open] .os-ledger-gap-days__chevron { transform: rotate(180deg); }
.os-ledger-gap-days__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
/* Live counted total per currency section (below the denomination rows). */
.os-ledger-drawer__foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 2px;
}
.os-ledger-drawer__count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.os-ledger-drawer__ref { color: var(--muted-2); }
:is(.ledger-drawer-count__head, .os-ledger-drawer-count__head) {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}
:is(.ledger-drawer, .os-ledger-drawer) {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  :is(.ledger-drawer, .os-ledger-drawer) { grid-template-columns: 1fr; }
}
:is(.ledger-drawer__section, .os-ledger-drawer__section) {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
}
:is(.ledger-drawer__cur, .os-ledger-drawer__cur) {
  margin-bottom: 10px;
}
:is(.ledger-drawer__rows, .os-ledger-drawer__rows) {
  display: grid;
  gap: 6px;
}
:is(.ledger-drawer__row, .os-ledger-drawer__row) {
  display: grid;
  grid-template-columns: 1fr 84px;
  align-items: center;
  gap: 10px;
  margin: 0;
}
:is(.ledger-drawer__denom, .os-ledger-drawer__denom) {
  color: var(--muted);
}
:is(.ledger-drawer__qty, .os-ledger-drawer__qty) {
  text-align: right;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* #312 — card reconciliation (POS statement vs recorded card) at close. */
:is(.ledger-card-recon, .os-ledger-card-recon) {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
:is(.ledger-card-recon__head, .os-ledger-card-recon__head) {
  display: grid;
  gap: 2px;
}
:is(.ledger-card-recon__body, .os-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;
}
:is(.ledger-card-recon__recorded, .os-ledger-card-recon__recorded) {
  display: grid;
  gap: 2px;
}
:is(.ledger-card-recon__field, .os-ledger-card-recon__field) {
  display: grid;
  gap: 4px;
  margin: 0;
}
:is(.ledger-card-recon__input-wrap, .os-ledger-card-recon__input-wrap) {
  position: relative;
  display: inline-flex;
  align-items: center;
}
:is(.ledger-card-recon__sym, .os-ledger-card-recon__sym) {
  position: absolute;
  left: 10px;
  color: var(--muted);
  pointer-events: none;
}
:is(.ledger-card-recon__input, .os-ledger-card-recon__input) {
  width: 140px;
  text-align: right;
  padding-left: 22px;
}
:is(.ledger-card-recon__variance, .os-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 ─────────────────────────────────────────────────────────── */
:is(.run, .os-run) { min-height: 100vh; background: var(--canvas); color: var(--ink); display: flex; }
:is(.run-main, .os-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). */
:is(.run-appnav-shell, .os-run-appnav-shell) {
  display: block;      /* not the shell grid — only the rail child sizes it */
  flex: 0 0 auto;
  min-height: 0;
}
/* Focus bar */
:is(.run-focusbar, .os-run-focusbar) {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 28px; min-height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
:is(.run-focusbar__back, .os-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;
}
:is(.run-focusbar__back, .os-run-focusbar__back):hover { background: var(--hover-warm); color: var(--ink); }
:is(.run-focusbar__back, .os-run-focusbar__back) :is(.lucide, .os-lucide) { color: var(--muted-2); }
:is(.run-focusbar__id, .os-run-focusbar__id) { display: flex; align-items: center; gap: 10px; min-width: 0; }
:is(.run-focusbar__title, .os-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. */
:is(.run-stepper, .os-run-stepper) {
  position: sticky; top: 0; z-index: 15;
  padding: 16px 32px;
  background: var(--canvas); border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
}
:is(.run-stepper__inner, .os-run-stepper__inner) { max-width: 760px; margin: 0 auto; }
/* Content sits below the stepper: reserved rail / centred stage / summary. */
:is(.run-shell, .os-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. */
:is(.run-rail, .os-run-rail)  { grid-column: 1; background: transparent; padding: 0; display: flex; flex-direction: column; position: sticky; top: var(--run-stick-top, 112px); }
:is(.run-rail, .os-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. */
:is(.run-stage, .os-run-stage) { grid-column: 2; min-width: 0; max-width: var(--run-stage-cap, 1200px); padding: 0 0 120px; }
:is(.run-tray, .os-run-tray)  { grid-column: 3; align-self: start; position: sticky; top: var(--run-stick-top, 112px); }
/* Returned Log-dives surface with >1 dive: the person-first matrix widens with
   each dive-group (4 numeric columns). Reclaim the reserved rail + summary tray
   and let the stage span the full shell width so more dives fit before the
   matrix has to scroll horizontally. Single-dive returns keep the default. */
/* .run-shell.run-shell--wide (0,2,0) beats the base :is(.run-shell,…) (0,1,0). */
.run-shell.run-shell--wide { grid-template-columns: minmax(0, 1fr); justify-content: stretch; max-width: 1680px; }
.run-shell.run-shell--wide :is(.run-rail, .os-run-rail),
.run-shell.run-shell--wide :is(.run-tray, .os-run-tray) { display: none; }
.run-shell.run-shell--wide :is(.run-stage, .os-run-stage) { grid-column: 1; min-width: 0; max-width: none; }
:is(.run-tray__note, .os-run-tray__note) { font-size: var(--text-xs); color: var(--muted); margin: 9px 0 0; line-height: 1.45; }
/* Pinned bottom action bar. */
:is(.run-actionbar, .os-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);
}
:is(.run-actionbar__lead, .os-run-actionbar__lead) { display: flex; align-items: center; gap: 16px; min-width: 0; }
:is(.run-actionbar__back-form, .os-run-actionbar__back-form) { flex-shrink: 0; }
:is(.run-actionbar__note, .os-run-actionbar__note) { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); min-width: 0; }
:is(.run-actionbar__note, .os-run-actionbar__note) :is(.lucide, .os-lucide) { color: var(--muted-2); }
:is(.run-actionbar__note, .os-run-actionbar__note).is-warn { color: var(--briefing); }
:is(.run-actionbar__note, .os-run-actionbar__note).is-warn :is(.lucide, .os-lucide) { color: var(--briefing); }
:is(.run-actionbar__cta, .os-run-actionbar__cta) { min-width: 180px; justify-content: center; }
:is(.run-actionbar__cta, .os-run-actionbar__cta):disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
/* Compact mobile stepper twin + condensed trip-context strip — mobile-only
   (shown in the ≤640 block). */
:is(.run-stepper--m, .os-run-stepper--m) { display: none; }
:is(.run-ctx, .os-run-ctx) { display: none; }
:is(.run-ctx__line, .os-run-ctx__line) {
  flex: 1; min-width: 0;
  font-size: var(--text-xs); font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.run-ctx__line, .os-run-ctx__line) b { color: var(--ink); font-weight: 600; }
:is(.run-ctx__line, .os-run-ctx__line) .d { color: var(--hairline-strong); margin: 0 5px; }
:is(.run-ctx__hc, .os-run-ctx__hc) {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); color: var(--ink);
}
:is(.run-ctx__hc, .os-run-ctx__hc) small { font-size: var(--text-2xs); color: var(--muted); font-weight: 500; }
/* ── Check-in .run-person rows (v4) ─────────────────────────────────────────
   A single hairline-divided LIST of bodies in one surface (single elevation —
   border, never border+shadow). Each row = avatar + name/ref + cert meta + the
   real check control, with an "Aboard" confirmed badge once checked in. No green
   left-inset (anti-slop). Rows are a ≥48pt tap target. */
:is(.run-list, .os-run-list) {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
:is(.run-person, .os-run-person) {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 16px;
  min-height: 60px;
  border-top: 1px solid var(--hairline);
}
:is(.run-person, .os-run-person):first-child { border-top: 0; }
:is(.run-person--absent, .os-run-person--absent) { background: var(--surface-alt); }
:is(.run-person__id, .os-run-person__id) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:is(.run-person__name, .os-run-person__name) {
  font-weight: 600; font-size: var(--text-sm); color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
:is(.run-person__ref, .os-run-person__ref) {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs);
  color: var(--muted); margin-left: 7px;
}
:is(.run-person--absent, .os-run-person--absent) :is(.run-person__name, .os-run-person__name) { color: var(--muted); }
:is(.run-person__cert, .os-run-person__cert) { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
:is(.run-person__aside, .os-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. */
:is(.run-bulkbar__select, .os-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. */
:is(.run-logtable, .os-run-logtable) {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
:is(.run-logrow, .os-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);
}
:is(.run-logrow, .os-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. */
:is(.run-reopen-list, .os-run-reopen-list) {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden;
}
:is(.run-reopen-row, .os-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;
}
:is(.run-reopen-row, .os-run-reopen-row):first-child { border-top: 0; }
:is(.run-reopen-row, .os-run-reopen-row):hover { background: var(--hover-warm); }
:is(.run-reopen-row__who, .os-run-reopen-row__who) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
:is(.run-reopen-row__name, .os-run-reopen-row__name) {
  font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.run-reopen-row__guide, .os-run-reopen-row__guide) { font-size: var(--text-xs); color: var(--muted); }
:is(.run-reopen-row__stat, .os-run-reopen-row__stat) { font-size: var(--text-xs); color: var(--muted); flex-shrink: 0; }
:is(.run-reopen-row__sign, .os-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);
}
:is(.run-reopen-row__sign, .os-run-reopen-row__sign).is-signed { color: var(--confirmed); font-weight: 500; }
:is(.run-logrow, .os-run-logrow).is-back { box-shadow: inset 3px 0 0 var(--confirmed); }
/* Select-all header (trips can have 20+ divers). */
:is(.run-logtable__head, .os-run-logtable__head) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 14px 10px;
}
:is(.run-logtable__head-lbl, .os-run-logtable__head-lbl) { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
/* ═══ Dive · titled SIBLING cards (v4 redesign) ═══
   Each dive is its own os-card on the canvas — NO outer wrapper card, and the
   diver list is NOT a second bordered box (single elevation, no card-in-card).
   The card head is a .run-cardhead eyebrow; the body hosts the list flush. */
:is(.run-dcard, .os-run-dcard).os-card { overflow: hidden; }
:is(.run-dcard--active, .os-run-dcard--active).os-card { border-color: var(--hairline-strong); }
:is(.run-dcard--pending, .os-run-dcard--pending).os-card { opacity: .6; }
:is(.run-dcard--pending, .os-run-dcard--pending) :is(.run-cardhead, .os-run-cardhead) { padding-bottom: 20px; }
:is(.run-dcard__lbl, .os-run-dcard__lbl) { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
:is(.run-dcard__lbl, .os-run-dcard__lbl) svg { flex: 0 0 auto; }
:is(.run-dcard__sea, .os-run-dcard__sea) { text-transform: none; letter-spacing: 0; margin-left: 2px; }
/* Done-stop reopen — flush details block below the card head (its own hairline
   band, top-only divider — no nested box). */
:is(.run-dcard__reopen, .os-run-dcard__reopen) { border-top: 1px solid var(--hairline-2, var(--hairline)); margin-top: 14px; }
/* Flat, hairline-divided row list — flush to the card gutter, no border/radius
   box of its own (replaces the old bordered .run-list inside a card). */
:is(.run-divlist, .os-run-divlist) {
  display: flex; flex-direction: column;
  margin-left: calc(var(--space-6) * -1);
  margin-right: calc(var(--space-6) * -1);
  border-top: 1px solid var(--hairline);
}
:is(.run-divlist, .os-run-divlist) > * { padding-left: var(--space-6); padding-right: var(--space-6); }
/* Progress meter — bodies back of the number that splashed. */
:is(.run-meter, .os-run-meter) { display: flex; align-items: center; gap: 11px; padding: 2px 0 4px; }
:is(.run-meter__n, .os-run-meter__n) { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs); color: var(--ink); flex: 0 0 auto; }
:is(.run-meter__bar, .os-run-meter__bar) { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
:is(.run-meter__bar, .os-run-meter__bar) > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
/* Diver row — full-row link into the detail drawer (avatar + name/sub left,
   quiet status badge + chevron right). ≥58px tap target. The name/sub never
   wrap mid-word (ellipsis) so the log affordance can't squeeze them. */
:is(.run-diverrow, .os-run-diverrow) {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; min-height: 58px;
  border-top: 1px solid var(--hairline-2, var(--hairline));
  text-decoration: none; color: inherit;
}
:is(.run-diverrow, .os-run-diverrow):first-child { border-top: 0; }
:is(.run-diverrow, .os-run-diverrow):hover { background: var(--hover-warm); }
:is(.run-diverrow, .os-run-diverrow) > .os-avatar { flex: 0 0 auto; }
:is(.run-diverrow__m, .os-run-diverrow__m) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
:is(.run-diverrow__nm, .os-run-diverrow__nm) { font-weight: 600; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.run-diverrow__sub, .os-run-diverrow__sub) { font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.run-diverrow__sub, .os-run-diverrow__sub).is-active { color: var(--accent-strong, var(--accent)); }
:is(.run-diverrow__guide, .os-run-diverrow__guide) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.run-diverrow, .os-run-diverrow) > .os-badge { flex: 0 0 auto; }
:is(.run-diverrow__chev, .os-run-diverrow__chev) { color: var(--muted-2); display: grid; place-items: center; width: 20px; flex: 0 0 auto; }
/* Mobile (≤640) — give the name/sub the row width. The whole row is the tap
   target opening the drawer (trailing chevron); the status badge is redundant
   with the sub line there, so it drops out to prevent the name being squeezed. */
@media (max-width: 640px) {
  :is(.run-diverrow, .os-run-diverrow) > .os-badge { display: none; }
}
/* Check-in "select all" — a light header row above the guest list. */
:is(.run-checkin-selectall, .os-run-checkin-selectall) { display: flex; align-items: center; gap: 10px; padding: 2px 14px 10px; }
:is(.run-checkin-selectall__lbl, .os-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) {
  :is(.run-logrow, .os-run-logrow) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  :is(.run-logrow__who, .os-run-logrow__who) { flex: 1 1 150px; min-width: 0; }
  :is(.run-logrow, .os-run-logrow) :is(.diveos-input, .os-input), :is(.run-logrow, .os-run-logrow) > [data-controller="dv-select"] { flex: 0 1 auto; width: 72px; }
  :is(.run-logrow, .os-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) {
  :is(.run-logrow, .os-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;
  }
  :is(.run-logrow, .os-run-logrow) > :is(.diveos-check, .os-field-check):first-child { grid-area: chk; }
  :is(.run-logrow__who, .os-run-logrow__who) { grid-area: who; min-width: 0; }
  :is(.run-logrow, .os-run-logrow) > input:is(.diveos-input, .os-input):nth-of-type(1) { grid-area: dep; }
  :is(.run-logrow, .os-run-logrow) > input:is(.diveos-input, .os-input):nth-of-type(2) { grid-area: dur; }
  :is(.run-logrow, .os-run-logrow) > input:is(.diveos-input, .os-input):nth-of-type(3) { grid-area: bar; }
  :is(.run-logrow, .os-run-logrow) > [data-controller="dv-select"] { grid-area: gas; min-width: 0; }
  :is(.run-logrow, .os-run-logrow) > :is(.diveos-check, .os-field-check):last-child { grid-area: back; justify-self: end; }
  :is(.run-logrow, .os-run-logrow) > input:is(.diveos-input, .os-input) { width: 100%; text-align: center; }
}
/* ═══ #345 · Return bulk-fill panel ═══
   Group-values bar + rows. The rows reuse .run-logrow but drop the checkbox +
   Back columns, so .run-fillrow overrides the grid template to align
   name · depth · min · bar · gas. */
:is(.run-fillbar, .os-run-fillbar) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
:is(.run-fillbar__hint, .os-run-fillbar__hint) { flex: 1 0 100%; margin: 0 0 2px; }
:is(.run-fillbar__inputs, .os-run-fillbar__inputs) {
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
  gap: 10px;
  flex: 1 1 320px;
}
:is(.run-fillbar__apply, .os-run-fillbar__apply) { flex: 0 0 auto; align-self: flex-end; }
:is(.run-fillgroup__label, .os-run-fillgroup__label) { margin: 0 0 6px; }
:is(.run-fillrow, .os-run-fillrow) {
  grid-template-columns: minmax(120px, 1.6fr) 84px 84px 84px 104px;
}
/* Keep the fill rows as a grid at ≤900 (the .run-logrow flex override there is
   for the Back/checkbox layout the fill panel doesn't have). */
@media (max-width: 900px) {
  :is(.run-fillrow, .os-run-fillrow) {
    display: grid;
    grid-template-columns: minmax(110px, 1.4fr) 1fr 1fr 1fr 100px;
  }
}
@media (max-width: 640px) {
  :is(.run-fillbar__inputs, .os-run-fillbar__inputs) { grid-template-columns: repeat(2, 1fr); }
  :is(.run-fillbar__apply, .os-run-fillbar__apply) { flex: 1 0 100%; }
  :is(.run-fillrow, .os-run-fillrow) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "who who who"
      "dep dur bar"
      "gas gas gas";
  }
  :is(.run-fillrow, .os-run-fillrow) > :is(.run-logrow__who, .os-run-logrow__who) { grid-area: who; }
  :is(.run-fillrow, .os-run-fillrow) > input:is(.diveos-input, .os-input):nth-of-type(1) { grid-area: dep; }
  :is(.run-fillrow, .os-run-fillrow) > input:is(.diveos-input, .os-input):nth-of-type(2) { grid-area: dur; }
  :is(.run-fillrow, .os-run-fillrow) > input:is(.diveos-input, .os-input):nth-of-type(3) { grid-area: bar; }
  :is(.run-fillrow, .os-run-fillrow) > [data-controller="dv-select"] { grid-area: gas; min-width: 0; }
}
/* #345 — Return override disclosure (quiet secondary path). */
:is(.run-return-override, .os-run-return-override) { margin-top: 16px; }
:is(.run-return-override__summary, .os-run-return-override__summary) {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted);
  list-style: none;
}
:is(.run-return-override__summary, .os-run-return-override__summary)::-webkit-details-marker { display: none; }
:is(.run-return-override__summary, .os-run-return-override__summary):hover { color: var(--ink); }
:is(.run-return-override__body, .os-run-return-override__body) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
:is(.run-return-override__body, .os-run-return-override__body) :is(.dv-btn, .os-btn) { align-self: flex-start; }
/* ═══ 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). */
:is(.run-rail__stopswrap, .os-run-rail__stopswrap) {
  align-self: start;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  /* Single elevation: --shadow-card already paints a 1px hairline ring
     (0 0 0 1px var(--hairline)), so a separate `border` doubled the edge to
     ~2px — the "thicker borders" defect. One surface = the shadow ring OR a
     border, never both. */
  box-shadow: var(--shadow-card);
  padding: 12px 10px;
}
:is(.run-rail__stops-hd, .os-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;
}
:is(.run-rail__stops, .os-run-rail__stops) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
:is(.run-rail__stop-link, .os-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;
}
:is(.run-rail__stop-link, .os-run-rail__stop-link):hover { background: var(--hover-warm); }
:is(.run-rail__stop-num, .os-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);
}
:is(.run-rail__stop-body, .os-run-rail__stop-body) { display: flex; flex-direction: column; min-width: 0; }
:is(.run-rail__stop-site, .os-run-rail__stop-site) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
:is(.run-rail__stop-cap, .os-run-rail__stop-cap) { font-size: var(--text-2xs); color: var(--muted); font-family: var(--font-mono); }
:is(.run-rail__stop--done, .os-run-rail__stop--done) :is(.run-rail__stop-num, .os-run-rail__stop-num) { background: var(--confirmed); color: var(--surface); }
:is(.run-rail__stop--active, .os-run-rail__stop--active) :is(.run-rail__stop-link, .os-run-rail__stop-link) { background: var(--accent-soft); }
:is(.run-rail__stop--active, .os-run-rail__stop--active) :is(.run-rail__stop-num, .os-run-rail__stop-num) { background: var(--accent); color: var(--surface); }
:is(.run-rail__stop--active, .os-run-rail__stop--active) :is(.run-rail__stop-site, .os-run-rail__stop-site) { color: var(--accent); }
:is(.run-rail__stop--pending, .os-run-rail__stop--pending) :is(.run-rail__stop-site, .os-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. */
:is(.run-pills, .os-run-pills) {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
:is(.run-pill, .os-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;
}
:is(.run-pill, .os-run-pill):hover { border-color: var(--accent-border); color: var(--ink); }
:is(.run-pill, .os-run-pill).is-done { color: var(--confirmed); border-color: var(--confirmed-border); background: var(--confirmed-bg); }
:is(.run-pill, .os-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. */
  :is(.run-tray, .os-run-tray) { display: none; }
  :is(.run-shell, .os-run-shell) { grid-template-columns: 260px minmax(0, 1fr); justify-content: stretch; }
}
@media (max-width: 1131px) {
  :is(.run-shell, .os-run-shell) { grid-template-columns: minmax(0, 1fr); padding: 24px 32px 0; }
  :is(.run-rail, .os-run-rail) { display: none; }
  :is(.run-stage, .os-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. */
  :is(.run-stepper, .os-run-stepper) { position: sticky; top: 0; }
  /* The rail is gone — the pills become the stops nav. */
  :is(.run-pills, .os-run-pills) { display: flex; }
}
@media (max-width: 640px) {
  :is(.run-appnav-shell, .os-run-appnav-shell) { display: none; }
  :is(.run-shell, .os-run-shell) { grid-template-columns: 1fr; padding: 0; }
  :is(.run-stage, .os-run-stage) { grid-column: 1; padding: 16px 16px 110px; }

  /* Focus bar IS the mobile top bar: back → Plan + trip title + status +
     Emergency. (Mockup shape — no hamburger; back covers app nav.) */
  :is(.run-focusbar, .os-run-focusbar) {
    position: sticky; top: 0; z-index: 40;
    gap: 10px; padding: 10px 12px; min-height: 0;
  }
  :is(.run-focusbar__back, .os-run-focusbar__back) {
    padding: 8px; background: var(--surface-alt); color: var(--muted);
  }
  :is(.run-focusbar__back, .os-run-focusbar__back) span { display: none; }
  :is(.run-focusbar__id, .os-run-focusbar__id) { flex: 1; gap: 8px; }
  :is(.run-focusbar__title, .os-run-focusbar__title) {
    font-size: var(--text-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  :is(.run-focusbar__emg, .os-run-focusbar__emg) { padding: 7px 11px; }

  /* Numbered stepper-with-spine, mobile-sized — replaces the old text tabs.
     Reuses the shared stepper markup + the .run-stepper__inner .absolute spine
     geometry; only the wrapper padding/position shrinks for mobile. */
  :is(.run-stepper, .os-run-stepper) { display: none; }
  :is(.run-stepper--m, .os-run-stepper--m) {
    display: block; position: static; z-index: auto;
    padding: 12px 12px 10px;
    background: var(--surface);
  }
  /* Abbreviated labels stay on one line — no node grows taller than its peers. */
  :is(.run-stepper--m, .os-run-stepper--m) .os-eyebrow { white-space: nowrap; }

  /* Condensed trip-context strip. */
  :is(.run-ctx, .os-run-ctx) {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--surface-alt); border-bottom: 1px solid var(--hairline);
  }

  :is(.run-actionbar, .os-run-actionbar) { padding: 12px 16px; }
  :is(.run-actionbar__cta, .os-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) {
  :is(.run--dive, .os-run--dive) :is(.run-stepper, .os-run-stepper) { position: static; } /* tablet: don't pin the header */
  :is(.run--dive, .os-run--dive) :is(.run-pills, .os-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;
  }
  :is(.run--dive, .os-run--dive) :is(.run-pills, .os-run-pills)::-webkit-scrollbar { display: none; }
  :is(.run--dive, .os-run--dive) :is(.run-pill, .os-run-pill) { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  :is(.run--dive, .os-run--dive) :is(.run-focusbar, .os-run-focusbar) { 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. */
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dv-sheet__panel, .os-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). */
:is(.run-detail-sheet, .os-run-detail-sheet) turbo-frame#run_detail { display: contents; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dv-sheet__body, .os-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) {
  :is(.run-detail-sheet, .os-run-detail-sheet):is(.dv-sheet, .os-sheet) { align-items: stretch; justify-content: flex-end; }
  :is(.run-detail-sheet, .os-run-detail-sheet) :is(.dv-sheet__panel, .os-sheet__panel) {
    width: 480px; max-width: 92vw; height: 100%; max-height: none; margin: 0;
    border-radius: 0; transform: translateX(100%);
  }
  :is(.run-detail-sheet, .os-run-detail-sheet).is-open :is(.dv-sheet__panel, .os-sheet__panel) { transform: translateX(0); }
  :is(.run-detail-sheet, .os-run-detail-sheet) :is(.dv-sheet__grip, .os-sheet__grip) { display: none; }
}
:is(.run-sheet__diver, .os-run-sheet__diver) { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
:is(.run-sheet__lbl, .os-run-sheet__lbl) { margin: 0 0 8px; color: var(--muted-2); }
:is(.run-sheet__guides, .os-run-sheet__guides) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
:is(.run-sheet__guide, .os-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;
}
:is(.run-sheet__guide, .os-run-sheet__guide):has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
:is(.run-sheet__fields, .os-run-sheet__fields) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
:is(.run-field, .os-run-field) { display: block; }
:is(.run-field, .os-run-field) :is(.dv-eyebrow, .os-eyebrow) { display: block; color: var(--muted-2); margin-bottom: 6px; }
:is(.run-field__in, .os-run-field__in) { position: relative; display: flex; align-items: center; }
:is(.run-field__in, .os-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);
}
:is(.run-field__unit, .os-run-field__unit) { position: absolute; right: 16px; color: var(--muted-2); font-family: var(--font-mono); font-size: var(--text-sm); }
:is(.run-sign, .os-run-sign) { margin-top: 20px; }
:is(.run-sign__label, .os-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. */
:is(.run-detail-sheet, .os-run-detail-sheet) #run-detail-form { display: flex; flex-direction: column; min-height: 100%; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.run-sign, .os-run-sign) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-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. */
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.dvsign-pad, .os-dvsign-pad) [data-signature-target="canvasWrapper"]:is(.hidden, .os-hidden) { display: none; }
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.sig-canvas-container, .os-sig-canvas-container) {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 240px; max-width: none;
}
:is(.run-detail-sheet, .os-run-detail-sheet) :is(.sig-canvas, .os-sig-canvas) { flex: 1 1 auto; min-height: 0; height: auto; display: block; }
:is(.run-logrow__who, .os-run-logrow__who) { text-decoration: none; }
:is(.run-logrow__who, .os-run-logrow__who):hover { color: var(--accent); }
/* ═══ Focus-bar Emergency button + emergency sheet ═══ */
:is(.run-focusbar__emg, .os-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;
}
:is(.run-focusbar__emg, .os-run-focusbar__emg):hover { border-color: var(--cancelled); }
:is(.run-emg-sheet__head, .os-run-emg-sheet__head) { display: flex; align-items: flex-start; gap: 12px; }
:is(.run-emg-sheet__icon, .os-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);
}
:is(.run-emg-sheet__stack, .os-run-emg-sheet__stack) { display: flex; flex-direction: column; min-width: 0; }
:is(.run-emg-sheet__eyebrow, .os-run-emg-sheet__eyebrow) { color: var(--cancelled); }
:is(.run-emg-sheet__close, .os-run-emg-sheet__close) { margin-left: auto; }
:is(.run-emg-sheet__lead, .os-run-emg-sheet__lead) { font-size: var(--text-sm); color: var(--muted); margin: 12px 0 16px; line-height: 1.5; }
:is(.run-emg-sheet__optform, .os-run-emg-sheet__optform) { width: 100%; }
:is(.run-emg-sheet__opt, .os-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;
}
:is(.run-emg-sheet__opt, .os-run-emg-sheet__opt):hover { border-color: var(--hairline-strong); }
:is(.run-emg-sheet__opt--danger, .os-run-emg-sheet__opt--danger) { border-color: var(--cancelled-border); background: var(--cancelled-bg); color: var(--cancelled); }
:is(.run-emg-sheet__opt-t, .os-run-emg-sheet__opt-t) { display: block; font-weight: 600; font-size: var(--text-sm); }
:is(.run-emg-sheet__opt-s, .os-run-emg-sheet__opt-s) { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
:is(.run-emg-sheet__opt--danger, .os-run-emg-sheet__opt--danger) :is(.run-emg-sheet__opt-s, .os-run-emg-sheet__opt-s) { color: var(--cancelled); }
/* ═══ Return · per-stop close-out rows ═══ */
:is(.run-return-stops, .os-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;
}
:is(.run-return-stop, .os-run-return-stop) {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--hairline-2);
}
:is(.run-return-stop, .os-run-return-stop):first-child { border-top: 0; }
:is(.run-return-stop__t, .os-run-return-stop__t) { font-size: var(--text-sm); color: var(--ink); }
/* ═══ Stepper spine ═══
   The shared stepper_horizontal partial positions its connector line with
   arbitrary Tailwind (left-[calc(50%+20px)]) that never compiles in this build,
   so the spine vanished. Re-draw it here, scoped to the Run stepper: a 2px rule
   behind the 32px nodes. The partial already colors each DONE node's connector
   `bg-accent` and the rest `bg-hairline`, so the filled run reaches up to +
   including the current step; we only fix geometry. The connector is the sole
   absolutely-positioned child inside each step (the dots are relative z-10). */
:is(.run-stepper__inner, .os-run-stepper__inner) .absolute {
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  width: auto;
  height: 2px;
}
/* ═══ Pre-departure step — titled sibling cards ═══
   Page title on the canvas; Gear / Safety / Headcount each in their own
   os-card (border = single elevation, never border+shadow), titled in-card via
   .os-card__head (top-only padding → no divider under the eyebrow). */
:is(.run-pagehead, .os-run-pagehead) { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
:is(.run-pagehead__ic, .os-run-pagehead__ic) {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
:is(.run-pagehead__ic, .os-run-pagehead__ic) svg { display: block; }
:is(.run-pagehead, .os-run-pagehead) p { margin: 2px 0 0; }
:is(.run-pcards, .os-run-pcards) { display: flex; flex-direction: column; gap: 16px; }
/* Fitting-body list — flush rows inside the gear card (os-drow supplies the row
   grammar; this just insets it to the card gutter under the head). */
:is(.run-fitlist, .os-run-fitlist) { padding: 6px 16px 2px; }
:is(.run-fitfoot, .os-run-fitfoot) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding: 14px var(--space-6);
  border-top: 1px solid var(--hairline-2, var(--hairline));
}
/* Plain in-card eyebrow header (mockup .mk-gchead): uppercase text label left,
   optional count right — NO leading icon, NO divider. Flows into the card body
   (top-only padding). Used by the Pre-departure sibling cards instead of
   .os-card__head, whose icon slot the mockup section labels don't want. */
:is(.run-cardhead, .os-run-cardhead) {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 20px var(--space-6) 0;
}
/* Depart-headcount grid — the headcount field carries no visible label (the
   card eyebrow titles it), while the override field does. TOP-align the cells
   and give the headcount field a one-line label-height spacer (rendered only
   when the override field is present, see the view) so BOTH cells start with a
   single label line — the two INPUTS then line up regardless of how the hints
   below them wrap (bottom-alignment failed because the hints differ in height).
   Scoped modifier — never touches the shared .field-grid. */
:is(.field-grid, .os-field-grid).run-depart-grid { align-items: start; }
/* The override cell is the 2nd .os-field; drop the stacked-field top margin so
   the grid alignment isn't offset by it. */
:is(.field-grid, .os-field-grid).run-depart-grid .os-field + .os-field { margin-top: 0; }
/* Headcount is a 1–2 digit number — it never needs half the row. Narrow its
   column so the free-text override-reason field (which benefits from length)
   takes the rest. When safety is complete (no override) the lone headcount just
   sits in the narrow first column. */
:is(.field-grid, .os-field-grid).run-depart-grid { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
/* Standalone (non-grid) headcount inputs — e.g. the read-only Return headcount —
   cap to the same narrow width instead of filling the whole card. */
:is(.run-hc-input, .os-run-hc-input) { max-width: 8rem; }
/* ─── 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 ─────────────────── */
/* Head aligned to the os-ds form_section header (the interactive-form
   treatment): inline muted icon + title-case heading, NO divider — the
   "form shell" format the roster cards want, distinct from the info_card
   eyebrow used on the read-only Plan cards. Mirrors .form-section__header /
   __icon / __title (os-ds). */
:is(.dv-rcard__head, .os-rcard__head) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px 10px;
}
:is(.dv-rcard__ic, .os-rcard__ic) {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted);
}
:is(.dv-rcard__ttl, .os-rcard__ttl) { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
:is(.dv-rcard__ttl, .os-rcard__ttl) h2 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
:is(.dv-rcard__count, .os-rcard__count) { font-size: var(--text-sm); color: var(--muted); }
:is(.dv-rcard__count, .os-rcard__count) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.dv-rcard__body, .os-rcard__body) { padding: 18px 20px; }
/* ── Dive guides — chips row + popover anchor ───────────────────────────── */
:is(.dv-guides, .os-guides) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  position: relative;
}
:is(.dv-guides__empty, .os-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. */
:is(.dv-guides__chips, .os-guides__chips) { display: contents; }
/* ── Diver manifest — dense borderless row-list ─────────────────────────── */
:is(.dv-divers, .os-divers) { display: flex; flex-direction: column; }
:is(.dv-drow, .os-drow) {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 6px;
  border-top: 1px solid var(--hairline-2, var(--hairline));
  transition: background .12s;
}
:is(.dv-drow, .os-drow):first-child { border-top: 0; }
:is(.dv-drow, .os-drow):hover { background: var(--hover-warm); }
:is(.dv-drow__body, .os-drow__body) { flex: 1; min-width: 0; }
:is(.dv-drow__name, .os-drow__name) {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
:is(.dv-drow__name, .os-drow__name) a { color: inherit; text-decoration: none; }
:is(.dv-drow__name, .os-drow__name) a:hover { color: var(--accent); }
:is(.dv-drow__ref, .os-drow__ref) { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; color: var(--muted-2); }
:is(.dv-drow__sub, .os-drow__sub) { font-size: var(--text-2xs); color: var(--muted-2); margin-top: 2px; }
:is(.dv-drow__sub, .os-drow__sub) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.dv-drow__act, .os-drow__act) { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s; }
:is(.dv-drow, .os-drow):hover :is(.dv-drow__act, .os-drow__act), :is(.dv-drow, .os-drow):focus-within :is(.dv-drow__act, .os-drow__act) { opacity: 1; }
:is(.dv-drow__act, .os-drow__act) form { display: contents; }
:is(.dv-drow__x, .os-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;
}
:is(.dv-drow__x, .os-drow__x):hover { background: var(--cancelled-bg); color: var(--cancelled); }
:is(.dv-drow__chev, .os-drow__chev) {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted-2);
}
:is(.dv-drow__chev, .os-drow__chev):hover { color: var(--ink); }
/* ── Add-diver sheet (dv-sheet) internals ───────────────────────────────── */
:is(.dv-addsheet__title, .os-addsheet__title) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 2px;
}
:is(.dv-addsheet__title, .os-addsheet__title) h2 { margin: 0; }
:is(.dv-addsheet, .os-addsheet) :is(.dv-sheet__body, .os-sheet__body) { padding-top: 16px; }
:is(.dv-addsearch, .os-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);
}
:is(.dv-addsearch, .os-addsearch):focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.dv-addsearch, .os-addsearch) :is(.lucide, .os-lucide) { color: var(--muted-2); flex-shrink: 0; }
:is(.dv-addsearch, .os-addsearch) input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
:is(.dv-addsearch, .os-addsearch) input::-moz-placeholder { color: var(--muted-2); }
:is(.dv-addsearch, .os-addsearch) input::placeholder { color: var(--muted-2); }
:is(.dv-addgroup, .os-addgroup) { margin-top: 14px; }
:is(.dv-addgroup__label, .os-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;
}
:is(.dv-addrow, .os-addrow) {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: var(--radius-sm);
}
:is(.dv-addrow, .os-addrow):hover { background: var(--hover-warm); }
:is(.dv-addrow__body, .os-addrow__body) { flex: 1; min-width: 0; }
:is(.dv-addrow__name, .os-addrow__name) {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
:is(.dv-addrow__sub, .os-addrow__sub) { font-size: var(--text-2xs); color: var(--muted-2); }
:is(.dv-addrow__sub, .os-addrow__sub) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.dv-addrow, .os-addrow).is-added :is(.dv-addrow__body, .os-addrow__body) { opacity: .5; }
:is(.dv-addrow, .os-addrow) form { display: contents; }
:is(.dv-addsheet__empty, .os-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 */
:is(.booking-view-toggle, .os-booking-view-toggle) {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
:is(.toggle-group, .os-toggle-group) {
  display: flex;
  background-color: #f3f4f6;
  border-radius: 6px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  gap: 4px;
}
:is(.toggle-btn, .os-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;
}
:is(.toggle-btn, .os-toggle-btn):hover {
  background-color: #e5e7eb;
  color: #374151;
}
:is(.toggle-btn, .os-toggle-btn):is(.active, .os-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) {
  :is(.toggle-group, .os-toggle-group) {
    width: 100%;
    justify-content: space-between;
  }

  :is(.toggle-btn, .os-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 ─────────────────────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.dv-progress, .os-progress) {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
:is(.bk-detail, .os-bk-detail) :is(.dv-progress__fill, .os-progress__fill) {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 999px;
}
/* ── Badge family (scoped — square + dot variants) ────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.dv-badge, .os-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;
}
:is(.bk-detail, .os-bk-detail) :is(.dv-badge-dot, .os-badge-dot) { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
:is(.bk-detail, .os-bk-detail) :is(.dv-badge--square, .os-badge--square) { border-radius: 5px; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-2xs); padding: 3px 8px; }
:is(.bk-detail, .os-bk-detail) :is(.dv-badge--confirmed, .os-badge--confirmed) { background: var(--confirmed-bg); border-color: var(--confirmed-border); color: var(--confirmed); }
:is(.bk-detail, .os-bk-detail) :is(.dv-badge--pending, .os-badge--pending)   { background: var(--pending-bg);   border-color: var(--pending-border);   color: var(--pending); }
:is(.bk-detail, .os-bk-detail) :is(.dv-badge--briefing, .os-badge--briefing)  { background: var(--briefing-bg);  border-color: var(--briefing-border);  color: var(--briefing); }
:is(.bk-detail, .os-bk-detail) :is(.dv-badge--cancelled, .os-badge--cancelled) { background: var(--cancelled-bg); border-color: var(--cancelled-border); color: var(--cancelled); }
/* ── Forked card shell (inline WL version) ────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.card, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.card, .os-card):is(.bk-overflow-visible, .os-bk-overflow-visible) {
  overflow: visible;
}
:is(.bk-detail, .os-bk-detail) :is(.card-head, .os-card-head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 0;
}
:is(.bk-detail, .os-bk-detail) :is(.card-head-left, .os-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);
}
:is(.bk-detail, .os-bk-detail) :is(.card-head-left, .os-card-head-left) i, :is(.bk-detail, .os-bk-detail) :is(.card-head-left, .os-card-head-left) svg { flex-shrink: 0; color: var(--muted-2); }
:is(.bk-detail, .os-bk-detail) :is(.card-head-right, .os-card-head-right) { display: flex; align-items: center; gap: 8px; }
:is(.bk-detail, .os-bk-detail) :is(.card-body, .os-card-body) { padding: 22px 24px; }
/* ── Guest hero card ──────────────────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-card, .os-guest-hero-card) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}
:is(.bk-detail, .os-bk-detail) :is(.guest-hero, .os-guest-hero) { display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 20px; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-avatar, .os-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);
}
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-body, .os-guest-hero-body) { flex: 1; min-width: 0; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-name-row, .os-guest-hero-name-row) { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-name, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-edit-btn, .os-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;
}
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-edit-btn, .os-guest-hero-edit-btn):hover { background: var(--canvas); }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-meta-row, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-country, .os-guest-hero-country) { font-size: var(--text-sm); color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-cert, .os-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);
}
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-contacts, .os-guest-hero-contacts) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-contact-item, .os-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;
}
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-contact-item, .os-guest-hero-contact-item):hover { color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-strip, .os-guest-hero-stat-strip) { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hairline); margin: 0 24px; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-cell, .os-guest-hero-stat-cell) { padding: 14px 16px; border-right: 1px solid var(--hairline); }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-cell, .os-guest-hero-stat-cell):first-child { padding-left: 24px; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-cell, .os-guest-hero-stat-cell):last-child { border-right: none; padding-right: 24px; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-lbl, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-val, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.stat-month, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.guest-hero-stat-strip--standalone, .os-guest-hero-stat-strip--standalone) { border-top: none; margin: 0; padding: 4px 0; }
/* ── Header contact line (Band 1) ─────────────────────────────────────── */
:is(.contact-line, .os-contact-line), :is(.bk-contact-line, .os-bk-contact-line) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 8px; font-size: var(--text-sm); color: var(--muted);
}
:is(.bk-contact-id, .os-bk-contact-id) { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
:is(.bk-contact-dot, .os-bk-contact-dot) { font-size: var(--text-xl); line-height: 0; color: var(--muted-2); }
:is(.bk-contact-item, .os-bk-contact-item) { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
:is(.bk-contact-item, .os-bk-contact-item) i, :is(.bk-contact-item, .os-bk-contact-item) svg { color: var(--muted-2); flex-shrink: 0; }
:is(.bk-contact-pref, .os-bk-contact-pref) { color: var(--accent); }
:is(.bk-contact-pref, .os-bk-contact-pref) i, :is(.bk-contact-pref, .os-bk-contact-pref) svg { color: var(--accent); }
/* ── Trip-plan strip ──────────────────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-strip, .os-trip-plan-strip) { display: grid; grid-template-columns: 130px 1fr 130px; align-items: center; gap: 20px; margin: 22px 0 22px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-track, .os-trip-plan-track) { position: relative; height: 116px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-rail, .os-trip-plan-rail) { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 2px; background: var(--accent-border); border-radius: 2px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-totals, .os-trip-plan-totals) { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); display: inline-flex; gap: 6px; align-items: center; z-index: 2; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-pill, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-end, .os-trip-plan-end) { text-align: center; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-end-dot, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-end-dot, .os-trip-plan-end-dot):is(.l, .os-l) { left: 0; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-end-dot, .os-trip-plan-end-dot):is(.r, .os-r) { right: 0; left: auto; transform: translate(50%, -50%); }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-pin, .os-trip-plan-pin) { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 3; }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-pin-mark, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.trip-plan-pin-label, .os-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 */
:is(.bk-detail, .os-bk-detail) :is(.lbl, .os-lbl) { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
:is(.bk-detail, .os-bk-detail) :is(.tpc-d, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.tpc-ds, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-solo, .os-trip-dive-solo) { display: flex; align-items: center; gap: 10px; padding: 6px 0 2px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-solo, .os-trip-dive-solo) :is(.dot, .os-dot) { width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); flex-shrink: 0; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-solo, .os-trip-dive-solo) :is(.dot, .os-dot):is(.done, .os-done) { background: var(--accent); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-solo, .os-trip-dive-solo) :is(.dot, .os-dot):is(.today, .os-today) { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-solo, .os-trip-dive-solo) :is(.t, .os-t) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-solo, .os-trip-dive-solo) :is(.s, .os-s) { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); margin-left: auto; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive, .os-trip-dive) { padding: 4px 0 2px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-h, .os-trip-dive-h) { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-h, .os-trip-dive-h) :is(.n, .os-n) { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-h, .os-trip-dive-h) :is(.l, .os-l) { font-size: var(--text-xs); color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-h, .os-trip-dive-h) :is(.r, .os-r) { margin-left: auto; font-size: 10.5px; font-family: var(--font-mono); color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.05em; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-track, .os-trip-dive-track) { position: relative; height: 13px; margin: 6px 5px 0; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-line, .os-trip-dive-line) { position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; background: var(--accent-border); transform: translateY(-50%); border-radius: 2px; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dots, .os-trip-dive-dots) { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dot, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dot, .os-trip-dive-dot):is(.done, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dot, .os-trip-dive-dot):is(.today, .os-today) { background: var(--accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-soft); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-ends, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-ends, .os-trip-dive-ends) :is(.e, .os-e) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-ends, .os-trip-dive-ends) :is(.e, .os-e):is(.r, .os-r) { text-align: right; }
/* dive dot — hover tooltip: date (+ site when assigned) */
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dot, .os-trip-dive-dot) { position: relative; cursor: default; }
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dot, .os-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;
}
:is(.bk-detail, .os-bk-detail) :is(.trip-dive-dot, .os-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. */
:is(.bk-tabnav, .os-bk-tabnav) { position: sticky; top: 0; z-index: 20; }
:is(.bk-detail, .os-bk-detail) :is(.dl-grid, .os-dl-grid) { display: grid; gap: 0; }
:is(.bk-detail, .os-bk-detail) :is(.dl-row-item, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.dl-row-item, .os-dl-row-item):last-child { border-bottom: none; }
:is(.bk-detail, .os-bk-detail) :is(.dl-row-item, .os-dl-row-item) dt { color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.dl-row-item, .os-dl-row-item) dd { color: var(--ink); font-weight: 500; text-align: right; margin: 0; }
/* ── Waivers & Documents rows ─────────────────────────────────────────── */
/* The row box, avatar, info/name/meta are the shared `.os-profile-row`
   component (os-ds v1.3.0, @imported from application.css). The local copy —
   `.bk-detail .waiver-diver-row` and its avatar/info/name/cert children — was
   deleted when the gem component was adopted; do NOT reintroduce it.
   What stays local below is the DiveOS-specific part: the `.dv-waiver-row`
   hook (is-last + the inline QR share wrap) and the waiver status vocabulary
   (`.waiver-badges` grid, `.wv-*`, `.waiver-send-link`). */
:is(.bk-detail, .os-bk-detail) .dv-waiver-row.is-last { border-bottom: none; }
:is(.bk-detail, .os-bk-detail) :is(.waiver-send-link, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.waiver-fit-link, .os-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"). */
:is(.bk-detail, .os-bk-detail) :is(.waiver-badges, .os-waiver-badges) { display: grid; grid-template-columns: 158px 80px; align-items: center; gap: 0; flex-shrink: 0; }
:is(.bk-detail, .os-bk-detail) :is(.wv-status, .os-wv-status) { display: flex; justify-content: flex-end; }
:is(.bk-detail, .os-bk-detail) :is(.wv-trail, .os-wv-trail) { display: flex; align-items: center; justify-content: flex-end; padding-left: 8px; }
:is(.bk-detail, .os-bk-detail) :is(.wv-date, .os-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 */
:is(.bk-detail, .os-bk-detail) :is(.waiver-no-email, .os-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 */
:is(.bk-detail, .os-bk-detail) .dv-waiver-row { flex-wrap: wrap; }
:is(.bk-detail, .os-bk-detail) .dv-waiver-row > :is(.wv-share, .os-wv-share) { flex-basis: 100%; margin-left: 44px; }
/* ── Right rail: Balance card ─────────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.balance-card, .os-balance-card) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
:is(.bk-detail, .os-bk-detail) :is(.balance-head, .os-balance-head) { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 10px; }
:is(.bk-detail, .os-bk-detail) :is(.balance-head-label, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.balance-paid-pct, .os-balance-paid-pct) { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.balance-body, .os-balance-body) { padding: 0 20px 20px; }
:is(.bk-detail, .os-bk-detail) :is(.balance-amount, .os-balance-amount) { display: flex; align-items: baseline; gap: 2px; margin-bottom: 12px; }
:is(.bk-detail, .os-bk-detail) :is(.balance-dollars, .os-balance-dollars) { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
:is(.bk-detail, .os-bk-detail) :is(.balance-cents, .os-balance-cents) { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--muted); letter-spacing: -0.02em; }
:is(.bk-detail, .os-bk-detail) :is(.balance-due, .os-balance-due) { font-size: var(--text-sm); color: var(--muted); margin-left: 6px; }
:is(.bk-detail, .os-bk-detail) :is(.balance-sub, .os-balance-sub) { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); margin-bottom: 16px; margin-top: 12px; }
:is(.bk-detail, .os-bk-detail) :is(.balance-sub, .os-balance-sub) span:first-child { color: var(--accent); font-weight: 500; }
:is(.bk-detail, .os-bk-detail) :is(.balance-cta, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.balance-cta, .os-balance-cta):hover { background: var(--accent-strong); }
/* ── Right rail: Booking Summary grid ─────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-grid, .os-bk-sum-grid) { display: grid; grid-template-columns: 1fr 1fr; }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-cell, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-cell, .os-bk-sum-cell):nth-child(even) { border-right: none; }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-cell, .os-bk-sum-cell):nth-child(n+3) { border-bottom: none; }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-cell, .os-bk-sum-cell):nth-child(-n+2) { border-top: none; }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-icon, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-body, .os-bk-sum-body) { display: flex; flex-direction: column; gap: 3px; }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-lbl, .os-bk-sum-lbl) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-val, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.bk-sum-val, .os-bk-sum-val).is-text { font-size: var(--text-md); font-weight: 500; letter-spacing: -0.02em; }
/* ── Right rail: Access & Sharing toggles ─────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.sharing-row, .os-sharing-row) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
:is(.bk-detail, .os-bk-detail) :is(.sharing-row, .os-sharing-row):last-child { border-bottom: none; }
:is(.bk-detail, .os-bk-detail) :is(.sharing-label, .os-sharing-label) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.sharing-desc, .os-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 ──────────────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.inv-acc, .os-inv-acc) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-header, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-header, .os-inv-acc-header):hover { background: var(--canvas); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-chevron, .os-inv-acc-chevron) { color: var(--muted-2); flex-shrink: 0; transition: transform 0.2s ease; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc, .os-inv-acc).is-open :is(.inv-acc-chevron, .os-inv-acc-chevron) { transform: rotate(0deg); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc, .os-inv-acc):not(.is-open) :is(.inv-acc-chevron, .os-inv-acc-chevron) { transform: rotate(-90deg); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-id, .os-inv-acc-id) { font-size: var(--text-sm); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-sep, .os-inv-acc-sep) { color: var(--muted-2); font-size: var(--text-xs); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-date, .os-inv-acc-date) { font-size: var(--text-xs); color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-spacer, .os-inv-acc-spacer) { flex: 1; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-total, .os-inv-acc-total) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-body, .os-inv-acc-body) { display: none; border-top: 1px solid var(--hairline); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc, .os-inv-acc).is-open :is(.inv-acc-body, .os-inv-acc-body) { display: block; }
/* ── Invoices: line-items table ───────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) { overflow-x: auto; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) table { width: 100%; min-width: 100%; border-collapse: collapse; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) thead tr { background: var(--canvas); border-bottom: 1px solid var(--hairline); }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) thead th:first-child { padding-left: 18px; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) thead th:last-child { padding-right: 18px; text-align: right; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) thead th:is(.col-num, .os-col-num) { text-align: right; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) tbody tr { border-bottom: 1px solid var(--hairline-2); }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) tbody tr:last-child { border-bottom: none; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) tbody td { padding: 13px 0; font-size: var(--text-sm); color: var(--ink); vertical-align: middle; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) tbody td:first-child { padding-left: 18px; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) tbody td:last-child { padding-right: 18px; text-align: right; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) :is(.li-desc, .os-li-desc) { font-weight: 500; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) :is(.li-qty, .os-li-qty) { color: var(--muted); font-size: var(--text-xs); text-align: right; font-family: var(--font-mono); }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) :is(.li-unit, .os-li-unit) { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); text-align: right; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) :is(.li-amount, .os-li-amount) { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; text-align: right; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) :is(.li-remove, .os-li-remove) { text-align: right; }
:is(.bk-detail, .os-bk-detail) :is(.inv-table-wrap, .os-inv-table-wrap) :is(.li-desc, .os-li-desc):is(.inv-empty, .os-inv-empty) { color: var(--muted); font-weight: 400; text-align: center; padding: 22px 18px; }
:is(.bk-detail, .os-bk-detail) :is(.inv-li-remove, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.inv-li-remove, .os-inv-li-remove):hover { color: var(--cancelled); }
/* ── Invoices: ancillary blocks ───────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.inv-add-form-wrap, .os-inv-add-form-wrap) { padding: 14px 18px 0; }
/* ── Invoices: stacked summary (inside accordion body) ───────────────── */
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) { border-top: 1px solid var(--hairline); padding: 12px 18px 14px; background: var(--surface); margin-top: 14px; }
:is(.bk-detail, .os-bk-detail) :is(.fin-row, .os-fin-row) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row) + :is(.fin-row, .os-fin-row) { border-top: 1px solid var(--hairline-2); }
:is(.bk-detail, .os-bk-detail) :is(.fin-lbl, .os-fin-lbl) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
:is(.bk-detail, .os-bk-detail) :is(.fin-val, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.semantic, .os-semantic) :is(.fin-lbl, .os-fin-lbl) { color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.semantic, .os-semantic) :is(.fin-val, .os-fin-val) { font-size: var(--text-md); font-weight: 500; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.semantic, .os-semantic) :is(.fin-val, .os-fin-val):is(.paid, .os-paid) { color: var(--confirmed); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.semantic, .os-semantic) :is(.fin-val, .os-fin-val):is(.outstanding, .os-outstanding) { color: var(--briefing); font-weight: 600; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.total, .os-total) { padding-top: 11px; }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.total, .os-total) :is(.fin-lbl, .os-fin-lbl) { color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.inv-acc-summary, .os-inv-acc-summary) :is(.fin-row, .os-fin-row):is(.total, .os-total) :is(.fin-val, .os-fin-val) { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
/* ── Invoices: payment method pills + actions ─────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.inv-controls, .os-inv-controls) { padding: 14px 18px; border-top: 1px solid var(--hairline); }
:is(.bk-detail, .os-bk-detail) :is(.inv-controls-label, .os-inv-controls-label) { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
:is(.bk-detail, .os-bk-detail) :is(.inv-pm-row, .os-inv-pm-row) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.bk-detail, .os-bk-detail) :is(.inv-pm-pill, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.inv-pm-pill, .os-inv-pm-pill):hover { background: var(--canvas); }
:is(.bk-detail, .os-bk-detail) :is(.inv-pm-pill, .os-inv-pm-pill).is-active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
:is(.bk-detail, .os-bk-detail) :is(.inv-pm-note, .os-inv-pm-note) { margin-top: 8px; font-size: var(--text-xs); color: var(--briefing); }
:is(.bk-detail, .os-bk-detail) :is(.inv-actions, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-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;
}
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row) + :is(.fin-row, .os-fin-row) { border-top: 1px solid var(--fin-border); }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row) { padding: 10px 0; }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.secondary, .os-secondary) :is(.fin-lbl, .os-fin-lbl) { color: var(--muted-2); }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.secondary, .os-secondary) :is(.fin-val, .os-fin-val) { color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.semantic, .os-semantic) :is(.fin-lbl, .os-fin-lbl) { color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.semantic, .os-semantic) :is(.fin-val, .os-fin-val) { font-size: var(--text-md); font-weight: 500; }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-val, .os-fin-val):is(.paid, .os-paid) { color: var(--confirmed); }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-val, .os-fin-val):is(.outstanding, .os-outstanding) { color: var(--briefing); font-weight: 600; }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.total, .os-total) { border-top: 1px solid var(--fin-border); margin-top: 4px; padding-top: 14px; }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.total, .os-total) :is(.fin-lbl, .os-fin-lbl) { color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.fin-card--c2r, .os-fin-card--c2r) :is(.fin-row, .os-fin-row):is(.total, .os-total) :is(.fin-val, .os-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. ─────── */
:is(.bk-admin-note, .os-bk-admin-note) {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
:is(.bk-admin-note__label, .os-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;
}
:is(.bk-admin-note__body, .os-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. ─────────────────────────────────────────────────────────────── */
:is(.side-panel__body, .os-side-panel__body) :is(.bk-stat-row, .os-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);
}
:is(.side-panel__body, .os-side-panel__body) :is(.bk-price-row, .os-bk-price-row) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: var(--text-sm);
}
:is(.side-panel__body, .os-side-panel__body) :is(.bk-price-row, .os-bk-price-row) :is(.v, .os-v) { font-variant-numeric: tabular-nums; }
/* Single rule per separation — never two stacked hairlines (WL panel). */
:is(.side-panel__body, .os-side-panel__body) :is(.bk-price-row--rule, .os-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. */
:is(.branding-logo-preview, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.card-body, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip, .os-bd2-trip) { position: relative; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-head, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-head, .os-bd2-trip-head) :is(.diver, .os-diver) { position: absolute; top: -10px; right: 22px; width: 150px; height: 130px; transform-origin: top right; pointer-events: none; z-index: 1; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-head, .os-bd2-trip-head) :is(.bedart, .os-bedart) { position: absolute; width: 110px; height: 105px; transform-origin: top right; pointer-events: none; z-index: 1; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-art, .os-bd2-art) { display: block; width: 100%; height: 100%; }
/* Hero date title = DM Display/H1 (Inter 28/600, -0.025em). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-title, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-sub, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-waves, .os-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"); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-body, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-headroom, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.stay-headroom, .os-stay-headroom) :is(.i, .os-i) { color: var(--accent); display: inline-flex; }
:is(.bk-detail, .os-bk-detail) :is(.stay-headroom, .os-stay-headroom) b { font-weight: 600; color: var(--ink); }
/* empty state when no dives scheduled */
/* Empty state = DM Body/SM (Inter 13). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-trip-empty, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl) { --tl-gap: 14px; padding: 2px 0 0; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) { display: grid; grid-template-columns: 48px 44px minmax(0, 1fr); -moz-column-gap: 14px; column-gap: 14px; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):not(:last-child) { padding-bottom: var(--tl-gap); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-g) :is(.d, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-g) :is(.m, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-g) :is(.dow, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail) { position: relative; display: flex; justify-content: center; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail)::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: var(--hairline); top: 0; bottom: calc(-1 * var(--tl-gap)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):last-child :is(.rail, .os-rail)::before { bottom: 0; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):only-child :is(.rail, .os-rail)::before { display: none; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.node, .os-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); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.node, .os-node) svg { display: block; }
/* Node alignment — BASE = TOP: node + date flush with the card's top edge. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail) { align-items: flex-start; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-g) { padding-top: 13px; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):first-child :is(.rail, .os-rail)::before { top: 20px; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):last-child :is(.rail, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail) { align-items: center; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-g) { align-self: center; padding-top: 0; transform: translateY(calc(50% - 20px)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row):first-child :is(.rail, .os-rail)::before { top: 50%; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row):last-child :is(.rail, .os-rail)::before { top: 0; height: 50%; bottom: auto; }
/* Single-line card (Check-out): centre its node, cap the connector at node centre. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl) :is(.stay-tl-row, .os-stay-tl-row):is(.single, .os-single) :is(.rail, .os-rail) { align-items: center; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl) :is(.stay-tl-row, .os-stay-tl-row):is(.single, .os-single) :is(.g, .os-g) { align-self: center; padding-top: 0; transform: translateY(calc(50% - 20px)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl) :is(.stay-tl-row, .os-stay-tl-row):is(.single, .os-single):last-child :is(.rail, .os-rail)::before { top: 0; height: 50%; bottom: auto; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl) :is(.stay-tl-row, .os-stay-tl-row):is(.single, .os-single):first-child :is(.rail, .os-rail)::before { top: 50%; height: auto; bottom: calc(-1 * var(--tl-gap)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):is(.dive, .os-dive) :is(.node, .os-node) { color: var(--accent); border-color: var(--accent-border); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):is(.lodge, .os-lodge) :is(.node, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 13px 18px; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row):is(.lodge, .os-lodge) :is(.cardc, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.ey, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.ti, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-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 */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.sky, .os-sky) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.sky, .os-sky) :is(.stay-tl-row, .os-stay-tl-row) :is(.node, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.on-surface, .os-on-surface) { --tl-halo: var(--surface); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.sky, .os-sky) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) { border-color: var(--sky-400); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.sky, .os-sky) :is(.stay-tl-row, .os-stay-tl-row):is(.lodge, .os-lodge) :is(.node, .os-node) { border-color: var(--sky-300); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.sky, .os-sky) :is(.stay-tl-row, .os-stay-tl-row):is(.lodge, .os-lodge) :is(.cardc, .os-cardc) { border-color: var(--sky-400); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.sky, .os-sky) :is(.stay-tl-row, .os-stay-tl-row) :is(.g, .os-g) :is(.dow, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful) :is(.stay-tl-row, .os-stay-tl-row).is-past :is(.node, .os-node) { border-width: 2px; border-color: var(--confirmed); background: color-mix(in srgb, var(--confirmed) 12%, var(--surface)); color: var(--confirmed); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful) :is(.stay-tl-row, .os-stay-tl-row).is-past :is(.cardc, .os-cardc) { border-color: var(--confirmed-border); background: color-mix(in srgb, var(--confirmed) 4%, var(--surface)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful) :is(.stay-tl-row, .os-stay-tl-row).is-past :is(.g, .os-g) :is(.d, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful) :is(.stay-tl-row, .os-stay-tl-row).is-today :is(.node, .os-node) { border-width: 2px; border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful) :is(.stay-tl-row, .os-stay-tl-row).is-today :is(.cardc, .os-cardc) { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful) :is(.stay-tl-row, .os-stay-tl-row).is-today :is(.g, .os-g) :is(.dow, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail)::before, :is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail)::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: var(--sky-300); z-index: 0;
}
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail)::before { top: 0; height: auto; bottom: 50%; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row) :is(.rail, .os-rail)::after  { top: 50%; height: auto; bottom: calc(-1 * var(--tl-gap)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row):first-child :is(.rail, .os-rail)::before { display: none; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row):last-child :is(.rail, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row).is-past :is(.rail, .os-rail)::after { background: color-mix(in srgb, var(--green-700) 38%, var(--gray-300)); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl, .os-stay-tl):is(.stateful, .os-stateful):is(.tl-center, .os-tl-center) :is(.stay-tl-row, .os-stay-tl-row):is(.prev-past, .os-prev-past) :is(.rail, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) :is(.sched-time, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) :is(.ti, .os-ti):is(.site, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) :is(.ti, .os-ti):is(.site, .os-site) :is(.site-guide, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) :is(.ti, .os-ti):is(.site, .os-site) :is(.site-guide, .os-site-guide)::before { content: "·"; margin-right: 2px; color: var(--muted-2); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) :is(.ti, .os-ti):is(.site, .os-site) :is(.site-guide, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) a:is(.cardc, .os-cardc) { text-decoration: none; transition: border-color 0.12s ease; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) a:is(.cardc, .os-cardc):hover { border-color: var(--sky-600); }
/* ── 2×2 booking summary ─────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-top: 1px solid var(--hairline-2); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.q, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.q, .os-q):nth-child(-n+2) { border-top: 0; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.q, .os-q):nth-child(odd) { border-left: 0; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.tile, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.k, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.v, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-sum, .os-bd2-sum) :is(.v, .os-v):is(.sm, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-pct, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-pct, .os-bd2-bal-pct):is(.partial, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt) { line-height: 1; font-family: var(--font-mono); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt) :is(.d, .os-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"; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt) :is(.cents, .os-cents) { color: var(--muted-2); font-size: var(--text-xl); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt) :is(.lbl, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt):is(.paid, .os-paid) :is(.d, .os-d), :is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt):is(.paid, .os-paid) :is(.cents, .os-cents), :is(.bk-detail, .os-bk-detail) :is(.bd2-bal-amt, .os-bd2-bal-amt):is(.paid, .os-paid) :is(.lbl, .os-lbl) { color: var(--confirmed); }
/* Paid CTA is a quiet text link (not a button) — there's nothing to collect. */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-link, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-link, .os-bd2-bal-link):hover { text-decoration: underline; }
/* Progress bar = DM .dv-progress treatment (track Border/Hairline, radius-pill). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-bar, .os-bd2-bal-bar) { height: 8px; border-radius: var(--radius-pill); background: var(--hairline); margin-top: 18px; overflow: hidden; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-bar, .os-bd2-bal-bar) :is(.fill, .os-fill) { height: 100%; border-radius: var(--radius-pill); background: var(--confirmed); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-bar, .os-bd2-bal-bar) :is(.fill, .os-fill):is(.partial, .os-partial) { background: var(--accent); }
/* Paid / of row = DM Body/Sub-Copy (13.5). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-row, .os-bd2-bal-row) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: var(--text-sm); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-row, .os-bd2-bal-row) :is(.paid, .os-paid) { font-family: var(--font-mono); font-weight: 600; color: var(--confirmed); white-space: nowrap; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-row, .os-bd2-bal-row) :is(.of, .os-of) { color: var(--muted); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-row, .os-bd2-bal-row) :is(.of, .os-of) :is(.mono, .os-mono) { font-family: var(--font-mono); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-cta, .os-bd2-bal-cta) { margin-top: 16px; }
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-cta, .os-bd2-bal-cta) :is(.dv-btn, .os-btn) { width: 100%; }
/* Empty figure = DM display stat scale (Inter 22/600). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-bal-empty, .os-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 ──────────────────────────────────────── */
:is(.bk-detail, .os-bk-detail) :is(.bd2-acc-row, .os-bd2-acc-row) { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hairline-2); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-acc-row, .os-bd2-acc-row):first-of-type { border-top: 0; }
/* Toggle title = DM Body/Medium (14/500, Text/Primary). Sub = DM Caption (12, Text/Muted). */
:is(.bk-detail, .os-bk-detail) :is(.bd2-acc-row, .os-bd2-acc-row) :is(.t, .os-t) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.bk-detail, .os-bk-detail) :is(.bd2-acc-row, .os-bd2-acc-row) :is(.s, .os-s) { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
/* ── Header: inline Certified badge ──────────────────────── */
:is(.bk-detail-cert, .os-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; }
:is(.bk-detail-cert, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.cardc, .os-cardc) :is(.ti, .os-ti) :is(.qty, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-de):is(.sched, .os-sched) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--accent); }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-de):is(.sched, .os-sched) + :is(.de, .os-de):is(.sched, .os-sched) { margin-top: 3px; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-de):is(.sched, .os-sched) :is(.de-attr, .os-de-attr) { display: inline-flex; align-items: center; gap: 4px; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-de):is(.sched, .os-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). */
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-de):is(.unsched, .os-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; }
:is(.bk-detail, .os-bk-detail) :is(.stay-tl-row, .os-stay-tl-row) :is(.de, .os-de):is(.unsched, .os-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. */
:is(.bk-detail, .os-bk-detail) :is(.waiver-badges, .os-waiver-badges) :is(.inline, .os-inline) { display: contents; }
:is(.bk-detail, .os-bk-detail) :is(.waiver-send-link, .os-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). */
:is(.bk-detail-grid, .os-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) {
  :is(.bk-detail-grid, .os-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). */
  :is(.dv-page-band, .os-page-band) :is(.bk-hero-row, .os-bk-hero-row) { flex-direction: column; align-items: stretch; gap: 12px; }
  :is(.bk-hero-actions, .os-bk-hero-actions) { flex-wrap: wrap; }
  :is(.bk-detail, .os-bk-detail) :is(.bk-contact-line, .os-bk-contact-line) { flex-wrap: wrap; }

  :is(.bk-detail, .os-bk-detail):is(.bk-tabnav, .os-bk-tabnav) :is(.page-tabs, .os-page-tabs), :is(.bk-detail, .os-bk-detail) :is(.bk-tabnav, .os-bk-tabnav) :is(.page-tabs, .os-page-tabs) {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  :is(.bk-detail, .os-bk-detail):is(.bk-tabnav, .os-bk-tabnav) :is(.page-tabs, .os-page-tabs)::-webkit-scrollbar { display: none; }
  :is(.bk-detail, .os-bk-detail):is(.bk-tabnav, .os-bk-tabnav) :is(.page-tab, .os-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. */
  :is(.dv-page-band, .os-page-band) :is(.bk-hero-row, .os-bk-hero-row) { flex-direction: column; align-items: stretch; gap: 12px; }
  :is(.bk-detail, .os-bk-detail) :is(.bk-contact-line, .os-bk-contact-line) { flex-wrap: wrap; }

  :is(.bk-hero-actions, .os-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". */
  :is(.bk-hero-actions, .os-bk-hero-actions) :is(.bk-act-label, .os-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). */
  :is(.bk-hero-actions, .os-bk-hero-actions) :is(.dv-btn, .os-btn) { justify-content: center; }
  /* Edit + Share: square icon buttons — 36×36 to match the button height. */
  :is(.bk-hero-actions, .os-bk-hero-actions) :is(.dv-btn--secondary, .os-btn--secondary) {
    flex: 0 0 auto;
    width: 36px;
    padding-left: 0;
    padding-right: 0;
  }
  /* Cancel (button_to → .inline form): compact danger, natural width. */
  :is(.bk-hero-actions, .os-bk-hero-actions) :is(.inline, .os-inline):not(:is(.bk-primary-action, .os-bk-primary-action)) { flex: 0 0 auto; display: flex; }
  /* Send waiver (primary form): fills the remaining width. */
  :is(.bk-hero-actions, .os-bk-hero-actions) :is(.bk-primary-action, .os-bk-primary-action) { flex: 1 1 auto; display: flex; }
  :is(.bk-hero-actions, .os-bk-hero-actions) :is(.bk-primary-action, .os-bk-primary-action) :is(.dv-btn, .os-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:is(.bk-detail, .os-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. */
:is(.dv-dot-strip, .os-dot-strip) {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}
:is(.dv-status-dot, .os-status-dot) {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="confirmed"] {
  background: var(--status-confirmed-bg);
  border: 1.5px solid var(--status-confirmed-border);
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="briefing"] {
  background: var(--status-briefing-bg);
  border: 1.5px solid var(--status-briefing-border);
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="in_water"] {
  background: var(--status-in-water-bg);
  border: 1.5px solid var(--status-in-water-border);
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="returning"] {
  background: var(--status-returning-bg);
  border: 1.5px solid var(--status-returning-border);
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="completed"] {
  background: var(--status-completed-bg);
  border: 1.5px solid var(--status-completed-border);
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="cancelled"] {
  background: var(--status-cancelled-bg);
  border: 1.5px solid var(--status-cancelled-border);
}
:is(.dv-status-dot, .os-status-dot)[data-status-key="pending"] {
  background: var(--status-pending-bg);
  border: 1.5px solid var(--status-pending-border);
}
/* ─── Stops timeline ─────────────────────────────────────────────────── */
:is(.dv-timeline, .os-timeline) {
  list-style: none;
  margin: 0;
  padding: 0 16px;
}
:is(.dv-timeline__node, .os-timeline__node) {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 48px;
}
:is(.dv-timeline__marker-col, .os-timeline__marker-col) {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  padding-top: 2px;
}
:is(.dv-timeline__number, .os-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. */
:is(.dv-timeline__number--board, .os-timeline__number--board) {
  background: var(--surface-alt);
  border-color: var(--hairline-strong);
  color: var(--muted);
}
:is(.dv-timeline__line, .os-timeline__line) {
  width: 1.5px;
  flex: 1;
  min-height: 16px;
  background: var(--hairline);
  margin-top: 4px;
}
:is(.dv-timeline__content, .os-timeline__content) {
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
}
:is(.dv-timeline__node--last, .os-timeline__node--last) :is(.dv-timeline__content, .os-timeline__content) {
  padding-bottom: 8px;
}
:is(.dv-timeline__link, .os-timeline__link) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}
:is(.dv-timeline__link, .os-timeline__link):hover :is(.dv-timeline__title, .os-timeline__title) {
  color: var(--accent);
}
:is(.dv-timeline__link, .os-timeline__link):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}
:is(.dv-timeline__title, .os-timeline__title) {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  transition: color 0.12s;
}
:is(.dv-timeline__meta, .os-timeline__meta) {
  font-size: var(--text-xs);
  color: var(--muted);
}
/* ─── Divers roster ──────────────────────────────────────────────────── */
:is(.dv-roster, .os-roster) {
  padding: 0 16px;
}
:is(.dv-roster-group, .os-roster-group) {
  margin-bottom: 12px;
}
:is(.dv-roster-group__header, .os-roster-group__header) {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
:is(.dv-roster-group__label, .os-roster-group__label) {
  flex: 1;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
:is(.dv-roster-group__count, .os-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. */
:is(.dv-roster-group__count--over, .os-roster-group__count--over) {
  color: var(--briefing);
}
:is(.dv-roster-group__placeholder, .os-roster-group__placeholder) {
  margin: 0;
  padding: 8px 0;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--muted-2);
}
:is(.dv-roster-row--draggable, .os-roster-row--draggable) {
  cursor: grab;
}
:is(.dv-roster-row--draggable, .os-roster-row--draggable):active {
  cursor: grabbing;
}
:is(.dv-roster-row, .os-roster-row) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
:is(.dv-roster-row, .os-roster-row):last-child {
  border-bottom: none;
}
:is(.dv-roster-row__info, .os-roster-row__info) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
:is(.dv-roster-row__name, .os-roster-row__name) {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.dv-roster-row__cert, .os-roster-row__cert) {
  font-size: var(--text-xs);
  color: var(--muted);
}
:is(.dv-roster-row__actions, .os-roster-row__actions) {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
:is(.dv-roster-row__checked-in, .os-roster-row__checked-in) {
  color: var(--confirmed);
  display: flex;
}
:is(.dv-roster-guide-form, .os-roster-guide-form) {
  margin: 0;
}
:is(.dv-roster-guide-select, .os-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;
}
:is(.dv-roster-guide-select, .os-roster-guide-select):hover {
  border-color: var(--hairline-strong);
}
:is(.dv-roster-guide-select, .os-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) {
  :is(.dv-roster-guide-select, .os-roster-guide-select) {
    min-height: 44px;
  }
}
/* ═══ Gear-return board · overall progress (PR-E1, prototype return.css) ═══ */
:is(.dv-return-bar, .os-return-bar) {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}
:is(.dv-return-bar, .os-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) {
  :is(.trip-body, .os-trip-body):has([data-tab="return"][data-tab-panel-target="panel"]:not([hidden])) {
    grid-template-columns: 1fr;
  }
  :is(.trip-body, .os-trip-body):has([data-tab="return"][data-tab-panel-target="panel"]:not([hidden])) :is(.trip-rail, .os-trip-rail) {
    display: none;
  }
}
/* ═══ Plan rail · trip-equipment loadout card (PR-B1, prototype .pt-equip) ═══ */
/* info_card's .os-card clips (overflow:hidden) and exposes no overflow hook; the
   add-item .os-pop popover drops below the card, so relax the wrapper's card
   here rather than forking the os-ds partial. */
.os-equip-card > .os-card { overflow: visible; }
:is(.dv-equip, .os-equip) { display: flex; flex-direction: column; gap: 12px; }
:is(.dv-equip__row, .os-equip__row) { display: flex; align-items: center; gap: 10px; }
:is(.dv-equip__ic, .os-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;
}
:is(.dv-equip__txt, .os-equip__txt) { flex: 1; min-width: 0; }
:is(.dv-equip__name, .os-equip__name) { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
:is(.dv-equip__sub, .os-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). */
:is(.dv-equip__check, .os-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;
}
:is(.dv-equip__check, .os-equip__check) :is(.lucide, .os-lucide) { opacity: 0; transition: opacity .1s; }
:is(.dv-equip__check, .os-equip__check):hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(.dv-equip__check, .os-equip__check):hover :is(.lucide, .os-lucide) { opacity: .45; color: var(--accent); }
:is(.dv-equip__check, .os-equip__check).is-on { background: var(--confirmed); border-color: var(--confirmed); }
:is(.dv-equip__check, .os-equip__check).is-on :is(.lucide, .os-lucide) { opacity: 1; color: var(--surface); }
:is(.dv-equip__check, .os-equip__check).is-on:hover { box-shadow: 0 0 0 3px var(--confirmed-bg); }
:is(.dv-equip__check--static, .os-equip__check--static) { cursor: default; }
:is(.dv-equip__check--static, .os-equip__check--static):hover { border-color: var(--hairline-strong); box-shadow: none; }
:is(.dv-equip__check--static, .os-equip__check--static):hover :is(.lucide, .os-lucide) { opacity: 0; }
:is(.dv-equip__check--static, .os-equip__check--static).is-on:hover :is(.lucide, .os-lucide) { opacity: 1; color: var(--surface); }
/* Hybrid link: identifier link-out on a linked row's detail line. */
:is(.dv-equip__sub, .os-equip__sub) a { color: var(--muted); text-decoration: none; }
:is(.dv-equip__sub, .os-equip__sub) a:hover { color: var(--accent); }
/* Hover ✕ remove — same affordance as the roster row-list. */
:is(.dv-equip__row, .os-equip__row) form { display: contents; }
:is(.dv-equip__x, .os-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;
}
:is(.dv-equip__row, .os-equip__row):hover :is(.dv-equip__x, .os-equip__x), :is(.dv-equip__row, .os-equip__row):focus-within :is(.dv-equip__x, .os-equip__x) { opacity: 1; }
:is(.dv-equip__x, .os-equip__x):hover { background: var(--cancelled-bg); color: var(--cancelled); }
/* Add-item foot: ghost trigger anchoring the .dv-pop picker. */
:is(.dv-equip__foot, .os-equip__foot) { margin-top: 2px; }
:is(.dv-equip__custom, .os-equip__custom) {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-top: 1px solid var(--hairline);
}
:is(.dv-equip__custom, .os-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);
}
:is(.dv-equip__custom, .os-equip__custom) input::-moz-placeholder { color: var(--muted-2); }
:is(.dv-equip__custom, .os-equip__custom) input::placeholder { color: var(--muted-2); }
:is(.dv-equip__custom-actions, .os-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. */
:is(.dv-tag-menu, .os-tag-menu) { position: relative; display: inline-flex; }
:is(.dv-tag-menu__summary, .os-tag-menu__summary) {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:is(.dv-tag-menu__summary, .os-tag-menu__summary)::-webkit-details-marker { display: none; }
:is(.dv-tag-menu__panel, .os-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;
}
:is(.dv-tag-menu__opt, .os-tag-menu__opt), :is(.dv-tag-menu__panel, .os-tag-menu__panel) form { display: flex; width: 100%; }
:is(.dv-tag-menu__opt, .os-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;
}
:is(.dv-tag-menu__opt, .os-tag-menu__opt):hover { background: var(--surface-alt); }
/* ═══ Generic slim progress bar (PR-B2 — Guest-fitting rail card) ═══ */
:is(.dv-progress, .os-progress) {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}
:is(.dv-progress, .os-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) ═══ */
:is(.dv-preflight, .os-preflight) { max-width: 560px; margin: 8px auto 0; }
:is(.dv-preflight__rows, .os-preflight__rows) { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
:is(.dv-preflight__row, .os-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);
}
:is(.dv-preflight__row, .os-preflight__row).is-warn { border-color: var(--pending-border); background: var(--pending-bg); }
:is(.dv-preflight__ic, .os-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);
}
:is(.dv-preflight__row, .os-preflight__row).is-warn :is(.dv-preflight__ic, .os-preflight__ic) { background: var(--surface); color: var(--pending); }
:is(.dv-preflight__txt, .os-preflight__txt) { flex: 1; min-width: 0; }
:is(.dv-preflight__foot, .os-preflight__foot) { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
:is(.dv-preflight__foot, .os-preflight__foot) :is(.note, .os-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). */
:is(.dv-tab__div, .os-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). */
:is(.field-section-title, .os-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;
}
:is(.side-panel__body, .os-side-panel__body) > :is(.field-section-title, .os-field-section-title):first-child, :is(.field-section-title, .os-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 */
:is(.tm-summary-head, .os-tm-summary-head) {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
:is(.tm-summary-avatar, .os-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));
}
:is(.tm-summary-id, .os-tm-summary-id) { min-width: 0; flex: 1; }
:is(.tm-summary-name, .os-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);
}
:is(.tm-summary-role, .os-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) */
:is(.tm-dl, .os-tm-dl) { display: grid; gap: 0; }
:is(.tm-dl-row, .os-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);
}
:is(.tm-dl-row, .os-tm-dl-row):last-child { border-bottom: none; }
:is(.tm-dl-row, .os-tm-dl-row) dt {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.tm-dl-row, .os-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. */
:is(.tm-edit, .os-tm-edit) { margin-top: 20px; }
:is(.tm-edit, .os-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;
}
:is(.tm-edit, .os-tm-edit) > summary::-webkit-details-marker { display: none; }
:is(.tm-edit, .os-tm-edit) > summary:hover { color: var(--accent-strong); }
:is(.tm-edit, .os-tm-edit) > summary :is(.tm-edit-chevron, .os-tm-edit-chevron) { transition: transform 0.15s ease; }
:is(.tm-edit, .os-tm-edit)[open] > summary :is(.tm-edit-chevron, .os-tm-edit-chevron) { transform: rotate(180deg); }
:is(.tm-edit, .os-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). */
:is(.lead-drawer__ident, .os-lead-drawer__ident) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
:is(.lead-drawer__avatar, .os-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;
}
:is(.lead-drawer__contact, .os-lead-drawer__contact) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* 3-up tap-to-act channel row. */
:is(.lead-drawer__channels, .os-lead-drawer__channels) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 18px;
}
:is(.lead-drawer__chan, .os-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;
}
:is(.lead-drawer__chan, .os-lead-drawer__chan) span {
  font-size: var(--text-xs);
  font-weight: 600;
}
:is(.lead-drawer__chan, .os-lead-drawer__chan) small {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.2;
  max-width: 100%;
}
:is(.lead-drawer__chan, .os-lead-drawer__chan):hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
:is(.lead-drawer__chan, .os-lead-drawer__chan).is-preferred {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
:is(.lead-drawer__chan, .os-lead-drawer__chan).is-empty {
  color: var(--muted-2);
  cursor: default;
}
:is(.lead-drawer__chan, .os-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. */
:is(.lead-drawer__facts, .os-lead-drawer__facts) {
  margin: 0 0 18px;
}
/* Notes block. */
:is(.lead-drawer__notes, .os-lead-drawer__notes) {
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: 10px;
}
:is(.lead-drawer__notes, .os-lead-drawer__notes) :is(.dv-eyebrow, .os-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. */
:is(.lead-card-clickable, .os-lead-card-clickable) { position: relative; }
:is(.lead-card-clickable__link, .os-lead-card-clickable__link)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
:is(.lead-card-clickable__action, .os-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. */
:is(.lead-card-clickable__link, .os-lead-card-clickable__link), :is(.lead-card-clickable__link, .os-lead-card-clickable__link):hover, :is(.lead-card-clickable__link, .os-lead-card-clickable__link):focus {
  color: inherit;
  text-decoration: none;
}
:is(.kanban-card, .os-kanban-card):is(.lead-card-clickable, .os-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). */
:is(.lead-drawer__email-capture, .os-lead-drawer__email-capture) {
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
:is(.lead-drawer__email-capture__label, .os-lead-drawer__email-capture__label) {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-bottom: 2px;
}
:is(.lead-drawer__email-capture, .os-lead-drawer__email-capture) p { margin: 0 0 8px; }
/* #385 — the party affordance: a guest's email, linked to the board filtered
   down to everyone who registered with it. Reads as muted card text until
   hovered, because the address is information first and a control second; the
   count badge beside it is what signals there is something to click.
   On the kanban card this link ALSO carries .lead-card-clickable__action, which
   is what lifts it above the stretched ::after overlay (see above) — without
   that the click opens the drawer instead of filtering. */
.lead-party-link { color: inherit; text-decoration: none; }
.lead-party-link:hover .os-meta,
.lead-party-link:focus-visible .os-meta { color: var(--accent); text-decoration: underline; }
.lead-party-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* ── 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. */
:is(.org-hero, .os-org-hero) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 640px) {
  :is(.org-hero, .os-org-hero) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  :is(.org-hero, .os-org-hero) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:is(.org-hero__figure, .os-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). */
:is(.org-outlets, .os-org-outlets) { margin-top: var(--space-5); }
:is(.org-outlets__list, .os-org-outlets__list) {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
:is(.org-outlet-row, .os-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;
}
:is(.org-outlet-row, .os-org-outlet-row) + :is(.org-outlet-row, .os-org-outlet-row) { border-top: 1px solid var(--hairline); }
:is(.org-outlet-row, .os-org-outlet-row):hover { background: var(--surface-alt); }
:is(.org-outlet-row__id, .os-org-outlet-row__id) { min-width: 0; }
:is(.org-outlet-row__name, .os-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. */
:is(.org-outlet-row__right, .os-org-outlet-row__right) {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
:is(.org-outlet-row__kpis, .os-org-outlet-row__kpis) {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  text-align: right;
  margin: 0;
}
:is(.org-outlet-row__kpi-value, .os-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 ─────────────────────────────────────────────────── */
:is(.cockpit-controls, .os-cockpit-controls) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
:is(.cockpit-controls__right, .os-cockpit-controls__right) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
:is(.cockpit-presets, .os-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;
}
:is(.cockpit-preset, .os-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;
}
:is(.cockpit-preset, .os-cockpit-preset):hover { color: var(--ink); }
:is(.cockpit-preset, .os-cockpit-preset).is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.06));
}
:is(.cockpit-range, .os-cockpit-range) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
:is(.cockpit-range__date, .os-cockpit-range__date) { width: auto; }
/* ── Cockpit: KPI grid ─────────────────────────────────────────────────── */
:is(.cockpit-kpis, .os-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) {
  :is(.cockpit-kpis, .os-cockpit-kpis) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:is(.cockpit-kpi__figure, .os-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);
}
:is(.cockpit-kpi__foot, .os-cockpit-kpi__foot) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
:is(.cockpit-delta, .os-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);
}
:is(.cockpit-delta--up, .os-cockpit-delta--up)   { color: var(--confirmed); background: var(--confirmed-bg); }
:is(.cockpit-delta--down, .os-cockpit-delta--down) { color: var(--cancelled); background: var(--cancelled-bg); }
:is(.cockpit-delta--flat, .os-cockpit-delta--flat) { color: var(--text-muted); background: var(--surface-alt); }
/* ── Cockpit: charts grid ──────────────────────────────────────────────── */
:is(.cockpit-charts, .os-cockpit-charts) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  :is(.cockpit-charts, .os-cockpit-charts) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Customer stat trio (3-up on desktop). */
@media (min-width: 768px) {
  :is(.cockpit-kpis--trio, .os-cockpit-kpis--trio) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ── Cockpit: source table (inside a chart card) ───────────────────────────── */
:is(.cockpit-table-wrap, .os-cockpit-table-wrap) { overflow-x: auto; }
:is(.cockpit-table, .os-cockpit-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
:is(.cockpit-table, .os-cockpit-table) th, :is(.cockpit-table, .os-cockpit-table) td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
:is(.cockpit-table, .os-cockpit-table) th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
:is(.cockpit-table, .os-cockpit-table) td { color: var(--ink); }
:is(.cockpit-table, .os-cockpit-table) :is(.num, .os-num) {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
:is(.cockpit-table, .os-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/*.
   ───────────────────────────────────────────────────────────────────── */
:is(.waiver-shell, .os-waiver-shell) {
  display: block;
}
/* Form column caps at ~640px per the approved design; centered on mobile. */
:is(.waiver-form-col, .os-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). */
:is(.waiver-rail, .os-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. */
  :is(.waiver-shell, .os-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);
  }

  :is(.waiver-rail, .os-waiver-rail) {
    display: block;
  }

  :is(.waiver-form-col, .os-waiver-form-col) {
    margin-inline: 0;
  }

  :is(.waiver-rail__inner, .os-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). */
  :is(.engine-shell-wide, .os-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;
  }
}
:is(.waiver-rail__note, .os-waiver-rail__note) {
  border-left: 2px solid var(--accent-border);
  padding-left: 0.875rem;
}
:is(.waiver-rail__privacy, .os-waiver-rail__privacy) {
  margin-top: 0.25rem;
}
/* ── Vertical scroll-spy step list ─────────────────────────────────── */
:is(.waiver-rail-steps, .os-waiver-rail-steps) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
:is(.waiver-rail-step, .os-waiver-rail-step) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md, 8px);
}
:is(.waiver-rail-step__marker, .os-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);
}
:is(.waiver-rail-step__label, .os-waiver-rail-step__label) {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-2);
}
:is(.waiver-rail-step, .os-waiver-rail-step).is-done :is(.waiver-rail-step__marker, .os-waiver-rail-step__marker) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:is(.waiver-rail-step, .os-waiver-rail-step).is-done :is(.waiver-rail-step__label, .os-waiver-rail-step__label) {
  color: var(--ink);
}
:is(.waiver-rail-step, .os-waiver-rail-step).is-current {
  background-color: var(--accent-soft);
}
:is(.waiver-rail-step, .os-waiver-rail-step).is-current :is(.waiver-rail-step__marker, .os-waiver-rail-step__marker) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:is(.waiver-rail-step, .os-waiver-rail-step).is-current :is(.waiver-rail-step__label, .os-waiver-rail-step__label) {
  color: var(--accent);
  font-weight: 600;
}
/* ── Medical questionnaire: forced Yes/No per question (#349) ──────────
   The answer is the tap target, not the row — a stray tap on the question
   text can no longer declare a medical condition. Both targets clear 44px. */
:is(.waiver-medical-q, .os-waiver-medical-q) {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 8px);
  background-color: var(--surface);
  padding: 1rem;
  margin: 0;
}
:is(.waiver-medical-q, .os-waiver-medical-q).is-invalid {
  border-color: var(--cancelled-border, var(--hairline-strong));
}
:is(.waiver-medical-q__legend, .os-waiver-medical-q__legend) {
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
:is(.waiver-medical-q__hint, .os-waiver-medical-q__hint) {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted);
}
:is(.waiver-medical-q__answers, .os-waiver-medical-q__answers) {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
:is(.waiver-medical-answer, .os-waiver-medical-answer) {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44px — Fitts's Law floor for a touch target */
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 8px);
  background-color: var(--surface);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
:is(.waiver-medical-answer, .os-waiver-medical-answer):hover {
  background-color: var(--surface-alt);
}
/* The native input stays in the accessibility tree (keyboard + screen reader
   reach it, and it is what actually posts) but the label is the visible
   control. */
:is(.waiver-medical-answer__input, .os-waiver-medical-answer__input) {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
:is(.waiver-medical-answer__label, .os-waiver-medical-answer__label) {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-2);
}
:is(.waiver-medical-answer, .os-waiver-medical-answer):has(:checked) {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}
:is(.waiver-medical-answer, .os-waiver-medical-answer):has(:checked)
  :is(.waiver-medical-answer__label, .os-waiver-medical-answer__label) {
  color: var(--accent);
  font-weight: 600;
}
:is(.waiver-medical-answer, .os-waiver-medical-answer):has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:is(.waiver-medical-none, .os-waiver-medical-none) {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 1rem;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 8px);
  background-color: var(--surface-alt);
  cursor: pointer;
}
:is(.waiver-medical-none, .os-waiver-medical-none):hover {
  border-color: var(--hairline-strong);
}
/* Mobile / tablet (<1024px): the sticky step-progress bar is a full-bleed white
   band, flush under the page header. It lives inside the ~640px form column
   (and, on tablet, that column is centred with the shell background showing at
   the sides) — so span the whole viewport regardless, re-centre the content to
   the reading column, and pull up to cancel the engine wrapper's top gutter
   (py-6 / sm:py-8) so it sits flush against the header instead of floating in a
   band of the page background. */
@media (max-width: 1023px) {
  :is(.wizard-progress-mobile, .os-wizard-progress-mobile) {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1rem, calc(50vw - 20rem)); /* content re-centred to 640px */
    margin-top: -1.5rem;                            /* cancel wrapper py-6 (24px) */
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  :is(.wizard-progress-mobile, .os-wizard-progress-mobile) {
    padding-inline: max(1.5rem, calc(50vw - 20rem));
    margin-top: -2rem;                              /* cancel wrapper sm:py-8 (32px) */
  }
}
/* 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. */
:is(.bc, .os-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;
}
:is(.bc, .os-bc) * { box-sizing: border-box; }
:is(.bc-wrap, .os-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). */
:is(.bc, .os-bc) :is(.dv-display, .os-display), :is(.bc, .os-bc) :is(.dv-h2, .os-h2), :is(.bc, .os-bc) :is(.dv-h3, .os-h3), :is(.bc, .os-bc) :is(.dv-h4, .os-h4) { font-weight: 700; }
:is(.bc, .os-bc) :is(.dv-btn, .os-btn) { font-weight: 600; }
/* Keep an eyebrow's icon + text on one line. */
:is(.bc, .os-bc) :is(.dv-eyebrow, .os-eyebrow) { display: inline-flex; align-items: center; gap: 6px; }
/* Two-tone marketing headings: the <em> highlight uses the accent. */
:is(.bc, .os-bc) :is(.dv-display, .os-display) em, :is(.bc, .os-bc) :is(.dv-h2, .os-h2) em, :is(.bc, .os-bc) :is(.dv-h3, .os-h3) em { color: var(--accent); font-style: normal; }
/* Marketing hero heading runs larger than the app display scale. */
:is(.bc-hm-card, .os-bc-hm-card) :is(.dv-display, .os-display) { font-size: 40px; line-height: 1.08; }
:is(.bc-sub, .os-bc-sub) { color: var(--mut); max-width: 560px; margin: 12px auto 0; }
/* Full-width buttons in card / offering feet. */
:is(.bc-card-foot, .os-bc-card-foot) :is(.dv-btn, .os-btn), :is(.bc-off-body, .os-bc-off-body) :is(.dv-btn, .os-btn) { width: 100%; }
/* checklist */
:is(.mkt-checks, .os-mkt-checks) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; }
:is(.mkt-checks, .os-mkt-checks) li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tx); line-height: 1.45; }
:is(.mkt-checks, .os-mkt-checks) li svg { color: var(--acc); flex: none; margin-top: 1px; }
/* nav */
:is(.bc-nav, .os-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); }
:is(.bc-nav, .os-bc-nav) :is(.bc-wrap, .os-bc-wrap) { display: flex; align-items: center; gap: 20px; height: 68px; }
:is(.bc-brand, .os-bc-brand) { display: flex; align-items: center; gap: 10px; }
:is(.bc-brand__mark, .os-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; }
:is(.bc-brand__logo, .os-bc-brand__logo) { height: 38px; width: auto; max-width: 150px; -o-object-fit: contain; object-fit: contain; flex: none; }
:is(.bc-brand__name, .os-bc-brand__name) { color: var(--nk); font-weight: 700; font-size: 16px; line-height: 1.05; }
:is(.bc-brand__tag, .os-bc-brand__tag) { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut2); }
:is(.bc-navcta, .os-bc-navcta) { margin-left: auto; display: flex; align-items: center; gap: 18px; }
:is(.bc-phone, .os-bc-phone) { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mut); }
/* hero mosaic */
:is(.bc-hm, .os-bc-hm) { background: transparent; padding: 44px 0 8px; }
:is(.bc-hm-inner, .os-bc-hm-inner) { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
:is(.bc-hm-mosaic, .os-bc-hm-mosaic) { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 238px; gap: 14px; }
:is(.bc-hm-tile, .os-bc-hm-tile) { position: relative; border-radius: 18px; overflow: hidden; background: var(--line2); }
:is(.bc-hm-tile, .os-bc-hm-tile) img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
:is(.bc-hm-tile, .os-bc-hm-tile):is(.bc-hm-t1, .os-bc-hm-t1) { grid-column: span 2; grid-row: span 2; }
:is(.bc-hm-tile, .os-bc-hm-tile):is(.bc-hm-t4, .os-bc-hm-t4) { grid-column: span 2; }
:is(.bc-hm-cap, .os-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); }
:is(.bc-hm-card, .os-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; }
:is(.bc-hm-card, .os-bc-hm-card) :is(.dv-display, .os-display) { margin-top: 12px; }
:is(.bc-hm-card, .os-bc-hm-card) p { color: var(--tx); font-size: 16px; line-height: 1.6; margin: 16px auto 0; max-width: 400px; }
:is(.bc-hm-cta, .os-bc-hm-cta) { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
/* trust strip */
:is(.bc-strip, .os-bc-strip) { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); margin-top: 24px; }
:is(.bc-strip, .os-bc-strip) :is(.bc-wrap, .os-bc-wrap) { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 16px 24px; }
:is(.bc-strip, .os-bc-strip) span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mut); }
:is(.bc-strip, .os-bc-strip) svg { color: var(--acc); }
/* section shell */
:is(.bc-sec, .os-bc-sec) { padding: 68px 0; }
:is(.bc-head, .os-bc-head) { text-align: center; max-width: 640px; margin: 0 auto 40px; }
/* package cards */
:is(.bc-grid, .os-bc-grid) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
:is(.bc-card, .os-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; }
:is(.bc-card, .os-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. */
:is(.bc-card-media, .os-bc-card-media) { position: relative; height: 340px; background: var(--line2); overflow: hidden; }
:is(.bc-card-media, .os-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); }
:is(.bc-card-scrim, .os-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; }
:is(.bc-card-hero, .os-bc-card-hero) { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
/* Immersive hover: card lifts, photo slow-zooms, title/price rise, gradient deepens. */
:is(.bc-card, .os-bc-card):hover { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(15,23,42,.18); }
:is(.bc-card, .os-bc-card).is-feat:hover { box-shadow: 0 36px 78px rgba(3,105,161,.26); }
:is(.bc-card, .os-bc-card):not(.is-feat):hover { border-color: var(--acc); }
:is(.bc-card, .os-bc-card):hover :is(.bc-card-media, .os-bc-card-media) img { transform: scale(1.1); }
:is(.bc-card, .os-bc-card):hover :is(.bc-card-scrim, .os-bc-card-scrim) { opacity: .82; }
:is(.bc-card, .os-bc-card):hover :is(.bc-card-hero, .os-bc-card-hero) { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  :is(.bc-card, .os-bc-card), :is(.bc-card-media, .os-bc-card-media) img, :is(.bc-card-hero, .os-bc-card-hero), :is(.bc-card-scrim, .os-bc-card-scrim) { transition: none; }
  :is(.bc-card, .os-bc-card):hover { transform: none; }
  :is(.bc-card, .os-bc-card):hover :is(.bc-card-media, .os-bc-card-media) img { transform: none; }
}
:is(.bc-days-chip, .os-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); }
:is(.bc-card-ribbon, .os-bc-card-ribbon) { position: absolute; top: 14px; right: 14px; z-index: 2; }
:is(.bc-card-hero, .os-bc-card-hero) { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 22px 24px; text-align: center; color: #fff; }
:is(.bc-card-title, .os-bc-card-title) { color: #fff; font-weight: 700; letter-spacing: -.02em; font-size: 18px; line-height: 1.25; margin: 0; }
:is(.bc-card-price, .os-bc-card-price) { margin-top: 8px; }
:is(.bc-card-price, .os-bc-card-price) b { display: block; color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
:is(.bc-card-price, .os-bc-card-price) span { display: block; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 5px; }
:is(.bc-card-body, .os-bc-card-body) { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
:is(.bc-card-blurb, .os-bc-card-blurb) { color: var(--mut); font-size: 14px; line-height: 1.5; margin: 0 0 16px; text-align: center; }
:is(.bc-card-cat, .os-bc-card-cat) { text-align: center; color: var(--acc); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
/* Per-category browse catalogue (Fun Dives / Try Dives / Courses) — reuses the
   storefront package grid + card; only the back link is bespoke. */
:is(.bc-back, .os-bc-back) { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); }
/* 12px, not 13px: a muted meta line sits one step under the 14px blurb, and
   12px is already the meta size elsewhere in this sheet (.bc-card-price span).
   13px was the only value in this file outside the accepted baseline. */
:is(.bc-card-loc, .os-bc-card-loc) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--mut); font-size: 12px; margin: 0 auto 16px; }
:is(.bc-card-loc, .os-bc-card-loc) svg { color: var(--acc); flex: none; }
:is(.bc-card-foot, .os-bc-card-foot) { margin-top: auto; padding-top: 22px; }
/* instagram / gallery — full bleed */
:is(.bc-gram, .os-bc-gram) { padding: 44px 0 60px; }
:is(.bc-gram-head, .os-bc-gram-head) { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
:is(.bc-gram-head, .os-bc-gram-head) h2 { margin-top: 8px; }
:is(.bc-gram-head, .os-bc-gram-head) p { color: var(--mut); font-size: 15px; margin: 8px 0 0; }
:is(.bc-gram-grid, .os-bc-gram-grid) { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
:is(.bc-gram-grid, .os-bc-gram-grid):is(.full, .os-full) { grid-template-columns: repeat(8, 1fr); }
:is(.bc-gram-tile, .os-bc-gram-tile) { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--line2); display: block; }
:is(.bc-gram-tile, .os-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); }
:is(.bc-gram-ov, .os-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; }
:is(.bc-gram-tile, .os-bc-gram-tile):hover :is(.bc-gram-ov, .os-bc-gram-ov) { opacity: 1; }
:is(.bc-gram-tile, .os-bc-gram-tile):hover img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { :is(.bc-gram-tile, .os-bc-gram-tile) img { transition: none; } :is(.bc-gram-tile, .os-bc-gram-tile):hover img { transform: none; } }
/* custom quote */
:is(.bc-cust, .os-bc-cust) { background: var(--bg); }
:is(.bc-cust, .os-bc-cust) :is(.bc-wrap, .os-bc-wrap) { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
:is(.bc-cust-media, .os-bc-cust-media) { aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: var(--line2); }
:is(.bc-cust-media, .os-bc-cust-media) img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
:is(.bc-cust, .os-bc-cust) h2 { margin-top: 12px; }
:is(.bc-cust, .os-bc-cust) p { color: var(--tx); font-size: 16px; line-height: 1.6; margin: 16px 0 0; }
:is(.bc-cust-actions, .os-bc-cust-actions) { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
/* offerings */
:is(.bc-off-grid, .os-bc-off-grid) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
:is(.bc-off-card, .os-bc-off-card) { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
:is(.bc-off-media, .os-bc-off-media) { position: relative; height: 150px; background: var(--line2); }
:is(.bc-off-media, .os-bc-off-media) img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
:is(.bc-off-tag, .os-bc-off-tag) { position: absolute; top: 12px; left: 12px; }
:is(.bc-off-body, .os-bc-off-body) { display: flex; flex-direction: column; flex: 1; padding: 20px; }
:is(.bc-off-body, .os-bc-off-body) p { color: var(--mut); font-size: 14px; line-height: 1.55; margin: 10px 0 18px; flex: 1; }
/* footer */
:is(.bc-foot, .os-bc-foot) { border-top: 1px solid var(--line); background: #D8E6F4; padding: 56px 0 0; }
:is(.bc-foot-grid, .os-bc-foot-grid) { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; }
:is(.bc-foot-desc, .os-bc-foot-desc) { color: var(--mut); font-size: 14px; line-height: 1.6; margin: 16px 0 0; max-width: 360px; }
:is(.bc-foot-h, .os-bc-foot-h) { color: var(--nk); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
:is(.bc-contact, .os-bc-contact) { display: flex; gap: 10px; margin-bottom: 13px; font-size: 14px; color: var(--tx); align-items: flex-start; }
:is(.bc-contact, .os-bc-contact) svg { color: var(--acc); flex: none; margin-top: 2px; }
:is(.bc-foot-bottom, .os-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); }
:is(.bc-foot-bottom, .os-bc-foot-bottom) :is(.dv-figure, .os-figure) { letter-spacing: .08em; }
@media (max-width: 960px) {
  /* Roomier edge gutters on smaller screens. */
  :is(.bc-wrap, .os-bc-wrap), :is(.bc-hm-inner, .os-bc-hm-inner) { padding-left: 32px; padding-right: 32px; }
  :is(.bc-hm-card, .os-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); }
  :is(.bc-grid, .os-bc-grid), :is(.bc-off-grid, .os-bc-off-grid), :is(.bc-foot-grid, .os-bc-foot-grid) { grid-template-columns: 1fr; }
  :is(.bc-cust, .os-bc-cust) :is(.bc-wrap, .os-bc-wrap) { grid-template-columns: 1fr; }
  :is(.bc-gram-grid, .os-bc-gram-grid), :is(.bc-gram-grid, .os-bc-gram-grid):is(.full, .os-full) { grid-template-columns: repeat(4, 1fr); }
  :is(.bc-hm-mosaic, .os-bc-hm-mosaic) { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  :is(.bc-hm-tile, .os-bc-hm-tile):is(.bc-hm-t1, .os-bc-hm-t1), :is(.bc-hm-tile, .os-bc-hm-tile):is(.bc-hm-t4, .os-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. */
:is(.btn-toggle, .os-btn-toggle):has(input:checked) :is(.button-alternative, .os-button-alternative) {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
:is(.btn-toggle, .os-btn-toggle):has(input:checked) :is(.button-alternative, .os-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:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)), button:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)) {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
a:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover, button:is(.button, .os-button):not(:is(.button-secondary, .os-button-secondary)):not(:is(.button-alternative, .os-button-alternative)):hover {
  background-color: var(--accent-strong, var(--accent)) !important;
}
/* Dashboard Layout Containers */
:is(.dashboard-upper-container, .os-dashboard-upper-container) {
  /* margin-bottom: 32px !important; */
}
/* Margins between sections in the lower dashboard container */
:is(.dashboard-lower-container, .os-dashboard-lower-container)>* {
  margin-bottom: 32px !important;
}
:is(.dashboard-lower-container, .os-dashboard-lower-container)>*:last-child {
  margin-bottom: 0 !important;
}
/* Table Improvements */
:is(.table, .os-table) {
  background-color: transparent;
  border-collapse: separate;
  /* Required for sticky header borders and box-shadow */
  border-spacing: 0;
}
/* Zebra Striping - Light Mode */
:is(.table-striped, .os-table-striped) tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}
:is(.table-striped, .os-table-striped) tbody tr:nth-child(odd) {
  background-color: transparent;
}
/* --- Sticky Header ---
   Fixes the header to the top of the table container for vertical scrolling.
*/
/* Sticky Header */
:is(.table, .os-table) thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: white;
  transition: box-shadow 0.2s ease;
  border-bottom: 1px solid #e5e7eb;
}
/* Ensure the sentinel doesn't affect layout */
:is(.sticky-sentinel, .os-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.
   DESKTOP ONLY (min-width: 769px): below that the table collapses to a card
   stack (no horizontal scroll), where these z-index:25-31 sticky cells served
   no purpose and painted OVER the sticky page header while scrolling.
*/
@media (min-width: 769px) {
/* Dual Sticky Columns (Checkbox + Identity) */

/* Column 1 (Checkbox) - No shadow on this one */
:is(.table, .os-table) thead th:nth-child(1), :is(.table, .os-table) tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 26;
  background-color: white;
}

/* Column 2 (Name/Identity) - This one carries the shadow */
:is(.table, .os-table) thead th:nth-child(2) {
  position: sticky;
  z-index: 25;
  background-color: white;
}

:is(.table, .os-table) tbody td:nth-child(2) {
  position: sticky;
  z-index: 25;
  background-color: white;
  overflow: visible;
}

:is(.table, .os-table) thead th:nth-child(2) {
  z-index: 31;
}
}
/* --- 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 */
:is(.table, .os-table) thead th:nth-child(2)::after, :is(.table, .os-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 :is(.table, .os-table) thead th:nth-child(2)::after, .has-horizontal-shadow :is(.table, .os-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 */
:is(.table-scroll-container--can-scroll-right, .os-table-scroll-container--can-scroll-right) {
  position: relative;
}
:is(.table-scroll-container--can-scroll-right, .os-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 */
:is(.table, .os-table) tbody tr td:nth-child(1), :is(.table, .os-table) tbody tr td:nth-child(2) {
  background-color: white;
}
/* Striped overrides */
:is(.table-striped, .os-table-striped) tbody tr:nth-child(even) td:nth-child(1), :is(.table-striped, .os-table-striped) tbody tr:nth-child(even) td:nth-child(2) {
  background-color: #f9fafb;
}
/* Hover highlights */
:is(.table, .os-table) tbody tr:hover td, :is(.table, .os-table) tbody tr:hover td:nth-child(1), :is(.table, .os-table) tbody tr:hover td:nth-child(2) {
  background-color: #ebf1fd;
}
/* 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); }
/* GEM DEFECT (os-ds v1.3.0) — os_ds/components/profile_row.css builds the
   `.os-profile-row__avatar` gradient from `var(--teal-900)`, a token os-ds
   never defines. An unresolvable var() voids the WHOLE `background`
   declaration, so the avatar disc renders with no fill and its white initials
   disappear. Supply the primitive here, set to DiveOS's previous avatar stop
   (--sky-900) so the roster gradient is unchanged by the migration.
   DELETE this once os-ds defines --teal-900 (or switches to --sky-900).
   Must stay BELOW every @import: postcss-import silently drops any @import
   that follows a non-@import statement. */
:root { --teal-900: var(--sky-900); }
.\*\: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;
}
.first\:pt-0:first-child{
  padding-top: 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.disabled\:dark:disabled .daterangepicker td.off, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.disabled\:dark:disabled .select2-container .select2-selection__choice, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove:hover, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-button--dialog, .os-text-white) { 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));
}
:is(.booking-step-indicator, .os-booking-step-indicator):is(.disabled\:dark:disabled .trix-content a[href^="bullettrain://"], .os-text-white) { 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-1{
    order: 1;
  }
  .sm\:order-2{
    order: 2;
  }
  .sm\:order-3{
    order: 3;
  }
  .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-4{
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .sm\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }
  .sm\:mb-0{
    margin-bottom: 0px;
  }
  .sm\:ml-auto{
    margin-left: auto;
  }
  .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-28{
    width: 7rem;
  }
  .sm\:w-40{
    width: 10rem;
  }
  .sm\:w-44{
    width: 11rem;
  }
  .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-none{
    flex: none;
  }
  .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\:flex-wrap{
    flex-wrap: wrap;
  }
  .sm\:items-start{
    align-items: flex-start;
  }
  .sm\:items-end{
    align-items: flex-end;
  }
  .sm\:items-center{
    align-items: center;
  }
  .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;
}