*, ::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: 'Instrument Sans', Helvetica, Arial, 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: 'JetBrains Mono', ui-monospace, SFMono-Regular, 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;
}
  /* The themable colours, at their stock values: bare channels, which
     tailwind.config.js wraps in rgb(... / <alpha-value>). A tenant or an
     organisation theme overrides them from the \3c style> block base.html writes
     after this sheet, derived from two colours by file/theming.py -- whose
     STOCK mapping repeats these values and has to stay in step with them. */
  :root {
    --theme-accent: 42 167 155;
    --theme-accent-ink: 31 139 128;
    --theme-accent-deep: 20 107 98;
    --theme-accent-dark: 21 94 86;
    --theme-accent-soft: 196 229 225;
    --theme-accent-tint: 230 244 242;
    --theme-accent-wash: 242 248 247;
    --theme-accent-on: 6 48 39;
    --theme-accent-bright: 42 167 155;
    --theme-rail: 10 68 56;
    --theme-rail-hover: 31 122 102;
    --theme-rail-active-hover: 35 138 115;
    --theme-rail-deep: 6 48 39;
    --theme-rail-muted: 217 234 228;
    --theme-rail-text: 234 246 241;
    --theme-forest: 31 61 52;
    --theme-forest-deep: 15 33 28;
    --theme-forest-line: 47 83 72;
    --theme-forest-muted: 127 166 155;
    --theme-forest-soft: 143 191 180;
    --theme-forest-text: 215 228 223;
    --theme-primary: 22 25 27;
    --theme-primary-on: 255 255 255;
    --theme-primary-hover: 42 167 155;
    --theme-primary-hover-on: 6 48 39;
  }

  html { -webkit-font-smoothing: antialiased; }
  body {
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  a {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  ::-moz-selection { background: rgb(var(--theme-accent-soft)); }
  ::selection { background: rgb(var(--theme-accent-soft)); }

  /* Slim, unobtrusive scrollbars — the design has no heavy chrome. */
  * { scrollbar-width: thin; scrollbar-color: #D5D8D4 transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: #D5D8D4; border-radius: 999px; border: 3px solid transparent;
    background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: #B4B9B5; background-clip: content-box; }
  *::-webkit-scrollbar-track { background: transparent; }
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

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

  .\!container {
    max-width: 768px !important;
  }

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

  .\!container {
    max-width: 1024px !important;
  }

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

  .\!container {
    max-width: 1280px !important;
  }

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

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
  /* --- Typographic roles ------------------------------------------------ */

  /* Uppercase mono section label: "MY FILES", "SHARE LINK", "NAME". */
  .dc-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* Mono metadata: sizes, dates, counts, tokens. */
  .dc-meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Same role one and two steps down: a dialog title, then the title of a
     block inside a page that already carries a .dc-title. */
  .dc-title-sm {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-title-xs {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Inline text action ("Edit", "See all"), set at the metadata size. The
     colours restate the global `a` rule so a <button> reads as a link too. */
  .dc-link {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-link:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  /* The single large figure of a stat card: a count, a size, a total. */
  .dc-stat {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

  /* --- Surfaces --------------------------------------------------------- */

  .dc-card {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  .dc-panel {
  overflow: hidden;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  /* Panel whose content opens popovers past its edges -- the Markdown
     editor's slash menu, its link and image tooltips -- which the clipping
     above would cut. Direct children take the rounded corners instead, so a
     child with a background of its own still follows them. */
  .dc-panel.is-unclipped {
  overflow: visible;
}
  .dc-panel.is-unclipped > * {
    border-radius: inherit;
  }
  .dc-section-head {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Header strip of a .dc-panel: a title on the left, one action on the right.
     Tighter than .dc-section-head, which titles a full page section. */
  .dc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  /* Card of the stat strip at the top of shares / settings / dashboard. */
  .dc-stat-card {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

  /* The 244px contextual column between the rail and the content. Folded away
     below lg; the page keeps its own overflow rule when it needs another one. */
  .dc-sidebar {
  display: none;
  width: 244px;
  flex: none;
  flex-direction: column;
  overflow-y: auto;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 244 / var(--tw-bg-opacity, 1));
}
  @media (min-width: 1024px) {

  .dc-sidebar {
    display: flex;
  }
}

  /* --- Application shell --------------------------------------------------
     app.html wraps the rail and the contextual column in .dc-drawer. From lg
     up the wrapper is one more column of the shell and changes nothing. Below
     lg it leaves the flow and becomes an off-canvas panel that the menu button
     of the top bar slides in (app_drawer.js), over a blurred backdrop. */

  .dc-drawer {
  display: flex;
  flex: none;
}

  @media not all and (min-width: 1024px) {

  .dc-drawer {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 40;
    max-width: 100vw;
    --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));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}
  /* `transform: none` once open, not a zero translation: any transform makes
     the drawer the containing block of its fixed descendants, and a dialog
     opened from the sidebar would then be laid out inside the column. The
     shadow only comes with the open state, or it would bleed onto the left
     edge of the screen while the drawer waits off canvas. */
  @media not all and (min-width: 1024px) {

  .dc-drawer.is-open {
    transform: none;
    --tw-shadow: 18px 0 44px -18px rgba(20,25,22,0.35);
    --tw-shadow-colored: 18px 0 44px -18px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
  /* The contextual column shows up in the drawer and takes the room the rail
     leaves, up to a 440px drawer: the whole screen of a phone held upright, a
     panel over the blurred page on anything wider. */
  @media not all and (min-width: 1024px) {

  .dc-drawer .dc-sidebar {
    display: flex;
    width: min(calc(100vw - 76px), 364px);
    overscroll-behavior: contain;
    border-right-width: 0px;
  }
}
  /* Whatever part of the page the drawer does not cover. Kept in the page and
     only faded, so the blur comes and goes with the drawer. */
  .dc-drawer-backdrop {
  visibility: hidden;
  position: fixed;
  inset: 0px;
  z-index: 40;
  background-color: rgb(22 25 27 / 0.25);
  opacity: 0;
  --tw-backdrop-blur: blur(3px);
  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-property: opacity,visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
  @media (min-width: 1024px) {

  .dc-drawer-backdrop {
    display: none;
  }
}
  .dc-drawer-backdrop.is-open {
  visibility: visible;
  opacity: 1;
}
  /* Written out rather than as `motion-reduce:` in the rules above, which
     Tailwind would emit before their `max-lg:` transitions and so lose to them. */
  @media (prefers-reduced-motion: reduce) {
    .dc-drawer,
    .dc-drawer-backdrop {
      transition: none;
    }
  }

  /* Top bar of the content column. On a narrow screen it holds the menu
     button and the search, nothing else; `is-embed` is the stripped bar of a
     page shown inside a panel of another one (see app.html). */
  .dc-topbar {
  z-index: 20;
  display: flex;
  height: 3.5rem;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
  @media (min-width: 1024px) {

  .dc-topbar {
    height: 60px;
    gap: 18px;
    padding-left: 22px;
    padding-right: 22px;
  }
}
  .dc-topbar.is-embed {
  height: 48px;
  gap: 18px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
  .dc-topbar-burger {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  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;
}
  .dc-topbar-burger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  @media not all and (min-width: 1024px) {

  .dc-topbar-burger {
    order: -9999;
  }
}
  @media (min-width: 1024px) {

  .dc-topbar-burger {
    display: none;
  }
}
  .dc-topbar-crumb {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  @media not all and (min-width: 1024px) {

  .dc-topbar:not(.is-embed) .dc-topbar-crumb {
    display: none;
  }
}
  /* --- Action bar -------------------------------------------------------
     Narrow screens only. The strip under the top bar of every file page
     (editor.html, preview_base.html): Back first, then on the right the
     page's main action and a "…" menu holding the others, all on one line.
     The explorer's toolbar takes the same shape below lg
     (`.dc-browse-toolbar`), so Back and the actions sit at the same place and
     height in a folder and in a file. From lg up the file pages keep their
     controls in the top bar (`.dc-topbar-page-actions`), and so does a page
     framed in the assistant's panel, whatever its width. */
  .dc-action-bar {
  display: flex;
  height: 3.5rem;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
}
  @media (min-width: 1024px) {

  .dc-action-bar {
    display: none;
  }
}
  .dc-action-bar.is-embed {
  display: none;
}
  .dc-browse-toolbar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 14px;
  padding-bottom: 14px;
}
  @media not all and (min-width: 1024px) {

  .dc-browse-toolbar {
    height: 3.5rem;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
  /* The page's controls in the top bar: from lg up, or in a framed page. */
  .dc-topbar-page-actions {
  display: contents;
}
  @media not all and (min-width: 1024px) {

  .dc-topbar-page-actions {
    display: none;
  }
}
  .dc-topbar.is-embed .dc-topbar-page-actions {
  display: contents;
}
  /* The explorer's New menu: under the button's left edge, or its right edge
     on a narrow screen, where the button ends the bar. */
  .dc-new-menu {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  position: absolute;
  left: 0px;
  z-index: 40;
  margin-top: 0.375rem;
  width: 18rem;
  max-width: calc(100vw - 24px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px 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 not all and (min-width: 1024px) {

  .dc-new-menu {
    left: auto;
    right: 0px;
  }
}
  .dc-action-bar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  /* The "…" of the bar: an icon button with the frame of .dc-btn-ghost. */
  .dc-action-bar-more {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / 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(61 66 63 / var(--tw-text-opacity, 1));
  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;
}
  .dc-action-bar-more:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-action-bar-more:disabled {
  opacity: 0.6;
}
  /* The menu of that "…" on a page rendered by Django (bar_menu.js): the card
     of .dc-action-menu, hung under its trigger rather than teleported. */
  .dc-bar-menu {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: 40;
  margin-top: 0.375rem;
  max-height: calc(100dvh - 140px);
  min-width: 220px;
  overflow-y: auto;
  white-space: nowrap;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .dc-bar-menu.is-up {
  top: auto;
  bottom: 100%;
  margin-top: 0px;
  margin-bottom: 0.375rem;
}
  /* Mono heading over a group of entries in a menu ("PDF TEMPLATE"). */
  .dc-menu-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.375rem;
}
  /* A menu row holding its own small controls rather than being one: the
     zoom or the page of a viewer, stepped without closing the menu. */
  .dc-menu-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-menu-row-label {
  margin-right: 0.75rem;
  flex: 1 1 0%;
}
  .dc-menu-row-value {
  min-width: 3rem;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  /* Takes the whole width the menu button leaves on a narrow screen. Stays
     in the bar when a page drops the search, as the spacer that keeps the
     page actions on the right. */
  .dc-topbar-search {
  flex: none;
}
  @media not all and (min-width: 1024px) {

  .dc-topbar-search {
    min-width: 0px;
    flex: 1 1 0%;
  }
}
  .dc-topbar-search-field {
  display: flex;
  height: 2.25rem;
  width: 300px;
  max-width: 100%;
  align-items: center;
  gap: 0.625rem;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  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;
}
  .dc-topbar-search-field:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  @media not all and (min-width: 1024px) {

  .dc-topbar-search-field {
    width: 100%;
  }
}
  @media (min-width: 1280px) {

  .dc-topbar-search-field {
    width: 420px;
  }
}
  /* Page actions, then the notification bell. On a narrow screen the wrapper
     dissolves into the bar, so the bell can be ordered on its own between the
     menu button and the search; the markup stays single, since the bell's
     script finds it by id. */
  .dc-topbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}
  @media not all and (min-width: 1024px) {

  .dc-topbar:not(.is-embed) .dc-topbar-actions {
    display: contents;
  }

  .dc-topbar-bell {
    order: -1;
  }
}
  /* Dropdown of the notification bell. Hangs from the bell's right edge; on a
     narrow screen the bell sits on the left of the bar, so the list drops
     under the whole bar instead, inside the page gutters. */
  .dc-notif-menu {
  position: absolute;
  right: 0px;
  top: 42px;
  z-index: 50;
  width: 340px;
  overflow: hidden;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px 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 not all and (min-width: 1024px) {

  .dc-notif-menu {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: 62px;
    width: auto;
  }
}

  /* Content column of a page of the app shell: capped width, the page gutter,
     the 16px gutter of every narrow screen below lg. */
  .dc-page-body {
  max-width: 1200px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
  @media not all and (min-width: 1024px) {

  .dc-page-body {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
  /* A page whose content is one edge-to-edge panel (the tasks): below lg the
     panel sits right under the top bar, with no strip of page above it and no
     second rule under the top bar's own. A notice shown above it keeps some air. */
  @media not all and (min-width: 1024px) {

  .dc-page-body.is-flush {
    padding-top: 0px;
  }

  .dc-page-body.is-flush > .dc-panel.is-bleed {
    border-top-width: 0px;
  }

  .dc-page-body.is-flush > :not(.dc-panel) {
    margin-top: 0.75rem;
  }
}
  /* A panel of rows running to the screen's edges below lg, like the
     explorer's listing: the page gutter is taken back, the sides go. */
  @media not all and (min-width: 1024px) {

  .dc-panel.is-bleed {
    margin-left: -1rem;
    margin-right: -1rem;
    overflow: visible;
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
  }
}
  /* The tags page: the pills above, the selected tag's header, then its
     items. Below lg the header's Edit / Delete go into a "…" menu, so the
     name keeps its room. */
  .dc-tags-toolbar {
  margin-bottom: 1rem;
}
  .dc-tags-head {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
  .dc-tags-head-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  @media not all and (min-width: 1024px) {

  .dc-tags-head-name {
    min-width: 0px;
    font-size: 17px;
  }
}
  .dc-tags-edit {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
  @media not all and (min-width: 1024px) {

  .dc-tags-edit {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
  .dc-tags-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
  @media not all and (min-width: 1024px) {

  .dc-tags-edit-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}

  /* The tasks page: one panel, its head counting what is left to do, a first
     row adding a task, then the tasks -- title, and a line of details under
     it. Below lg the options of the new task go under its title, and the
     delete cross of the rows goes (the edit dialog deletes). */
  .dc-tasks-count {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Tinted with the accent wash, so the row adding a task stands apart from
     the tasks under it. */
  .dc-task-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-tint) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  /* A framed field like every other: a bare line does not read as something
     to type into. It takes the width the options leave. */
  .dc-input.dc-task-composer-input {
  min-width: 0px;
  flex: 1 1 0%;
  font-size: 13.5px;
  line-height: 1.45;
}
  .dc-task-composer-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  @media not all and (min-width: 1024px) {

  .dc-task-composer-options {
    width: 100%;
  }
}
  .dc-task-composer-calendar {
  max-width: 180px;
}
  @media not all and (min-width: 1024px) {

  .dc-task-composer-calendar {
    min-width: 0px;
    max-width: none;
    flex: 1 1 0%;
  }
}
  .dc-task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  .dc-task-check {
  margin-top: 3px;
  height: 18px;
  width: 18px;
  flex: none;
  cursor: pointer;
  accent-color: #16191B;
}
  .dc-task-main {
  min-width: 0px;
  flex: 1 1 0%;
  cursor: pointer;
}
  .dc-task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-task-title.is-done {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  text-decoration-line: line-through;
}
  .dc-task-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-task-details {
  margin-top: 0.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-task-calendar {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
  .dc-task-overdue {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-task-delete {
  border-radius: 0.25rem;
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-task-delete:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-task-delete {
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
  flex: none;
}
  @media not all and (min-width: 1024px) {

  .dc-task-delete {
    display: none;
  }
}

  /* The contacts page: the New menu first, on the left and outside the panel,
     where the explorer and the calendar keep theirs; then one panel holding
     the cards on the page tone so they read as cards. */
  .dc-contacts-toolbar {
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
  /* The count of an organisation card's people, which narrows the grid to
     them: in the link colour, so it reads as something to click. */
  .dc-card-sub-link {
  max-width: 100%;
  align-self: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
  text-underline-offset: 2px;
}
  .dc-card-sub-link:hover {
  text-decoration-line: underline;
}
  .dc-contacts-new-menu {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 40;
  margin-top: 0.375rem;
  width: 14rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .dc-contacts-body {
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}
  @media not all and (min-width: 1024px) {

  .dc-contacts-body {
    padding: 0.75rem;
  }
}

  /* --- Logged-out pages --------------------------------------------------
     Login, 2FA, share and booking pages render without the rail and the
     sidebar, so they carry their own frame. */

  /* Centres a single card on the outer canvas. */
  .dc-auth-page {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(237 237 233 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
  /* Full-width header of a public page. Fixed height, unlike .dc-modal-head:
     it is the only chrome the page has, and it must not shift with content. */
  .dc-public-head {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

  /* --- Workspace guests --------------------------------------------------
     What a workspace guest sees, from the sign-in by code to the listing, on
     the `guest` palette (see tailwind.config.js). */

  /* Square mark holding the organisation's initial. */
  .dc-guest-mark {
  display: flex;
  height: 30px;
  width: 30px;
  flex: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest) / var(--tw-bg-opacity, 1));
  font-size: 13px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(245 241 232 / var(--tw-text-opacity, 1));
}
  /* Mono label over a step or a list: "STEP 2 OF 2", "YOUR WORKSPACES". */
  .dc-guest-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(138 134 114 / var(--tw-text-opacity, 1));
}
  .dc-guest-headline {
  text-wrap: balance;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest) / var(--tw-text-opacity, 1));
}
  @media (min-width: 640px) {

  .dc-guest-headline {
    font-size: 34px;
  }
}
  .dc-guest-lead {
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.55;
  --tw-text-opacity: 1;
  color: rgb(92 90 78 / var(--tw-text-opacity, 1));
}
  /* White card holding the form of a sign-in step. */
  .dc-guest-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 22px;
  --tw-shadow: 0 14px 34px -20px rgb(var(--theme-forest) / 0.4);
  --tw-shadow-colored: 0 14px 34px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .dc-guest-field-label {
  margin-bottom: 7px;
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-guest-input {
  height: 46px;
  width: 100%;
  border-radius: 11px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(227 224 214 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 246 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  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;
}
  .dc-guest-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-guest-input[aria-invalid="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(196 53 43 / var(--tw-border-opacity, 1));
}
  /* The dark action of the guest side. Hovers to the accent like
     .dc-btn-primary, colours pinned for the same `a:hover` reason. */
  .dc-guest-btn {
  display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest) / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(245 241 232 / var(--tw-text-opacity, 1));
  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;
}
  .dc-guest-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-on) / var(--tw-text-opacity, 1));
}

  /* Six-digit code entry: one real input, drawn as six boxes once the page
     script adds .is-boxed. Typing, pasting and the browser's one-time-code
     autofill all land in the input; the boxes only mirror it. Without the
     script the input stays a plain field and the form works the same. */
  .dc-guest-code {
  position: relative;
}
  .dc-guest-code > input {
  height: 3.5rem;
  width: 100%;
  border-radius: 11px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(227 224 214 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 246 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 22px;
  letter-spacing: 0.5em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  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;
}
  .dc-guest-code > input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-guest-code-boxes {
  display: none;
  gap: 0.625rem;
}
  .dc-guest-code-boxes > span {
  display: flex;
  height: 3.5rem;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border-width: 1.5px;
  --tw-border-opacity: 1;
  border-color: rgb(227 224 214 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 246 / var(--tw-bg-opacity, 1));
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 22px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  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;
}
  /* The box the next digit lands in. */
  .dc-guest-code-boxes > span.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  /* A code in error. Once boxed the input is invisible, so the boxes carry the
     colour for it. */
  .dc-guest-code > input[aria-invalid="true"],
  .dc-guest-code > input[aria-invalid="true"] + .dc-guest-code-boxes > span {
  --tw-border-opacity: 1;
  border-color: rgb(196 53 43 / var(--tw-border-opacity, 1));
}
  .dc-guest-code.is-boxed > input {
  position: absolute;
  inset: 0px;
  height: 100%;
  cursor: text;
  opacity: 0;
}
  .dc-guest-code.is-boxed > .dc-guest-code-boxes {
  display: flex;
}

  /* Entry of the guest sidebar, on the forest surface. */
  .dc-guest-space {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 10px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-text) / var(--tw-text-opacity, 1));
  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;
}
  .dc-guest-space:hover {
  background-color: rgb(var(--theme-forest-line) / 0.6);
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-text) / var(--tw-text-opacity, 1));
}
  .dc-guest-space.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(245 241 232 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-deep) / var(--tw-text-opacity, 1));
}
  .dc-guest-space.is-on:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 241 232 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-deep) / var(--tw-text-opacity, 1));
}
  .dc-guest-space-mark {
  display: flex;
  height: 22px;
  width: 22px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest-line) / var(--tw-bg-opacity, 1));
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-soft) / var(--tw-text-opacity, 1));
}
  .dc-guest-space.is-on .dc-guest-space-mark {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-bright) / var(--tw-text-opacity, 1));
}
  /* The same list below lg, as a row of chips. */
  .dc-guest-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(227 224 214 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-guest-chip:hover {
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-guest-chip.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-forest) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(245 241 232 / var(--tw-text-opacity, 1));
}
  .dc-guest-chip.is-on:hover {
  --tw-text-opacity: 1;
  color: rgb(245 241 232 / var(--tw-text-opacity, 1));
}

  /* Mono tag of what the guest may do: "Viewer", "PREVIEW ONLY". */
  .dc-guest-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 237 / var(--tw-bg-opacity, 1));
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(90 95 91 / var(--tw-text-opacity, 1));
}
  .dc-guest-badge-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(22 25 27 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-bright) / var(--tw-text-opacity, 1));
}
  .dc-guest-badge-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-guest-badge-warn {
  --tw-bg-opacity: 1;
  background-color: rgb(246 241 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}

  /* Row of the guest listing: a card of its own below lg, a table row above.
     The name's link stretches over the whole row, and the actions sit on top
     of it: positioned too, and later in the markup, so painted above. */
  .dc-guest-row {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0.75rem;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  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;
}
  .dc-guest-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 244 / var(--tw-bg-opacity, 1));
}
  @media (min-width: 1024px) {

  .dc-guest-row {
    display: grid;
    height: 54px;
    grid-template-columns: minmax(0,1fr) 140px 110px 90px;
    gap: 0px;
    border-radius: 0px;
    border-width: 0px;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .dc-guest-row:last-child {
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
    border-bottom-width: 0px;
  }
}
  .dc-guest-row-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-guest-row-link::after {
  position: absolute;
  content: var(--tw-content);
  inset: 0px;
}
  .dc-guest-row-link:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Icon action at the end of a row: download, more. */
  .dc-guest-row-btn {
  position: relative;
  display: flex;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
  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;
}
  .dc-guest-row-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}

  /* --- Modals ------------------------------------------------------------
     The overlay carries `flex` so a Vue modal behind a v-if needs nothing
     else. A server-rendered modal still ships with `hidden` and is opened by
     openModal(): utilities are emitted after components, so that `hidden`
     keeps winning over the `flex` this class applies. */

  .dc-overlay {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.4);
}
  /* The white box inside the overlay. Width stays at the call site: the
     dialogs are not all the same width. */
  .dc-modal-panel {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  width: 100%;
  padding: 1.5rem;
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  /* Header strip of a dialog that scrolls its own body, so the rule under the
     title is the full one, not the hairline .dc-panel-head uses. */
  .dc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

  /* --- Buttons ---------------------------------------------------------- */

  .dc-btn {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  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;
}

  .dc-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-btn-primary {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  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;
}
  .dc-btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
}
  .dc-btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-hover-on) / var(--tw-text-opacity, 1));
}
  /* Same reason as .dc-btn-danger below: pin the hover colour, or the base
     `a:hover` rule makes the label green when this button is an <a>, and two
     identical-looking buttons read differently under the pointer. */
  .dc-btn-ghost {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  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;
}
  .dc-btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-btn-ghost {
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / 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(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-btn-ghost:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-btn-quiet {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  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;
}
  .dc-btn-quiet:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-btn-quiet {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-btn-quiet:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* `hover:text-` is not redundant with `text-`: the base `a:hover` rule above
     repaints any anchor accent-green on hover, and these buttons are an <a> as
     often as a <button>. Without it a danger action turns green under the
     pointer -- the one colour it must never be. */
  .dc-btn-danger {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  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;
}
  .dc-btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-btn-danger {
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / 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(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-btn-danger:hover {
  --tw-border-opacity: 1;
  border-color: rgb(138 74 51 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-btn-sm {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  line-height: 1.4;
}
  /* The one big action closing a form (sign in, confirm a booking). Combine
     with a colour class; `justify-center` needs the flex .dc-btn sets. */
  .dc-btn-submit {
  height: 50px;
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  font-size: 15px;
}

  /* Bare icon button of a toolbar (preview zoom, row actions). No border and
     no fixed height: it sizes to the icon it wraps. */
  .dc-icon-btn {
  border-radius: 0.25rem;
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-icon-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Same, one step back: tighter and fainter, for an action that only shows
     up next to the content it acts on. */
  .dc-icon-btn-quiet {
  border-radius: 0.25rem;
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-icon-btn-quiet:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-icon-btn-quiet {
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  /* Delete / revoke sitting next to the thing it removes. Warm brown, never a
     saturated red: same pair as .dc-notice-danger and .dc-btn-danger. */
  .dc-icon-btn-danger {
  border-radius: 0.25rem;
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-icon-btn-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-icon-btn-danger {
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-icon-btn-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}

  /* Closes the navigation drawer of the narrow layout, in the logo's place at
     the top of the rail (see _rail.html); gone from lg up with the drawer. */
  .dc-rail-close {
  margin-bottom: 0.875rem;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-rail-muted) / var(--tw-text-opacity, 1));
  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;
}
  .dc-rail-close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .dc-rail-close {
    display: none;
  }
}

  /* Button sitting on the dark top rail, where the ink ramp cannot be read. */
  .dc-rail-btn {
  border-radius: 9px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-rail-text) / var(--tw-text-opacity, 1));
  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;
}
  .dc-rail-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* Pill filter / chip. Add .is-on for the selected state. */
  .dc-pill {
  display: inline-flex;
  height: 30px;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 11px;
  padding-right: 11px;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-pill:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-pill.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
}
  .dc-pill.is-on:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
}
  /* A pill that is a link (the tag picker of /tags/). Use with .dc-pill. The
     hover colour is pinned: the base `a:hover` rule would paint it green. */
  .dc-pill-link {
  max-width: 260px;
  gap: 0.5rem;
}
  .dc-pill-link:hover {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-pill-link.is-on:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  /* Item count closing a pill. */
  .dc-pill-count {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  opacity: 0.7;
}
  /* A row of pills to pick from (the tags of /tags/), kept to one line: the
     pills that do not fit are hidden and a "+n others" pill ends the line,
     which unfolds the row (`is-expanded`) -- see the script of tags.html. A
     long list of tags no longer pushes the content down the page. */
  .dc-pill-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}
  .dc-pill-strip.is-expanded {
  flex-wrap: wrap;
}
  .dc-pill-strip > .dc-pill {
  flex: none;
}
  /* The "+n others" / "Collapse" pill closing a .dc-pill-strip. */
  .dc-pill-more {
  display: inline-flex;
  height: 30px;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 11px;
  padding-right: 11px;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-pill-more:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-pill-more.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
}
  .dc-pill-more.is-on:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
}
  .dc-pill-strip > .dc-pill-more {
  flex: none;
}
  .dc-pill-more {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}

  /* Bookable time slot on the public booking page. Add .is-on for the pick. */
  .dc-slot {
  height: 2.25rem;
  width: 100%;
  cursor: pointer;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  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;
}
  .dc-slot:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  .dc-slot.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
}

  /* Segmented control (List / Grid). */
  .dc-seg {
  display: inline-flex;
  gap: 0.125rem;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 237 / var(--tw-bg-opacity, 1));
  padding: 3px;
}
  .dc-seg-btn {
  cursor: pointer;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-seg-btn.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px rgba(20,25,22,0.12);
  --tw-shadow-colored: 0 1px 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);
}
  /* A segment that is a link (the tasks filter): its hover colour is pinned
     against the base `a:hover`, which would paint it green. */
  a.dc-seg-btn:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}

  /* --- Form controls ---------------------------------------------------- */

  /* An editable field is white on the stronger hairline. The grey inset of the
     mockup means "nothing to type here": on every field it made a whole form
     look disabled, so it is kept for disabled controls and read-only values. */
  .dc-input {
  height: 2.25rem;
  width: 100%;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  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;
}
  .dc-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  /* Background only: the border keeps the focus colour a read-only value
     still gets when tabbed to. */
  .dc-input:disabled,
  .dc-input[readonly] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-input:disabled {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  /* A field in error. Keyed on aria-invalid, so a screen reader hears what the
     eye sees; field_errors.js sets it along with the .dc-field-error line.
     The ring is what still shows focus once the border is already coloured. */
  .dc-input[aria-invalid="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(196 53 43 / var(--tw-border-opacity, 1));
}
  .dc-input[aria-invalid="true"]: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);
  --tw-ring-color: rgb(196 53 43 / 0.15);
}
  textarea.dc-input {
  height: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.625;
}
  /* A field sitting in a row of small controls, at the height of .dc-btn-sm. */
  .dc-input.dc-input-sm {
  height: 2rem;
  width: auto;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 12.5px;
  line-height: 1.4;
}
  select.dc-input {
  padding-right: 2rem;
}
  /* Colour swatch sitting in a row of .dc-input fields, same height. */
  .dc-color-input {
  height: 2.25rem;
  width: 2.5rem;
  flex: none;
  cursor: pointer;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

  .dc-field-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  margin-bottom: 0.375rem;
  display: block;
}

  /* Answers of a search picker (the organisation of a contact, the members of
     a group): fixed rather than absolute, and placed by the widget. A .dc-panel
     clips what its fields draw past its edges, and the form of the contact
     sheet scrolls -- either one would cut the list down to a sliver. */
  .dc-picker-list {
  position: fixed;
  z-index: 60;
  max-height: 14rem;
  overflow-y: auto;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  /* Why the field above is in error. Inserted by field_errors.js, right under
     the field or under the row the field shares with its button. */
  .dc-field-error {
  margin-top: 0.25rem;
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(196 53 43 / var(--tw-text-opacity, 1));
}
  /* Disclosure holding the tuning half of a form: values with defensible
     defaults that only matter once something has been measured. Bordered and
     inset so a closed one reads as "there is more here" rather than as a
     stray line of text. The marker is left in place -- a custom triangle
     would have to be re-taught to every screen reader that already knows
     this one. */
  .dc-details {
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  background-color: rgb(244 244 240 / 0.4);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  .dc-details > summary {
  margin-bottom: 0px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-details > summary:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-details[open] > summary {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Sentence under a field or a switch explaining what it does. */
  .dc-field-hint {
  margin-top: 0.25rem;
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}

  /* Toggle switch. Add .is-on to the track. */
  .dc-switch {
  display: inline-flex;
  height: 1.25rem;
  width: 34px;
  flex: none;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 223 / var(--tw-bg-opacity, 1));
  padding: 0.125rem;
  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;
}
  .dc-switch.is-on {
  justify-content: flex-end;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}
  .dc-switch > span {
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

  /* Square checkbox used in the file list. */
  .dc-check {
  box-sizing: border-box;
  height: 17px;
  width: 17px;
  cursor: pointer;
  border-radius: 5px;
  border-width: 1.5px;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  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;
}
  .dc-check.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
    box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 9px rgb(var(--theme-primary));
}

  /* --- Tags, badges, avatars -------------------------------------------- */

  .dc-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* The same, one step smaller, for a tag sitting in a line of metadata. */
  .dc-tag-sm {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 9px;
  padding-right: 9px;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
}
  /* A tag that can be taken off, with its cross (the groups of a contact
     sheet). The list wraps. */
  .dc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
  .dc-tag-removable {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  gap: 0.25rem;
  padding-right: 0.25rem;
}
  .dc-tag-remove {
  display: flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  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;
}
  .dc-tag-remove:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* "+2" after the first tag of a narrow listing entry, opening the others. */
  .dc-tag-more {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 9px;
  padding-right: 9px;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-tag-more:hover {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
}
  /* A byte size shown as a badge, in the mono face of every figure. */
  .dc-size-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  /* Tinted tag carrying a state the eye should catch: "primary", "draft". */
  .dc-tag-accent {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  gap: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-tint) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  /* Colour dot of a tag / a calendar / a status. The colour itself is data,
     so it is set inline at the call site. */
  .dc-dot {
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
  flex: none;
  border-radius: 9999px;
}
  /* Small uppercase mono status badge, e.g. SHARED. */
  .dc-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 3px;
  padding-bottom: 3px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* What a card of the Contacts page stands for, drawn as one large glyph in
     a neutral circle: a building for an organisation, a person for a contact,
     people for a group. Neutral on purpose: a colour there read as a meaning
     of its own. The small one sits in the member lists. */
  .dc-kind-badge {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-kind-badge-sm {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  height: 26px;
  width: 26px;
}
  /* The address book an entry is in: its swatch, the same square as in the
     left column, and its name. */
  .dc-book-tag {
  display: inline-flex;
  min-width: 0px;
  max-width: 100%;
  align-items: center;
  gap: 0.375rem;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-book-swatch {
  height: 0.625rem;
  width: 0.625rem;
  flex: none;
  border-radius: 3px;
}
  /* The same, standing out: the book a contact sheet's card is in or goes to,
     under its title. */
  .dc-book-badge {
  display: inline-flex;
  min-width: 0px;
  max-width: 100%;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-tint) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
}
  .dc-book-badge .dc-book-swatch {
  height: 0.75rem;
  width: 0.75rem;
}
  .dc-book-badge strong {
  font-weight: 600;
}

  /* Square brand mark holding the product initial. Square and accent-filled,
     where .dc-avatar is round and stands for a person. */
  .dc-logo {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
  font-size: 17px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-on) / var(--tw-text-opacity, 1));
}
  /* Header-sized mark, for a page that leads with its content, not its name. */
  .dc-logo-sm {
  height: 2rem;
  width: 2rem;
  border-radius: 0.5rem;
  font-size: 15px;
}

  /* File-type square badge: a tinted tile holding one glyph. The tint says
     which family (see .ft-* below), the glyph says which kind. It used to hold
     the extension in three letters, which told anyone who did not already know
     the format nothing at all. */
  .dc-ft {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
    width: 30px; height: 30px;
}
  .dc-ft-sm { width: 26px; height: 26px; }
  .dc-ft-lg { width: 34px; height: 34px; }

  /* --- Rows ------------------------------------------------------------- */

  .dc-row {
  cursor: pointer;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  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;
}

  .dc-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 244 / var(--tw-bg-opacity, 1));
}
  .dc-row.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  /* Inner layout of a listing row. Split from .dc-row because the pickers
     reuse the layout without the separator and the selected state. */
  .dc-row-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  /* Row of a picker list (move to, attach, contact search): pick and go, so
     it hovers and it has no bottom rule. */
  .dc-pick-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  cursor: pointer;
}
  .dc-pick-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  /* The same row rendered as a real <button>, which neither stretches nor
     aligns its label left on its own. */
  button.dc-pick-row {
  width: 100%;
  text-align: left;
}
  /* The row the arrow keys point at: the hover look, so the pointer and the
     keyboard show a single highlight. */
  .dc-pick-row.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}

  /* --- File picker (components/FilePickerModal.vue) ---------------------- */
  /* The search field's row, above the breadcrumb. */
  .dc-pick-search {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  /* A match: its name, then the folder it sits in. */
  .dc-pick-name {
  max-width: 60%;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-pick-path {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* The letters the query matched. */
  .dc-pick-hit {
  background-color: transparent;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  /* Under the matches when the index was cut short. */
  .dc-pick-note {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* Action buttons at the end of a listing row: out of the way until the row
     is hovered or holds the focus, so a keyboard user tabbing in sees where
     the focus went. .is-on keeps them while the row's action menu is open:
     the pointer then leaves the row for the menu. */
  .dc-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-row-actions:focus-within {
  opacity: 1;
}
  .group:hover .dc-row-actions {
  opacity: 1;
}
  .dc-row-actions.is-on {
  opacity: 1;
}

  /* Frame and card of the explorer's listing. Below lg the gutters and the
     card's rounded sides go: the listing takes the whole width of the screen. */
  .dc-listing-frame {
  min-height: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 22px;
}
  @media not all and (min-width: 1024px) {

  .dc-listing-frame {
    padding: 0px;
  }
}
  .dc-listing-panel {
  overflow: hidden;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  .dc-listing-panel.is-unclipped {
  overflow: visible;
}
  .dc-listing-panel.is-unclipped > * {
    border-radius: inherit;
  }
  @media not all and (min-width: 1024px) {

  .dc-page-body.is-flush > .dc-listing-panel.is-bleed {
    border-top-width: 0px;
  }

  .dc-listing-panel.is-bleed {
    margin-left: -1rem;
    margin-right: -1rem;
    overflow: visible;
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
  }
}
  .dc-listing-panel {
  display: flex;
  height: 100%;
  min-height: 0px;
  flex-direction: column;
  overflow: hidden;
}
  @media not all and (min-width: 1024px) {

  .dc-listing-panel {
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
  }
}

  /* Entry of a narrow-screen listing (FileListItem.vue): the columns of the
     table stacked in one cell -- name, badges, type -- and the "…" menu,
     always shown. The table's own padding goes with it: the listing runs
     edge to edge, and the entries carry the gutter. */
  .dc-file-item {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  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;
}
  .dc-file-item:active {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-file-item.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  .dc-file-item-glyph {
  margin-top: 0.125rem;
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
}
  .dc-file-item-body {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
}
  /* `hover:text-ink` against the base `a:hover`: a touch screen keeps the
     hover state on whatever was tapped last, and the name would stay green. */
  .dc-file-item-name {
  display: flex;
  min-width: 0px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-file-item-name:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* The two halves of the name (js/middle_ellipsis.js): the head is cut, the
     tail is not. `pre` keeps a space that falls on the seam. */
  .dc-file-item-head {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
    white-space: pre;
}
  .dc-file-item-tail {
  flex: none;
    white-space: pre;
}
  .dc-file-item-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
  .dc-file-item-kind {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* An entry of the trash on a narrow screen: the same stack, nothing to
     open by a tap -- its actions are in the "…" menu. */
  .dc-trash-item {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  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;
}
  .dc-trash-item:active {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-trash-item.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  .dc-trash-item {
  cursor: default;
}
  .dc-trash-item:active {
  background-color: transparent;
}
  @media (min-width: 1024px) {

  .dc-trash-item {
    display: none;
  }
}
  .dc-file-item-more {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-file-item-more:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}

  /* Entry of a dropdown menu, whether it renders as <a> or as <button>. */
  .dc-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-menu-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  /* A destructive entry, in the warm brown of .dc-btn-danger. `hover:text-`
     for the same `a:hover` reason as there. */
  .dc-menu-item.is-danger {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-menu-item.is-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-menu-item.is-danger .dc-menu-item-icon {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  /* Rule between two groups of entries of a menu, across its whole width. */
  .dc-menu-sep {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
  /* Glyph leading the label of a .dc-menu-item. */
  .dc-menu-item-icon {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  /* Transparent layer under an open menu, over the whole page. A press
     outside the menu lands on it and only closes the menu: without it, the
     press that closes the menu would also open the row or follow the link
     under the finger. Placed right before the menu, at the menu's z-index,
     so the menu stays above it. */
  .dc-menu-shield {
  position: fixed;
  inset: 0px;
  z-index: 40;
  cursor: default;
}
  /* Popover of ui/ActionMenu.vue. Fixed: it is teleported to <body> and
     placed from its trigger, so a scrolling ancestor cannot clip it. Above
     the jobs toaster (z-30), under the dialogs (z-50) an item may open. */
  .dc-action-menu {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  position: fixed;
  z-index: 40;
  max-height: calc(100dvh - 16px);
  min-width: 180px;
  overflow-y: auto;
  white-space: nowrap;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px 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 moved by the arrow keys. The outline stays, drawn inside the item
     so the card's edge does not cut it. */
  .dc-action-menu .dc-menu-item:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
    outline-offset: -2px;
}
  /* Menu entry with a one-line hint under its label (ui/MenuOption.vue): the
     icon lines up with the label and the hint wraps under the label only. */
  .dc-menu-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-menu-option:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-menu-option.is-danger {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-menu-option.is-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-menu-option.is-danger .dc-menu-item-icon {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-action-menu .dc-menu-option:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
    outline-offset: -2px;
}
  .dc-menu-option {
  align-items: flex-start;
  text-align: left;
}
  .dc-menu-option-icon {
  margin-top: 0.125rem;
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-menu-option-text {
  min-width: 0px;
}
  .dc-menu-option-hint {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* The choice currently in force in a menu of choices (the model switch). */
  .dc-menu-option.is-on {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}

  /* The item a search result points at: it stays ringed long enough to be
     found again after a scroll or a detour, then fades on its own. */
  .dc-flash {
    animation: dc-flash 60s ease-out;
  }
  /* The same ring for a moment: an entry just created, shown where it went. */
  .dc-flash-brief {
    animation: dc-flash 2.5s ease-out;
  }

  /* Listing header cell: stays visible while the rows scroll underneath.
     The background and the border must sit on the cells, not on the <tr>:
     a sticky row would let the content show through both. */
  .dc-th {
  position: sticky;
  top: 0px;
  z-index: 10;
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 250 / var(--tw-bg-opacity, 1));
    box-shadow: inset 0 -1px 0 #EFEFEB;
}

  /* Sidebar / nav item. */
  .dc-nav-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  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;
}
  .dc-nav-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 235 / var(--tw-bg-opacity, 1));
}
  .dc-nav-item.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px rgba(20,25,22,0.08);
  --tw-shadow-colored: 0 1px 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);
}
  /* A row of a contextual column is a navigation target, not a link to read:
     without this the global `a` rule paints its label with the accent. */
  .dc-nav-item a {
  color: inherit;
  text-decoration-line: none;
}
  /* The label of a row that is a button rather than a link: a contact group,
     which filters the grid. */
  .dc-nav-item-main {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  gap: 0.625rem;
  text-align: left;
}
  /* A row belonging to the row above it (the groups of an address book),
     its glyph lined up with the name of its parent. */
  .dc-nav-item.is-nested {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 2.25rem;
}
  /* The gear of a row. Shown on hover on a wide screen, always on a narrow
     one, which has no hover. Needs `group` on the row. */
  .dc-nav-item-action {
  display: flex;
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
  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;
}
  .dc-nav-item-action:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .dc-nav-item-action {
    display: none;
  }

  .group:hover .dc-nav-item-action {
    display: flex;
  }
}
  /* What a dragged card would be dropped on, while it is over it: a row of a
     contextual column or a card of a grid. */
  .is-drop-target {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 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(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-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
  /* What follows the pointer while a card is dragged (setDragGhost in
     contacts.html): a chip, kept off the pointer by a transparent padding so
     the target under it stays in sight. Drawn off screen. */
  .dc-drag-ghost {
  pointer-events: none;
  position: fixed;
  left: 0px;
  top: -1000px;
  padding-left: 1.25rem;
  padding-top: 1.25rem;
}
  .dc-drag-ghost-chip {
  display: inline-flex;
  max-width: 240px;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  /* A target that would refuse the card being dragged (a group of another
     address book), faded for the time of the drag. */
  .is-drop-disabled {
  opacity: 0.4;
}

  /* --- Sections of the details panel (BrowseDetailsPanel.vue) -----------
     The panel used to be a tab strip, which only ever showed one thing and
     could not grow: the filing journal, the filing rules and the guests each
     needed a drawer of their own next to it. Folding sections hold all of
     them in the one column, and several may stand open at once.

     Sized for a 320px column, so the header is a plain row rather than the
     card `.dc-accordion` draws on the assistant's wide page. */

  .dc-section {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
}
  /* The whole header folds the section: a <button> so the keyboard and
     `aria-expanded` come for free. */
  .dc-section-head {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  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;
}
  .dc-section-head:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-section-name {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* A count, a state word: what the section holds without unfolding it. */
  .dc-section-meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  flex: none;
}
  .dc-section-caret {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-section-caret.is-on {
  --tw-rotate: 180deg;
  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));
}
  /* A top padding of its own, and not nothing: the header's padding stops at
     its text, so without this the first control of the body -- a switch, a
     field label -- sits against the title. */
  .dc-section-body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.875rem;
  padding-bottom: 1rem;
}

  /* --- Assistant composer and attachments (AssistantComposer.vue, AssistantApp.vue) --- */

  /* The box: attached files, the text, then a row of controls, all inside. */
  .dc-composer {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 760px;
  flex-direction: column;
  gap: 0.375rem;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.5rem;
  --tw-shadow: 0 1px 2px rgba(20,25,22,0.12);
  --tw-shadow-colored: 0 1px 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);
  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;
}
  .dc-composer:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  /* Files dragged over the box. */
  .dc-composer.is-dropping {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  /* Grows with the text up to the ceiling of js/autosize.js, then scrolls. */
  .dc-composer-input {
  width: 100%;
  resize: none;
  background-color: transparent;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 13.5px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .dc-composer-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-composer-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-composer-input:disabled {
  cursor: not-allowed;
}
  .dc-composer-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
  .dc-composer-spacer {
  flex: 1 1 0%;
}
  /* Icon square of the row: the "+" menu. */
  .dc-composer-tool {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-composer-tool:hover:enabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-composer-tool:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  /* The model switch: a label and a chevron, no border. */
  .dc-composer-model {
  display: inline-flex;
  height: 2rem;
  min-width: 0px;
  max-width: 45%;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-composer-model:hover:enabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-composer-model:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  /* The model's name inside the switch: administrator-defined, so it gives way
     rather than wrapping inside the fixed-height trigger. */
  .dc-composer-model-name {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* The character count, shown only as the ceiling comes into reach: a counter
     on every draft is noise. `tabular-nums` so the digits do not jitter as
     they change. */
  .dc-composer-count {
  flex: none;
  font-size: 12.5px;
  line-height: 1.4;
  --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);
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* Past the ceiling. `error` and not the clay of the danger notices: the
     config reserves the true red for a field in error and the line saying
     why, which is what this is. */
  .dc-composer-count.is-over {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(196 53 43 / var(--tw-text-opacity, 1));
}
  /* Send, or stop the answer being written. A disabled square (empty draft)
     does not light up under the pointer. */
  .dc-composer-send {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
  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;
}
  .dc-composer-send:hover:enabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-hover-on) / var(--tw-text-opacity, 1));
}
  .dc-composer-send:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
  /* One line under the box: why the model could not be changed. An error, so
     in the warm error colour rather than as metadata. */
  .dc-composer-notice {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.375rem;
  width: 100%;
  max-width: 760px;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}

  /* An attached file: in the composer, and above a sent message. */
  .dc-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
  .dc-attachment {
  display: inline-flex;
  height: 2rem;
  max-width: 260px;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.25rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-attachment.is-error {
  --tw-border-opacity: 1;
  border-color: rgb(228 195 184 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  /* Each part of a chip sets its own colour, so a failed chip recolours them
     too; the remove button keeps its own colour and its hover. */
  .dc-attachment.is-error .dc-attachment-icon,
  .dc-attachment.is-error .dc-attachment-name,
  .dc-attachment.is-error .dc-attachment-meta {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-attachment-icon {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-attachment-meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  flex: none;
}
  .dc-attachment-remove {
  flex: none;
  border-radius: 0.25rem;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-attachment-remove:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* An attached image says what it is by showing itself. In a sent message the
     chip becomes a card -- the picture, the name under it -- because a preview
     the size of an icon would be no preview at all; the click that opens the
     file beside the conversation is untouched. */
  .dc-attachment.is-image {
  height: auto;
  width: 180px;
  max-width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.25rem;
}
  .dc-attachment-thumb {
  display: block;
  height: 120px;
  width: 100%;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
}
  .dc-attachment.is-image .dc-attachment-name {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-bottom: 0.125rem;
}
  /* The same picture on the chip of a file not sent yet, where the row stays
     one line high: small enough to sit in the icon's place. */
  .dc-attachment-chip-thumb {
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  border-radius: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
}
  /* An attachment whose file was deleted. Struck through rather than hidden:
     the thread still read its text, so the message keeps its meaning and the
     reader needs to know why there is nothing to open. */
  .dc-chip-gone {
  cursor: default;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  text-decoration-line: line-through;
}
  /* A sent message: its files above the bubble, both right-aligned. */
  .dc-message-user {
  display: flex;
  max-width: 85%;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
  align-self: flex-end;
}
  .dc-message-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

  /* Where the composer sits. Pinned under the transcript once there is one to
     read, and centred in the page while the conversation is empty, as
     claude.ai does: the invitation above it, and room under it for the block
     that comes next (the prompt templates). */
  .dc-composer-dock {
  flex: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 1.25rem;
}
  .dc-composer-dock.is-centred {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 2.5rem;
}
  /* The invitation over the centred composer, on the composer's own width so
     the two read as one block. */
  .dc-composer-invite {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 760px;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-composer-invite-title {
  font-size: 17px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}

  /*
    A coloured textarea: the backdrop paints the variables, the real field
    lies on top with transparent text. Both carry `.dc-hl-shared`, which is
    what keeps the two in register -- any typographic property set on one
    alone shifts the colours away from the letters.
  */
  /* The border goes on the container, never on either half: one placed on the
     textarea or on the backdrop would shift the colours away from the
     letters. `focus-within` because the focus lands on the child, as
     `.dc-composer` does for the same reason. Styled like `.dc-input` rather
     than like the composer -- the title field sits right above it in the same
     column, and two different border weights stacked would read worse than
     the missing border this fixes. */
  .dc-hl {
  position: relative;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  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;
}
  .dc-hl:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  /* Padding lives here, on the class both halves share, so they move together
     and stay in register. `px-3` matches the title field now that the box has
     a border of its own; `px-1` left the text against the edge. */
  .dc-hl-shared {
  margin: 0px;
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border-width: 0px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.625;
}
  .dc-hl-backdrop {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-hl-input {
  position: relative;
  resize: none;
  background-color: transparent;
  color: transparent;
  caret-color: #16191B;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .dc-hl-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-hl-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-hl-input:disabled {
  cursor: not-allowed;
}
  /* The field's own text is transparent -- what is read comes from the
     backdrop underneath -- so an opaque selection would paint over the
     letters and hide them entirely. Translucent, it tints them instead. */
  .dc-hl-input::-moz-selection {
  background-color: rgb(var(--theme-accent) / 0.25);
}
  .dc-hl-input::selection {
  background-color: rgb(var(--theme-accent) / 0.25);
}
  /* A {{ variable }} still waiting for its value. */
  .dc-hl-var {
  border-radius: 3px;
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 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);
  --tw-ring-color: rgb(252 211 77 / 0.7);
}

  /* Variables still to replace, above the composer while a template is filled. */
  .dc-var-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
  .dc-var-chips-label {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-var-chips-left {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-var-chip {
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 12.5px;
  line-height: 1.4;
  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;
}
  /* The same amber as the highlighted text below, so a chip and the run it
     leads to read as one thing. Once replaced, the chip drops to a quiet
     hairline: it stays in place to keep the row from jumping, but nothing
     about it asks to be clicked again. */
  .dc-var-chip.is-todo {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
  .dc-var-chip.is-todo:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
  /* Replaced: the product's own teal rather than a stock green. The config
     says the teal accent stays the only emphasis, and a second bright hue
     would compete with the amber for the eye. Pale ground, dark text: clearly
     done, without asking to be clicked again. */
  .dc-var-chip.is-done {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}

  /* --- The template modal (components/PromptTemplateModal.vue) ----------- */
  /* The template modal: the list on the left, the one being written on the right. */
  /* Bounded, not just floored: the overlay centres the panel without
     scrolling it, so a dialog taller than the window pushes its own footer
     off-screen and the buttons become unreachable. The 22rem floor keeps it
     from collapsing on a short template. */
  .dc-tpl-shell {
  display: flex;
  max-height: 62vh;
  min-height: 22rem;
  gap: 1rem;
}
  /* Fixed width so the editor beside it does not resize every time a longer
     title arrives; it scrolls on its own rather than growing the modal. */
  .dc-tpl-list {
  display: flex;
  width: 14rem;
  flex: none;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
  /* `min-w-0` is what lets the title below actually truncate: without it the
     flex item floors at its content width and the long title pushes the list
     off the panel instead. */
  /* `min-h-0` so this column may shrink inside the bounded shell -- a flex
     child refuses to go below its content without it -- and scrolls its own
     overflow rather than growing the dialog. */
  .dc-tpl-edit {
  display: flex;
  min-height: 0px;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}
  .dc-tpl-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-tpl-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  /* The one being edited, in the same wash the quick-open list uses for the
     row under the cursor -- one meaning, one colour. */
  .dc-tpl-row.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* "New template" is an action, not a template: it sits a step back so the
     list below it reads as the actual contents. */
  .dc-tpl-row.is-new {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-tpl-row-title {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* The shared marker is a fact about the row, never the thing to look at. */
  .dc-tpl-row-shared {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-tpl-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* Inline code in a help line. Set apart by its ground and not by its face:
     the help text is already monospaced, so mono inside mono would not read
     as a sample of what to type. */
  .dc-code {
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}

  /* --- The two ways to a template (components/apps/AssistantApp.vue) ----- */
  /* A primary button split in two: the act on the left, its menu on the right. */
  .dc-split-main {
  flex: 1 1 0%;
  justify-content: center;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
  /* `border-l-white/20` and not `border-white/20`: `.dc-btn` already sets a
     border on all four sides, so the plain colour utility would outline the
     whole caret half instead of drawing the seam against the main one. */
  .dc-split-caret {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left-width: 1px;
  border-left-color: rgb(255 255 255 / 0.2);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
  /* The template offer, under the centred composer. A pill rather than a line
     of prose with a link in it: an em-dash separator around the word "or" is
     the kind of typographic scaffolding that reads as unfinished, and the
     offer is a thing to press. */
  .dc-composer-or {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 760px;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
  /* A hairline each side of the word, rather than em-dashes around it:
     punctuation standing in for a divider is what read as unfinished. */
  .dc-composer-or-sep {
  display: flex;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.75rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-composer-or-rule {
  height: 1px;
  flex: 1 1 0%;
  --tw-bg-opacity: 1;
  background-color: rgb(231 231 227 / var(--tw-bg-opacity, 1));
}
  .dc-composer-or-pill {
  display: inline-flex;
  height: 30px;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 11px;
  padding-right: 11px;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  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;
}
  .dc-composer-or-pill:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-composer-or-pill.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
}
  .dc-composer-or-pill.is-on:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
}
  .dc-pill-strip > .dc-composer-or-pill {
  flex: none;
}
  .dc-composer-or-pill {
  height: 2rem;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-composer-or-pill:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}

  /* --- The file beside the conversation (components/apps/AssistantApp.vue) */
  /* The transcript, and the floor the panel gives way to: a panel dragged
     wide shrinks with the window rather than squeezing the conversation out
     of sight. 300px (TRANSCRIPT_MIN_WIDTH) still leaves the 380px panel room
     beside it at `md`, rail included. Below `md` the panel covers the page
     and the transcript steps aside; there the floor is 0, not the flex default
     of the content's own width, or one long word of a message would widen the
     column past a phone screen and cut every line on the right. */
  .dc-transcript {
  display: flex;
  min-height: 0px;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  @media (min-width: 768px) {

  .dc-transcript {
    min-width: 300px;
  }
}
  .dc-transcript.is-beside-panel {
  display: none;
}
  @media (min-width: 768px) {

  .dc-transcript.is-beside-panel {
    display: flex;
  }
}
  /* The panel: a share of the page between 380px (PANEL_MIN_WIDTH) and 900px,
     the whole width below `md`. Free to shrink from `md` up, so that it is
     the one to give way when the window narrows. */
  .dc-side-panel {
  position: relative;
  display: flex;
  width: 100%;
  flex: none;
  flex-direction: column;
  border-left-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  @media (min-width: 768px) {

  .dc-side-panel {
    width: 46%;
    min-width: 380px;
    max-width: 900px;
    flex-shrink: 1;
  }
}
  /* Dragged: the width the component hands over, with no ceiling -- a
     document editor wants the room, and the drag already stops where the
     transcript would fall under its floor. A custom property rather than an
     inline width, which would reach below `md` as well. */
  @media (min-width: 768px) {

  .dc-side-panel.is-resized {
    width: var(--dc-panel-width);
    max-width: none;
  }
}
  /* The panel's left edge as something to grab: a strip a few pixels either
     side of the hairline, so catching it takes no aim at a single pixel.
     `-left-[5px]` because an absolute child is placed from the padding edge,
     one border width in, which centres the strip on the border. Only from
     `md` up, where the panel sits beside the transcript and not over it. */
  .dc-side-panel-resizer {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -5px;
  z-index: 10;
  display: none;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  @media (min-width: 768px) {

  .dc-side-panel-resizer {
    display: block;
  }
}
  /* An accent line over the hairline once the strip is in hand. On hover
     after a beat, so crossing it on the way elsewhere does not flash; at once
     for a keyboard focus and for the whole drag. */
  .dc-side-panel-resizer::after {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 3px;
  width: 3px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    content: '';
}
  .dc-side-panel-resizer:hover::after {
  opacity: 1;
  transition-delay: 150ms;
}
  .dc-side-panel-resizer:focus-visible::after,
  .dc-side-panel-resizer.is-dragging::after {
  opacity: 1;
}
  /* Over the whole page for as long as a drag lasts (see the template). */
  .dc-side-panel-shield {
  position: fixed;
  inset: 0px;
  z-index: 50;
  cursor: col-resize;
}

  /* --- Meters ----------------------------------------------------------- */

  .dc-meter {
  height: 5px;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 223 / var(--tw-bg-opacity, 1));
}
  .dc-meter > div {
  height: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

  /* --- Background jobs toaster ------------------------------------------
     Drawn by js/jobs_toaster.js into file/_jobs_toaster.html, on every page
     of the app shell. The section ships with `hidden`, which wins over the
     `flex` of .dc-jobs: utilities are emitted after components. */

  /* Stack of cards at the bottom right of the window. */
  .dc-jobs {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 30;
  display: flex;
  width: 296px;
  max-width: calc(100vw - 2rem);
  flex-direction: column;
  gap: 0.5rem;
}
  /* Scrolling list of the cards. It pads its sides and bottom by the reach of
     the cards' shadow and takes it back with negative margins: a scrolling
     box clips whatever overflows it, shadows included. */
  .dc-jobs-list {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-bottom: -0.75rem;
  display: flex;
  max-height: 18rem;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  /* One job, drawn like the transfer card of the file browser. */
  .dc-job-card {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  /* Glyph, title and Close button. */
  .dc-job-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
  .dc-job-icon {
  margin-top: 1px;
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-job-title {
  min-width: 0px;
  flex: 1 1 0%;
  overflow-wrap: break-word;
  font-size: 13px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-job-close {
  margin-right: -0.25rem;
  flex: none;
  border-radius: 0.25rem;
  padding: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-job-close:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* The transfer card's thin meter. The fill stays ghost grey (cancelling,
     cancelled) unless a status modifier colours it. */
  .dc-job-meter {
  height: 0.25rem;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 235 / var(--tw-bg-opacity, 1));
}
  .dc-job-meter-fill {
  height: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(180 185 181 / var(--tw-bg-opacity, 1));
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-job-meter-fill.is-running {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}
  .dc-job-meter-fill.is-done {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-ink) / var(--tw-bg-opacity, 1));
}
  /* Warm brown, the pair of .dc-btn-danger: never a saturated red. */
  .dc-job-meter-fill.is-failed {
  --tw-bg-opacity: 1;
  background-color: rgb(138 74 51 / var(--tw-bg-opacity, 1));
}
  /* Queued: no value yet, so the bar only moves back and forth. Its inline
     width is what stays for a visitor who asked for reduced motion. */
  .dc-job-meter-indeterminate {
  height: 100%;
}
  @keyframes upl {

  from {
    width: 12%;
  }

  to {
    width: 78%;
  }
}
  .dc-job-meter-indeterminate {
  animation: upl 3.5s ease-in-out infinite alternate;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}
  @media (prefers-reduced-motion: reduce) {

  .dc-job-meter-indeterminate {
    animation: none;
  }
}
  /* Status line under the meter, with the one action there is. */
  .dc-job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
  .dc-job-status {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-job-status.is-done {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-job-status.is-failed {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  /* Progress counter of a running copy, next to .dc-meta. */
  .dc-job-counter {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* Cancel, next to .dc-btn-quiet .dc-btn-sm: pulled into the card's padding,
     so the button's own padding does not make the line taller. */
  .dc-job-cancel {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
  margin-right: -0.5rem;
  flex: none;
}
  /* "Open", next to .dc-link. */
  .dc-job-open {
  flex: none;
  font-weight: 500;
}
  /* Why a copy failed, under its status line. */
  .dc-job-error {
  overflow-wrap: break-word;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}

  /* --- Foldable sections (components/apps/AssistantFilesApp.vue) ---------
     The assistant's files, one section per discussion. Folded until asked:
     an account with twenty discussions would otherwise open onto twenty
     stacked tables. Several may stand open at once. */

  .dc-accordion {
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  margin-bottom: 0.625rem;
  overflow: hidden;
}
  /* The header row. The way back is a sibling of the fold button and never a
     child of it: an <a> inside a <button> is invalid markup, and the caret
     stays last so it reads as the fold control at the end of the row. */
  .dc-accordion-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  .dc-accordion-head {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}
  /* The fold button reaches the whole row, its padding included: clicking
     anywhere on the header folds the section, not only the words. A stretched
     overlay rather than a click handler on the row itself -- that way the
     <button> keeps its role, its keyboard behaviour and its `aria-expanded`,
     which a listener on a <div> would have thrown away. Whatever must stay
     clickable sits above it (`.dc-accordion-link`, the caret). */
  .dc-accordion-head::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  /* The way back, lifted over the overlay so a click on it opens the
     discussion instead of folding the section. */
  .dc-accordion-link {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  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;
}
  .dc-accordion-link:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-accordion-link {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  line-height: 1.4;
  position: relative;
  z-index: 10;
  flex: none;
}
  .dc-accordion-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* Count and total, both summed in the browser from the payload's sizes. */
  .dc-accordion-meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  flex: none;
}
  .dc-accordion-caret {
  position: relative;
  z-index: 10;
  flex: none;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-accordion-caret:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-accordion-caret.is-on {
  --tw-rotate: 180deg;
  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));
}
  .dc-accordion-body {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
}
  .dc-accordion-foot {
  display: flex;
  justify-content: flex-end;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

  /* Bulk bar of that page: the dark pill the explorer uses (BrowseApp.vue)
     with one action instead of six. Fixed and not absolute -- this page
     scrolls the window rather than an inner pane -- and lifted by the jobs
     toaster's height (--dc-jobs-h, 0px while hidden) so it never covers it. */
  .dc-select-bar {
  pointer-events: none;
  position: fixed;
  left: 0px;
  right: 0px;
  z-index: 40;
  display: flex;
  justify-content: center;
    bottom: calc(var(--dc-jobs-h, 0px) + 26px);
}
  .dc-select-bar-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(22 25 27 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 0.625rem;
  --tw-shadow: 0 18px 40px -12px rgba(20,25,22,0.6);
  --tw-shadow-colored: 0 18px 40px -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);
}
  .dc-select-bar-label {
  margin-right: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .dc-select-bar-clear {
  margin-left: 0.375rem;
  display: flex;
  height: 26px;
  width: 26px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-rail-text) / var(--tw-text-opacity, 1));
  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;
}
  .dc-select-bar-clear:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* --- Notices ----------------------------------------------------------
     Inline callouts: retention reminders, password confirmations, one-shot
     secrets. Tinted from the file-type palette, never a saturated alert red. */

  .dc-notice {
  border-radius: 14px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
}
  .dc-notice-info {
  border-radius: 14px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / 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(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-notice-warn {
  border-radius: 14px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-border-opacity: 1;
  border-color: rgb(234 223 196 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(246 241 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
  .dc-notice-danger {
  border-radius: 14px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-border-opacity: 1;
  border-color: rgb(240 217 208 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-notice-success {
  border-radius: 14px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-tint) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
}

  /* --- Toasts -------------------------------------------------------------
     What just happened, for a few seconds (js/toasts.js). Bottom right, above
     the jobs toaster, whose height it publishes as --dc-jobs-h (0px while
     hidden); the min() term adds a gap only when there is a toaster to
     clear. Same tints as the notices. */
  .dc-toast-stack {
  pointer-events: none;
  position: fixed;
  right: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
    bottom: calc(1rem + var(--dc-jobs-h, 0px) + min(var(--dc-jobs-h, 0px), 0.5rem));
}
  .dc-toast {
  max-width: 24rem;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .dc-toast.is-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-tint) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
}
  .dc-toast.is-error {
  --tw-border-opacity: 1;
  border-color: rgb(240 217 208 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}

  /* --- Empty state ------------------------------------------------------ */

  .dc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}
  /* Glyph over the title of an empty state, in a soft round tile. */
  .dc-empty-icon {
  margin-bottom: 0.25rem;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-empty-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-empty-hint {
  max-width: 20rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* One-line "nothing here" inside a scrolling list, where the full .dc-empty
     block would push the list out of its box. */
  .dc-empty-inline {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}

  /* --- Rendered Markdown -------------------------------------------------
     Where an assistant answer lands once parsed (see js/markdown.js). Written
     out rather than taken from a typography plugin: the chat is the only place
     that renders Markdown, its type has to match the messages around it, and
     the tag list is the short one the sanitiser allows. */

  .dc-prose {
  font-size: 13.5px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* The bubble already spaces the message, so its outer edges add nothing. */
  .dc-prose > :first-child {
  margin-top: 0px;
}
  .dc-prose > :last-child {
  margin-bottom: 0px;
}

  .dc-prose p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
  .dc-prose strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* One size for every level: an answer uses headings to separate two or three
     paragraphs, not to open a document. */
  .dc-prose h1, .dc-prose h2, .dc-prose h3,
  .dc-prose h4, .dc-prose h5, .dc-prose h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-prose ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  list-style-type: disc;
  padding-left: 1.25rem;
}
  .dc-prose ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  list-style-type: decimal;
  padding-left: 1.25rem;
}
  .dc-prose li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
  .dc-prose li > ul, .dc-prose li > ol, .dc-prose li p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
  .dc-prose blockquote {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-prose a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
}
  .dc-prose hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
  .dc-prose code {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
  /* A fenced block: the <pre> carries the frame, and the <code> inside it drops
     the chip an inline span would get. */
  .dc-prose pre {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  overflow-x: auto;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  .dc-prose pre code {
  background-color: transparent;
  padding: 0px;
  font-size: 11.5px;
}
  .dc-prose table {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.4;
}
  .dc-prose th, .dc-prose td {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
  vertical-align: top;
}
  .dc-prose th {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
.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;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.-right-1 {
  right: -0.25rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-\[90px\] {
  bottom: 90px;
}
.left-0 {
  left: 0px;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-4 {
  right: 1rem;
}
.right-7 {
  right: 1.75rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-4 {
  top: 1rem;
}
.top-\[60px\] {
  top: 60px;
}
.top-full {
  top: 100%;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-\[22px\] {
  margin-left: 22px;
  margin-right: 22px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-3\.5 {
  margin-bottom: 0.875rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-\[26px\] {
  margin-bottom: 26px;
}
.mb-\[9px\] {
  margin-bottom: 9px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.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-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-\[7px\] {
  margin-top: 7px;
}
.mt-px {
  margin-top: 1px;
}
.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 !important;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.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-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[120px\] {
  height: 120px;
}
.h-\[17px\] {
  height: 17px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[42px\] {
  height: 42px;
}
.h-\[46px\] {
  height: 46px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[54px\] {
  height: 54px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[64px\] {
  height: 64px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[74px\] {
  height: 74px;
}
.h-\[7px\] {
  height: 7px;
}
.h-dvh {
  height: 100dvh;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[22px\] {
  max-height: 22px;
}
.max-h-\[320px\] {
  max-height: 320px;
}
.max-h-\[380px\] {
  max-height: 380px;
}
.max-h-\[40vh\] {
  max-height: 40vh;
}
.max-h-\[52vh\] {
  max-height: 52vh;
}
.max-h-\[56vh\] {
  max-height: 56vh;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[16px\] {
  min-height: 16px;
}
.min-h-\[2\.25rem\] {
  min-height: 2.25rem;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[24px\] {
  min-height: 24px;
}
.min-h-\[2rem\] {
  min-height: 2rem;
}
.min-h-\[350px\] {
  min-height: 350px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.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-\[132px\] {
  width: 132px;
}
.w-\[16rem\] {
  width: 16rem;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[210px\] {
  width: 210px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[272px\] {
  width: 272px;
}
.w-\[296px\] {
  width: 296px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[340px\] {
  width: 340px;
}
.w-\[34px\] {
  width: 34px;
}
.w-\[36px\] {
  width: 36px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[40rem\] {
  width: 40rem;
}
.w-\[64px\] {
  width: 64px;
}
.w-\[6px\] {
  width: 6px;
}
.w-\[70px\] {
  width: 70px;
}
.w-\[76px\] {
  width: 76px;
}
.w-\[7px\] {
  width: 7px;
}
.w-\[90px\] {
  width: 90px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[13rem\] {
  min-width: 13rem;
}
.min-w-\[14rem\] {
  min-width: 14rem;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[17px\] {
  min-width: 17px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[2\.5rem\] {
  min-width: 2.5rem;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[620px\] {
  min-width: 620px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-\[1000px\] {
  max-width: 1000px;
}
.max-w-\[10rem\] {
  max-width: 10rem;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[1300px\] {
  max-width: 1300px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[24rem\] {
  max-width: 24rem;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[400px\] {
  max-width: 400px;
}
.max-w-\[40rem\] {
  max-width: 40rem;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[460px\] {
  max-width: 460px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[540px\] {
  max-width: 540px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[6rem\] {
  max-width: 6rem;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[80vw\] {
  max-width: 80vw;
}
.max-w-\[85vw\] {
  max-width: 85vw;
}
.max-w-\[860px\] {
  max-width: 860px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[92\%\] {
  max-width: 92%;
}
.max-w-\[calc\(100\%-24px\)\] {
  max-width: calc(100% - 24px);
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.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-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.shrink-\[999\] {
  flex-shrink: 999;
}
.grow {
  flex-grow: 1;
}
.table-fixed {
  table-layout: fixed;
}
.border-collapse {
  border-collapse: collapse;
}
.-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));
}
.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-x-\[-1\] {
  --tw-scale-x: -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));
}
.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));
}
@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-col-resize {
  cursor: col-resize;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, 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-\[minmax\(0\2c 1fr\)_120px_150px_90px\] {
  grid-template-columns: minmax(0,1fr) 120px 150px 90px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_140px_110px_90px\] {
  grid-template-columns: minmax(0,1fr) 140px 110px 90px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_180px_90px_140px_140px_240px\] {
  grid-template-columns: minmax(0,1fr) 180px 90px 140px 140px 240px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_220px_100px_150px_60px\] {
  grid-template-columns: minmax(0,1fr) 220px 100px 150px 60px;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.content-start {
  align-content: flex-start;
}
.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-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-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-\[11px\] {
  gap: 11px;
}
.gap-\[14px\] {
  gap: 14px;
}
.gap-\[18px\] {
  gap: 18px;
}
.gap-\[22px\] {
  gap: 22px;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-\[7px\] {
  gap: 7px;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.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-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.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-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));
}
.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-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
.divide-line-softer > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.justify-self-start {
  justify-self: start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.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-\[10px\] {
  border-radius: 10px;
}
.rounded-\[11px\] {
  border-radius: 11px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-card {
  border-radius: 14px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-\[22px\] {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
.rounded-t-card {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.rounded-br-md {
  border-bottom-right-radius: 0.375rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#8A4A33\] {
  --tw-border-opacity: 1;
  border-color: rgb(138 74 51 / var(--tw-border-opacity, 1));
}
.border-\[\#E4CFC6\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 207 198 / var(--tw-border-opacity, 1));
}
.border-\[\#F0D9D0\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 217 208 / var(--tw-border-opacity, 1));
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
.border-accent-ink {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-ink) / var(--tw-border-opacity, 1));
}
.border-accent-tint {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-tint) / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-guest-forest-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-forest-line) / var(--tw-border-opacity, 1));
}
.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
.border-line-soft {
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
}
.border-line-softer {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
}
.border-line-strong {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
}
.border-l-accent {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.\!bg-\[\#7A6224\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(122 98 36 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[\#8A4A33\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(138 74 51 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-accent {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-line-strong {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(213 216 212 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-subtle {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-surface {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.bg-\[\#7A6224\] {
  --tw-bg-opacity: 1;
  background-color: rgb(122 98 36 / var(--tw-bg-opacity, 1));
}
.bg-\[\#8A4A33\] {
  --tw-bg-opacity: 1;
  background-color: rgb(138 74 51 / var(--tw-bg-opacity, 1));
}
.bg-\[\#C7A44E\] {
  --tw-bg-opacity: 1;
  background-color: rgb(199 164 78 / var(--tw-bg-opacity, 1));
}
.bg-\[\#CFD3CF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(207 211 207 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DDE3E0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 227 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ECEAF6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 234 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F1F1ED\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F6E9E4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCFCFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 250 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}
.bg-accent-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-ink) / var(--tw-bg-opacity, 1));
}
.bg-accent-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
}
.bg-accent-wash {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(237 237 233 / var(--tw-bg-opacity, 1));
}
.bg-guest-avatar {
  --tw-bg-opacity: 1;
  background-color: rgb(227 233 230 / var(--tw-bg-opacity, 1));
}
.bg-guest-forest {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest) / var(--tw-bg-opacity, 1));
}
.bg-guest-forest-line {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-forest-line) / var(--tw-bg-opacity, 1));
}
.bg-guest-forest\/20 {
  background-color: rgb(var(--theme-forest) / 0.2);
}
.bg-guest-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(245 241 232 / var(--tw-bg-opacity, 1));
}
.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(22 25 27 / var(--tw-bg-opacity, 1));
}
.bg-ink-faint {
  --tw-bg-opacity: 1;
  background-color: rgb(154 160 156 / var(--tw-bg-opacity, 1));
}
.bg-ink-ghost {
  --tw-bg-opacity: 1;
  background-color: rgb(180 185 181 / var(--tw-bg-opacity, 1));
}
.bg-ink\/40 {
  background-color: rgb(22 25 27 / 0.4);
}
.bg-ink\/60 {
  background-color: rgb(22 25 27 / 0.6);
}
.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(231 231 227 / var(--tw-bg-opacity, 1));
}
.bg-line-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 235 / var(--tw-bg-opacity, 1));
}
.bg-line-track {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 223 / var(--tw-bg-opacity, 1));
}
.bg-page {
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
}
.bg-rail {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail) / var(--tw-bg-opacity, 1));
}
.bg-rail-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-hover) / var(--tw-bg-opacity, 1));
}
.bg-rail-muted\/60 {
  background-color: rgb(var(--theme-rail-muted) / 0.6);
}
.bg-rail\/95 {
  background-color: rgb(var(--theme-rail) / 0.95);
}
.bg-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
.bg-subtle\/60 {
  background-color: rgb(244 244 240 / 0.6);
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-rail {
  --tw-gradient-from: rgb(var(--theme-rail) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--theme-rail) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.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-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-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[18px\] {
  padding: 18px;
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[14px\] {
  padding-left: 14px;
  padding-right: 14px;
}
.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}
.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}
.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[30px\] {
  padding-left: 30px;
  padding-right: 30px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.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-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}
.py-\[22px\] {
  padding-top: 22px;
  padding-bottom: 22px;
}
.py-\[26px\] {
  padding-top: 26px;
  padding-bottom: 26px;
}
.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-\[16vh\] {
  padding-bottom: 16vh;
}
.pb-\[22px\] {
  padding-bottom: 22px;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.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-\[18px\] {
  padding-top: 18px;
}
.pt-\[22px\] {
  padding-top: 22px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.font-sans {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
}
.\!text-\[11px\] {
  font-size: 11px !important;
}
.text-2xs {
  font-size: 10px;
  line-height: 1.35;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.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-sm\+ {
  font-size: 13.5px;
  line-height: 1.45;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-xs\+ {
  font-size: 12.5px;
  line-height: 1.4;
}
.font-bold {
  font-weight: 700;
}
.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;
}
.normal-case {
  text-transform: none;
}
.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-\[1\.65\] {
  line-height: 1.65;
}
.leading-\[17px\] {
  line-height: 17px;
}
.leading-\[44px\] {
  line-height: 44px;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[0\.03em\] {
  letter-spacing: 0.03em;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-code {
  letter-spacing: 0.04em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight2 {
  letter-spacing: -0.015em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.\!text-\[\#7A6224\] {
  --tw-text-opacity: 1 !important;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1)) !important;
}
.\!text-ink-muted {
  --tw-text-opacity: 1 !important;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#33578A\] {
  --tw-text-opacity: 1;
  color: rgb(51 87 138 / var(--tw-text-opacity, 1));
}
.text-\[\#3D6B45\] {
  --tw-text-opacity: 1;
  color: rgb(61 107 69 / var(--tw-text-opacity, 1));
}
.text-\[\#4B4497\] {
  --tw-text-opacity: 1;
  color: rgb(75 68 151 / var(--tw-text-opacity, 1));
}
.text-\[\#5A5F5B\] {
  --tw-text-opacity: 1;
  color: rgb(90 95 91 / var(--tw-text-opacity, 1));
}
.text-\[\#7A6224\] {
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
.text-\[\#8A4A33\] {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
.text-\[\#C7A44E\] {
  --tw-text-opacity: 1;
  color: rgb(199 164 78 / var(--tw-text-opacity, 1));
}
.text-\[\#CFD3CF\] {
  --tw-text-opacity: 1;
  color: rgb(207 211 207 / var(--tw-text-opacity, 1));
}
.text-\[\#D9A400\] {
  --tw-text-opacity: 1;
  color: rgb(217 164 0 / var(--tw-text-opacity, 1));
}
.text-\[\#E4826A\] {
  --tw-text-opacity: 1;
  color: rgb(228 130 106 / var(--tw-text-opacity, 1));
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent) / var(--tw-text-opacity, 1));
}
.text-accent-dark {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
}
.text-accent-deep {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
.text-accent-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
.text-accent-on {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-on) / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-guest-forest {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest) / var(--tw-text-opacity, 1));
}
.text-guest-forest-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-muted) / var(--tw-text-opacity, 1));
}
.text-guest-forest-text {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-forest-text) / var(--tw-text-opacity, 1));
}
.text-guest-label {
  --tw-text-opacity: 1;
  color: rgb(138 134 114 / var(--tw-text-opacity, 1));
}
.text-guest-paper {
  --tw-text-opacity: 1;
  color: rgb(245 241 232 / var(--tw-text-opacity, 1));
}
.text-inherit {
  color: inherit;
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
.text-ink-body {
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
.text-ink-faint {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
.text-ink-ghost {
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
.text-primary-on {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-on) / var(--tw-text-opacity, 1));
}
.text-rail-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-rail-muted) / var(--tw-text-opacity, 1));
}
.text-rail-text {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-rail-text) / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.accent-accent {
  accent-color: rgb(var(--theme-accent) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.shadow-bar {
  --tw-shadow: 0 18px 40px -12px rgba(20,25,22,0.6);
  --tw-shadow-colored: 0 18px 40px -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-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-pop {
  --tw-shadow: 0 20px 44px -18px rgba(20,25,22,0.35);
  --tw-shadow-colored: 0 20px 44px -18px 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-raised {
  --tw-shadow: 0 1px 2px rgba(20,25,22,0.12);
  --tw-shadow-colored: 0 1px 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-window {
  --tw-shadow: 0 30px 70px -20px rgba(20,25,22,0.35), 0 0 0 1px rgba(20,25,22,0.08);
  --tw-shadow-colored: 0 30px 70px -20px 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);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.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-accent {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
.ring-accent-tint {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent-tint) / var(--tw-ring-opacity, 1));
}
.ring-line {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(231 231 227 / var(--tw-ring-opacity, 1));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-\[width\] {
  transition-property: width;
  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-200 {
  transition-duration: 200ms;
}
  /* Hatched placeholder used for previews and grid thumbnails. */
  .dc-hatch {
    background: repeating-linear-gradient(135deg, #F2F2EE 0 6px, #FBFBF9 6px 12px);
  }

/* --- File-type palette ---------------------------------------------------
   One tinted background + ink pair per family, applied to .dc-ft badges and
   reused for grid thumbnails. The ink is what the glyph inside is drawn in.
   Keep in sync with FILE_TYPE_MAP and FAMILY_ICON in common.js. */
.ft-dir   { background: #F8F2E1; color: #9A7A28; }  /* the browse listing's #C7A44E, darkened to sit on its own wash */
.ft-doc   { background: #F6E9E4; color: #8A4A33; }
.ft-sheet { background: #EDF3EC; color: #3D6B45; }
.ft-slide { background: #F6F1E4; color: #7A6224; }
.ft-image { background: #F6F1E4; color: #7A6224; }
.ft-video { background: #E9EEF6; color: #33578A; }
.ft-audio { background: #ECEAF6; color: #4B4497; }
.ft-design{ background: #ECEAF6; color: #4B4497; }
.ft-code  { background: #E9EEF6; color: #33578A; }
.ft-text  { background: #F1F1ED; color: #5A5F5B; }
.ft-arch  { background: #F6E9E4; color: #7A4029; }
.ft-other { background: #F1F1ED; color: #5A5F5B; }

/* --- Legacy behaviour carried over --------------------------------------- */
[x-cloak] { display: none !important; }
.tree-item > .tree-children { display: none; }
.tree-item.open > .tree-children { display: block; }
.tree-toggle { transition: transform 0.15s; }
.tree-item.open > div > .tree-toggle,
.tree-item.open > a > .tree-toggle { transform: rotate(90deg); }
.email-row[draggable] { cursor: grab; }
.email-row[draggable]:active { cursor: grabbing; }
/* Ticked for a bulk action. Two classes, so it wins over the background the
   open message carries. */
.email-row.is-checked { background: rgb(var(--theme-accent-tint)); }

/* Flash of the item a search result points at (see .dc-flash). An inset ring
   rather than a background: it reads the same on a table row and on a card,
   and it leaves the element's own colours alone. */
@keyframes dc-flash {
    0%, 96% { box-shadow: inset 0 0 0 2px rgb(var(--theme-accent)); }
    100%    { box-shadow: inset 0 0 0 2px transparent; }
}
.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}
.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-accent-tint::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
}
.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm\+::file-selector-button {
  font-size: 13.5px;
  line-height: 1.45;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-accent-deep::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
.placeholder\:text-ink-faint::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
.placeholder\:text-ink-faint::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.focus-within\:border-accent:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
.focus-within\:opacity-100:focus-within {
  opacity: 1;
}
.hover\:border-accent:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#EFEFEB\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F6E9E4\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F6F1E4\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 241 228 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent-ink:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-ink) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent-tint:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent-wash:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
.hover\:bg-line-softer:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary-hover) / var(--tw-bg-opacity, 1));
}
.hover\:bg-rail-active-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-active-hover) / var(--tw-bg-opacity, 1));
}
.hover\:bg-rail-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-hover) / var(--tw-bg-opacity, 1));
}
.hover\:bg-sidebar:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-subtle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:text-\[\#8A4A33\]:hover {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#C7A44E\]:hover {
  --tw-text-opacity: 1;
  color: rgb(199 164 78 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-deep:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
.hover\:text-accent-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
.hover\:text-accent-on:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-on) / var(--tw-text-opacity, 1));
}
.hover\:text-guest-paper:hover {
  --tw-text-opacity: 1;
  color: rgb(245 241 232 / var(--tw-text-opacity, 1));
}
.hover\:text-inherit:hover {
  color: inherit;
}
.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
.hover\:text-ink-body:hover {
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-hover-on:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-primary-hover-on) / var(--tw-text-opacity, 1));
}
.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\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:file\:bg-accent-soft::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-soft) / var(--tw-bg-opacity, 1));
}
.focus\:border-accent:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-0: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(0px + 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-accent:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-2: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);
}
.focus-visible\:ring-accent:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
.disabled\:cursor-default:disabled {
  cursor: default;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:hover\:text-ink-faint:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
.group:focus-within .group-focus-within\:block {
  display: block;
}
.group:hover .group-hover\:block {
  display: block;
}
.group:hover .group-hover\:flex {
  display: flex;
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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\:opacity-0 {
  opacity: 0;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media not all and (min-width: 1024px) {

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:w-auto {
    width: auto;
  }

  .max-lg\:min-w-0 {
    min-width: 0px;
  }

  .max-lg\:flex-1 {
    flex: 1 1 0%;
  }

  .max-lg\:gap-3 {
    gap: 0.75rem;
  }

  .max-lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .max-lg\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .max-lg\:p-3 {
    padding: 0.75rem;
  }

  .max-lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .max-lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

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

  .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\:flex-row {
    flex-direction: row;
  }

  .sm\:px-\[34px\] {
    padding-left: 34px;
    padding-right: 34px;
  }
}
@media (min-width: 768px) {

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .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));
  }
}
@media (min-width: 1024px) {

  .lg\:bottom-6 {
    bottom: 1.5rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:rounded-card {
    border-radius: 14px;
  }

  .lg\:rounded-none {
    border-radius: 0px;
  }

  .lg\:border {
    border-width: 1px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-line {
    --tw-border-opacity: 1;
    border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  }

  .lg\:border-line-soft {
    --tw-border-opacity: 1;
    border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  }

  .lg\:bg-page {
    --tw-bg-opacity: 1;
    background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:px-\[30px\] {
    padding-left: 30px;
    padding-right: 30px;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:pb-\[18px\] {
    padding-bottom: 18px;
  }

  .lg\:pb-\[26px\] {
    padding-bottom: 26px;
  }

  .lg\:pr-4 {
    padding-right: 1rem;
  }

  .lg\:pt-5 {
    padding-top: 1.25rem;
  }

  .lg\:pt-6 {
    padding-top: 1.5rem;
  }

  .lg\:text-\[13px\] {
    font-size: 13px;
  }

  .lg\:text-\[23px\] {
    font-size: 23px;
  }
}
@media (min-width: 1280px) {

  .xl\:static {
    position: static;
  }

  .xl\:bottom-auto {
    bottom: auto;
  }

  .xl\:top-auto {
    top: auto;
  }

  .xl\:z-auto {
    z-index: auto;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\: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);
  }
}
@media (min-width: 1536px) {

  .\32xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .\32xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .\32xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .\32xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (prefers-color-scheme: dark) {

  .dark\:border-amber-500\/40 {
    border-color: rgb(245 158 11 / 0.4);
  }

  .dark\:bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
  }

  .dark\:text-amber-200 {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
  }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}
.\[\&_mark\]\:rounded-sm mark {
  border-radius: 0.125rem;
}
.\[\&_mark\]\:bg-\[\#F6F1E4\] mark {
  --tw-bg-opacity: 1;
  background-color: rgb(246 241 228 / var(--tw-bg-opacity, 1));
}
.\[\&_mark\]\:px-0\.5 mark {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.\[\&_mark\]\:text-\[\#7A6224\] mark {
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
.\[\&_svg\]\:h-full svg {
  height: 100%;
}
.\[\&_svg\]\:w-full svg {
  width: 100%;
}


/*# sourceMappingURL=common-b56695a9.css.e0fcab923cb5.map */