*, ::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;
  min-height: 56px;
  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 {
    min-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 row of a page's own actions above its content, primary action first.
     Where the browse toolbar puts them: on the left from lg up, gathered on
     the right below, within the thumb's reach. A Back link marked .is-back
     keeps the left edge, as Back does in the browse toolbar. */
  .dc-page-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
  @media not all and (min-width: 1024px) {

  .dc-page-actions {
    justify-content: flex-end;
  }

  .dc-page-actions > .is-back {
    margin-right: auto;
  }
}
  /* The menu of a page's "New" button: under it, aligned on its left edge,
     or on its right one below lg, where the button sits at the right. */
  .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;
  top: 100%;
  z-index: 40;
  margin-top: 0.375rem;
  width: 15rem;
  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;
  }
}
  /* 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));
}
  .dc-form-results-table th.is-deleted .dc-menu-label {
  font-style: italic;
}
  .dc-menu-label {
  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;
  }
}
  /* The field searching its page (js/search/search_bar.js): wider, for the
     scope pill and the chips it holds before the words. Once it holds a
     search the ⌘K hint and the browser's own cross (which would clear the
     words and leave the chips) make way for .dc-search-clear. */
  .dc-topbar-search-field[data-search-provider] {
  padding-right: 0.375rem;
}
  @media (min-width: 1024px) {

  .dc-topbar-search-field[data-search-provider] {
    width: 420px;
  }
}
  @media (min-width: 1280px) {

  .dc-topbar-search-field[data-search-provider] {
    width: 560px;
  }
}
  @media (min-width: 1536px) {

  .dc-topbar-search-field[data-search-provider] {
    width: 640px;
  }
}
  /* Once the bar is wired, the field grows when the chips and the words need
     more lines, and the top bar with it (its height is a minimum): the page
     moves down rather than disappearing under the field. The margins are
     what the bar's own height left around a one-line field. */
  .dc-topbar-search.has-page-search > .dc-topbar-search-field {
  margin-top: 9.5px;
  margin-bottom: 9.5px;
  height: auto;
  min-height: 2.25rem;
  align-items: flex-start;
  padding-top: 5px;
  padding-bottom: 5px;
}
  @media (min-width: 1024px) {

  .dc-topbar-search.has-page-search > .dc-topbar-search-field {
    margin-top: 11.5px;
    margin-bottom: 11.5px;
  }
}
  .dc-topbar-search.has-page-search > .dc-topbar-search-field > .dc-search-icon {
  margin-top: 5px;
}
  .dc-topbar-search.has-page-search .dc-search-kbd {
  margin-top: 3px;
}
  /* The chips and the words, wrapping together. */
  .dc-search-tokens {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
  .dc-topbar-search-field.has-query .dc-search-kbd {
  display: none;
}
  /* On a narrow screen the scope pill stands for the magnifier, and the
     words keep some room beside the chips. */
  @media not all and (min-width: 1024px) {

  .dc-topbar-search-field[data-search-mode="page"] > .dc-search-icon {
    display: none;
  }
}
  .dc-topbar-search-field[data-search-provider] input[type="search"] {
  height: 1.5rem;
  min-width: 8rem;
}
  .dc-topbar-search-field[data-search-mode="page"] input::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}
  .dc-search-clear {
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-search-clear: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));
}
  /* The scope the field searches ("Mail", "Everywhere"), which opens the
     choice of the other one. */
  .dc-search-scope {
  display: inline-flex;
  height: 1.5rem;
  max-width: 120px;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / 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-search-scope:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-soft) / var(--tw-bg-opacity, 1));
}
  @media not all and (min-width: 1024px) {

  .dc-search-scope {
    max-width: 96px;
  }
}
  .dc-topbar-search-field[data-search-mode="global"] .dc-search-scope {
  --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-topbar-search-field[data-search-mode="global"] .dc-search-scope:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* The applied filters, before the words, on the lines they share. */
  /* No box of its own: the chips are items of .dc-search-tokens. */
  .dc-search-chips {
  display: contents;
}
  .dc-search-chip {
  display: inline-flex;
  height: 1.5rem;
  max-width: 100%;
  flex: none;
  align-items: center;
  gap: 0.125rem;
  border-radius: 0.375rem;
  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.5rem;
  padding-right: 0.125rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* The label of a chip that can be edited: another value, or back to the
     field. */
  .dc-search-chip-edit {
  display: inline-flex;
  min-width: 0px;
  align-items: center;
  gap: 0.125rem;
  border-radius: 0.25rem;
}
  .dc-search-chip-edit:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-search-chip-remove {
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-search-chip-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));
}
  /* The dropdown of a page's search: the filters to add, the values of the
     one being picked, then the way to the global search. */
  .dc-search-panel {
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 50;
  margin-top: 0.5rem;
  max-height: 420px;
  width: 100%;
  overflow-y: auto;
  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-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: left;
  --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-search-section {
  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));
}
  .dc-form-results-table th.is-deleted .dc-search-section {
  font-style: italic;
}
  .dc-search-section {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.25rem;
}
  .dc-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.125rem;
  padding-bottom: 0.5rem;
}
  .dc-search-filter {
  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-search-filter:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-search-filter.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-search-filter.is-on:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-primary) / var(--tw-border-opacity, 1));
}
  .dc-pill-strip > .dc-search-filter {
  flex: none;
}
  .dc-search-filter {
  height: 1.75rem;
  gap: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-search-filter.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-search-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;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  --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;
}
  .dc-search-option:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-search-option > svg {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-search-option > span:not(.dc-search-option-hint):not(.dc-search-option-space) {
  min-width: 0px;
  flex: 1 1 0%;
}
  .dc-search-option.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  /* The two days of a period picked by hand. */
  .dc-search-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.625rem;
}
  .dc-search-range-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-search-range-field > .dc-input {
  height: 2rem;
  width: 9.5rem;
  padding-top: 0px;
  padding-bottom: 0px;
}
  /* Where the tick of the current value would be, on the other values. */
  .dc-search-option-space {
  height: 0.875rem;
  width: 0.875rem;
  flex: none;
}
  .dc-search-option-hint {
  max-width: 45%;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-search-divider {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
}
  /* A searched word in the rows it found, the colour of /search/'s snippets.
     Atomic (inline-block), so a line cut by an ellipsis drops a mark it
     cannot show whole instead of painting a sliver of it past the "…". */
  .dc-search-hit {
  display: inline-block;
  border-radius: 0.125rem;
  --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));
}

  /* The dropdown of the global search (js/global_search.js): the answers by
     section, each headed by its name and a "See all" to the results page. */
  .dc-gsearch-panel {
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 50;
  margin-top: 0.5rem;
  max-height: min(36rem, 75vh);
  width: 100%;
  overflow-y: auto;
  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));
  text-align: left;
  --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-gsearch-group {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
  .dc-gsearch-group + .dc-gsearch-group {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
}
  .dc-gsearch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.125rem;
}
  .dc-gsearch-more {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-gsearch-more:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  .dc-gsearch-row {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 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-gsearch-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-gsearch-name {
  display: block;
  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-gsearch-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-form-result-recent > li > .dc-gsearch-meta {
  flex: none;
}
  .dc-form-ai-progress .dc-gsearch-meta {
  display: block;
}
  .dc-gsearch-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  /* The message list of /mail/ (js/mail_list.js). While a search runs the
     rows it will replace fade, after a beat, so a fast answer does not blink. */
  .dc-mail-list {
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
}
  .dc-mail-list > #mail-rows {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-mail-list[aria-busy="true"] > #mail-rows {
  opacity: 0.6;
  transition-delay: 200ms;
}
  /* The star and the trash of a row appear on hover; a narrow screen, or one
     without hover -- a phone, a tablet --, shows them all the time. */
  @media not all and (min-width: 1024px) {

  .email-row .dc-mail-row-action {
    opacity: 1;
  }
}
  @media (hover: none) {
    .email-row .dc-mail-row-action {
    opacity: 1;
  }
  }
  /* The end of the rows loaded so far: reaching it loads the next page. */
  .dc-mail-list-more {
  height: 2.5rem;
}

  /* The list and the reader of /mail/: side by side from lg up; below it
     two full-width panes, the reader sliding in over the list while a message
     is open (js/mail_panes.js). */
  .dc-mail-panes {
  display: flex;
  height: 100%;
  min-height: 0px;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-panes {
    position: relative;
    overflow: hidden;
  }
}
  .dc-mail-list-pane {
  display: flex;
  min-height: 0px;
  width: 400px;
  flex: none;
  flex-direction: column;
  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(255 255 255 / var(--tw-bg-opacity, 1));
}
  @media (prefers-reduced-motion: reduce) {

  .dc-mail-list-pane {
    transition-property: none;
  }
}
  @media not all and (min-width: 1024px) {

  .dc-mail-list-pane {
    position: absolute;
    inset: 0px;
    width: auto;
    border-right-width: 0px;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
  .dc-mail-reader-pane {
  min-width: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
}
  @media (prefers-reduced-motion: reduce) {

  .dc-mail-reader-pane {
    transition-property: none;
  }
}
  @media not all and (min-width: 1024px) {

  .dc-mail-reader-pane {
    position: absolute;
    inset: 0px;
    --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));
    --tw-bg-opacity: 1;
    background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .dc-mail-panes.is-reading > .dc-mail-list-pane {
    --tw-translate-x: -25%;
    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));
  }
}
  /* No transform once in place: a transformed pane would hold the reply
     composer (fixed, full screen below lg) inside itself. */
  @media not all and (min-width: 1024px) {

  .dc-mail-panes.is-reading > .dc-mail-reader-pane {
    transform: none;
    --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);
  }
}
  /* The bar of the open message below lg: Back, then its main actions. */
  .dc-mail-mobile-bar {
  position: sticky;
  top: 0px;
  z-index: 10;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -1rem;
  margin-bottom: 0.25rem;
  display: flex;
  height: 3.5rem;
  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(251 251 249 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
}
  @media (min-width: 1024px) {

  .dc-mail-mobile-bar {
    display: none;
  }
}
  /* The desktop buttons of the open message; the bar above holds them below lg. */
  @media not all and (min-width: 1024px) {

  .dc-mail-title-row > .dc-mail-desktop-actions {
    display: none;
  }
}
  /* The page of /mail/: its actions (New...) above the panes, which make way
     for the reader on a narrow screen while a message is open. */
  .dc-mail-page {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  /* The two keep the rule of .dc-page-actions: on the right below lg. */
  .dc-mail-page-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  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(251 251 249 / var(--tw-bg-opacity, 1));
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 14px;
  padding-bottom: 14px;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-page-actions {
    justify-content: flex-end;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dc-mail-page-actions.has-panes {
    display: none;
  }
}
  /* The same actions at the top of the list pane below lg: the height and
     place of the bar of the open message, so sliding from one to the other
     moves nothing but the panes. */
  .dc-mail-list-bar {
  display: flex;
  height: 3.5rem;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  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(251 251 249 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
}
  @media (min-width: 1024px) {

  .dc-mail-list-bar {
    display: none;
  }
}

  /* The composer (MailCompose.vue), in its dialog on /mail/ or inline under
     a message. Below lg the dialog takes the whole screen, the toolbar keeps
     one line, and the actions stay at the bottom, Send within reach. */
  .dc-compose-overlay {
  padding: 1rem;
}
  @media not all and (min-width: 1024px) {

  .dc-compose-overlay {
    padding: 0px;
  }
}
  .dc-compose-sheet {
  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-compose-sheet.is-unclipped {
  overflow: visible;
}
  .dc-compose-sheet.is-unclipped > * {
    border-radius: inherit;
  }
  @media not all and (min-width: 1024px) {

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

  .dc-compose-sheet.is-bleed {
    margin-left: -1rem;
    margin-right: -1rem;
    overflow: visible;
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
  }
}
  .dc-compose-sheet {
  display: flex;
  max-height: 90vh;
  width: 100%;
  max-width: 48rem;
  flex-direction: column;
  --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-compose-sheet {
    height: 100dvh;
    max-height: none;
    max-width: none;
    border-radius: 0px;
    border-width: 0px;
  }
}
  /* In the full-screen dialog the editor takes the height left, which keeps
     the actions at the bottom of the screen however short the message. */
  @media not all and (min-width: 1024px) {

  .dc-compose-sheet > #mail-compose-modal-app {
    display: flex;
    flex-direction: column;
  }

  .dc-compose-sheet .dc-compose-editor {
    min-height: 12rem;
    flex: 1 1 0%;
  }
}
  .dc-compose-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  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.375rem;
  padding-bottom: 0.375rem;
}
  @media not all and (min-width: 1024px) {

  .dc-compose-toolbar {
    display: none;
  }
}
  /* The bar of the composer below lg: Cancel, the title, Send, "…". Its own
     dialog header gives way to it. */
  .dc-compose-mobile-bar {
  position: sticky;
  top: 0px;
  z-index: 20;
  display: flex;
  height: 3.5rem;
  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.5rem;
  padding-right: 0.5rem;
}
  @media (min-width: 1024px) {

  .dc-compose-mobile-bar {
    display: none;
  }
}
  .dc-compose-mobile-title {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  @media not all and (min-width: 1024px) {

  .dc-compose-sheet > .dc-modal-head {
    display: none;
  }
}
  /* A field of the composer: its label, its input, its buttons. */
  .dc-compose-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  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.5rem;
  padding-bottom: 0.5rem;
}
  .dc-compose-label {
  width: 2.5rem;
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-compose-row-btn {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-compose-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));
}
  .dc-compose-row-link {
  flex: none;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-compose-row-link:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* Cc, folded below lg until asked for, as on a phone. */
  @media not all and (min-width: 1024px) {

  .dc-compose-row-folded {
    display: none;
  }
}
  /* The reply under a message: a screen of its own below lg, like a new one. */
  @media not all and (min-width: 1024px) {

  .dc-reply-composer {
    position: fixed;
    inset: 0px;
    z-index: 50;
    gap: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
}
  .dc-reply-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
  @media not all and (min-width: 1024px) {

  .dc-reply-composer-head {
    display: none;
  }

  .dc-reply-compose-mount {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 0px;
    border-width: 0px;
  }

  .dc-reply-compose-mount .dc-compose-editor {
    min-height: 12rem;
    flex: 1 1 0%;
  }
}
  /* An attachment of the composer: attached, or sent as a share link; a
     heavy one (4 MB and more) in the amber of the notices, offered the link. */
  .dc-compose-attachment {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  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.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-compose-attachment.is-heavy {
  --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));
}
  .dc-compose-attachment.is-link {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-soft) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  .dc-compose-attachment-name {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .dc-compose-attachment-mode {
  display: inline-flex;
  height: 1.5rem;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  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.5rem;
  padding-right: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
  --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-compose-attachment-mode:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-compose-attachment.is-link .dc-compose-attachment-mode {
  --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-compose-attachment.is-heavy .dc-compose-attachment-mode {
  --tw-border-opacity: 1;
  border-color: rgb(217 193 138 / var(--tw-border-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
  .dc-compose-attachment-hint {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
  .dc-compose-link-days {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* A file of "Shared by email" (mail_links.html): its name, the time its
     link has left, its actions. Below lg the actions go under the name. */
  .dc-mail-link-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  .dc-mail-link-row:last-child {
  border-bottom-width: 0px;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-link-row {
    flex-wrap: wrap;
  }
}
  .dc-mail-link-row.is-expired {
  opacity: 0.6;
}
  .dc-mail-link-left {
  flex: none;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  .dc-mail-link-row.is-expired .dc-mail-link-left {
  --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-mail-link-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-link-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
  .dc-mail-link-delete {
  height: 2rem;
  border-radius: 0.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / 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-mail-link-delete:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
}
  /* The picker of recipients of the composer. */
  .dc-recipient-picker-list {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-top: 0.75rem;
  max-height: min(55vh, 26rem);
  overflow-y: auto;
}
  .dc-recipient-picker-section {
  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));
}
  .dc-form-results-table th.is-deleted .dc-recipient-picker-section {
  font-style: italic;
}
  .dc-recipient-picker-section {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
}
  .dc-recipient-picker-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  .dc-recipient-picker-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-compose-section {
  border-top-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.75rem;
  padding-bottom: 0.75rem;
}
  @media not all and (min-width: 1024px) {

  .dc-compose-section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
  /* The actions under the composer, from lg up; below it they are in its bar. */
  .dc-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top-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.75rem;
  padding-bottom: 0.75rem;
}
  @media not all and (min-width: 1024px) {

  .dc-compose-actions {
    display: none;
  }
}

  /* The open message (MailReader.vue), a container: its header lays out
     after its own width, which the folders and the list decide, rather than
     the window's. */
  .dc-mail-reader {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 18px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 26px;
  padding-bottom: 26px;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-reader {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
  .dc-mail-reader {
    container-type: inline-size;
  }
  .dc-mail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
  .dc-mail-subject {
  min-width: 0px;
  flex: 1 1 0%;
  overflow-wrap: break-word;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-mail-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  /* A reader under 880px -- a window under 1600px, with the folders and the
     list beside it: the actions above the subject, the date under the names. */
  @container (max-width: 879px) {
    .dc-mail-title-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.75rem;
  }
    .dc-mail-actions {
    justify-content: flex-end;
  }
    .dc-mail-head {
    flex-wrap: wrap;
  }
    .dc-mail-date {
    width: 100%;
    padding-left: 2.75rem;
  }
  }

  /* The header of the open message (MailReader.vue): the sender, name and
     address with a copy button, the To / Cc / Bcc lines, the date. Below lg
     the date drops under the names. */
  .dc-mail-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-head {
    flex-wrap: wrap;
  }
}
  .dc-mail-head-main {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-mail-sender {
  display: flex;
  min-width: 0px;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.125rem;
}
  .dc-mail-sender-name {
  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-mail-address {
  word-break: break-all;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-mail-address-group {
  display: inline-flex;
  min-width: 0px;
  align-items: center;
  gap: 0.25rem;
}
  .dc-mail-copy {
  border-radius: 0.25rem;
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-mail-copy: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-mail-copy {
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
}
  .dc-mail-recipients {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-mail-recipient-line {
  display: flex;
  min-width: 0px;
  align-items: baseline;
  gap: 0.5rem;
}
  .dc-mail-recipient-label {
  width: 1.75rem;
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-mail-recipient-people {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.125rem;
}
  .dc-mail-person {
  display: inline-flex;
  min-width: 0px;
  align-items: baseline;
  gap: 0.25rem;
}
  .dc-mail-person:not(:last-of-type)::after {
    content: ',';
    margin-left: -0.25rem;
    --tw-text-opacity: 1;
    color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  }
  .dc-mail-more {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-mail-more:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  /* The trusted senders of the preferences page. */
  .dc-pref-trusted {
  display: flex;
  flex-direction: column;
}
  .dc-pref-trusted > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-divide-opacity, 1));
}
  .dc-pref-trusted {
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
  .dc-pref-trusted > li {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  .dc-pref-trusted-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  /* The remote images of the open message, left out until allowed. */
  .dc-mail-remote {
  border-radius: 14px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  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));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  .dc-mail-remote-text {
  min-width: 12rem;
  flex: 1 1 0%;
}
  .dc-mail-remote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  .dc-mail-remote-note {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-mail-remote-undo {
  margin-left: 0.25rem;
  text-decoration-line: underline;
}
  .dc-mail-remote-undo:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* The meeting a message invites to, above its body (MailReader.vue). */
  .dc-mail-invite {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
  .dc-mail-invite-icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  --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-ink) / var(--tw-text-opacity, 1));
}
  .dc-mail-invite-main {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.125rem;
}
  .dc-mail-invite-title {
  font-size: 14px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-mail-invite-line {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-mail-invite-cancelled {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-mail-invite-status {
  margin-top: 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-mail-invite-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  /* The name of an attachment the preview can show, opening it. */
  .dc-mail-attachment-open {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-mail-attachment-open:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  /* An attachment opened in place, over the page (MailReader.vue). */
  .dc-preview {
  padding: 1rem;
}
  @media not all and (min-width: 1024px) {

  .dc-preview {
    padding: 0px;
  }
}
  .dc-preview-sheet {
  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;
  height: min(92vh, 900px);
  width: 100%;
  max-width: 1100px;
  flex-direction: column;
  overflow: hidden;
  --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-preview-sheet {
    height: 100%;
    max-width: none;
    border-radius: 0px;
  }
}
  .dc-preview-head {
  display: flex;
  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));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  .dc-preview-title {
  min-width: 0px;
  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-preview-body {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  overflow: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-preview-image {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
  .dc-preview-frame {
  height: 100%;
  width: 100%;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  .dc-preview-text {
  margin: 0px;
  width: 100%;
  align-self: stretch;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-mail-date {
  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-form-result-recent > li > .dc-mail-date {
  flex: none;
}
  .dc-form-ai-progress .dc-mail-date {
  display: block;
}
  .dc-mail-date {
  flex: none;
  padding-top: 0.125rem;
}
  @media not all and (min-width: 1024px) {

  .dc-mail-date {
    width: 100%;
    padding-left: 2.75rem;
  }
}

  /* 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-assignee {
  max-width: 180px;
}
  @media not all and (min-width: 1024px) {

  .dc-task-composer-assignee {
    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 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
  @media not all and (min-width: 1024px) {

  .dc-contacts-toolbar {
    justify-content: flex-end;
  }

  .dc-contacts-toolbar > .is-back {
    margin-right: auto;
  }
}
  .dc-contacts-toolbar {
  margin-bottom: 0.875rem;
}
  /* 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-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;
}
  /* The owner's free text under the title of a public page (a booking page,
     a date poll), line breaks kept as typed. */
  .dc-public-description {
  white-space: pre-line;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}

  /* --- 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);
}
  /* Centred on the content column rather than on the window, for a dialog
     aimed at something inside it -- the composer of the assistant page, which
     the template picker and the file picker both fill.

     Padding and not `left`, so the backdrop still covers the whole window: the
     sidebar has to dim with everything else and go on swallowing clicks, or a
     dialog declaring `aria-modal` would sit beside a column that still
     answered the pointer. 336px is the rail (76px, file/_rail.html) plus the
     contextual column (`.dc-sidebar`, 244px) plus the 1rem the overlay already
     keeps on its right, which is what puts the centre of the free space on the
     centre of the column. Below `lg` both are off-canvas and the content
     already has the width, so the offset lifts with them. */
  @media (min-width: 1024px) {

  .dc-overlay.is-beside-sidebar {
    padding-left: 336px;
  }
}
  /* 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);
}
  /* A one-liner such as the iframe to paste: wrapped rather than scrolled,
     so the whole snippet stays in view. */
  .dc-form-embed-pre.is-wrapped {
  white-space: pre-wrap;
  word-break: break-all;
}
  /* A code block's <code> is the block's text, not an inline chip: no chip
     background or padding repeated on every wrapped line. */
  .dc-form-embed-pre code {
  display: block;
  border-radius: 0px;
  background-color: transparent;
  padding: 0px;
}
  /* A field of an embed event and its possible values: the name in plain
     mono, each value an outlined pill in one of five bright tones. */
  .dc-code-name {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-embed-note {
  margin-left: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-code-pills {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
  .dc-code-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1.5px;
  background-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  line-height: 1.25rem;
}
  .dc-code-pill.is-tone-0 { color: #4D7C0F; border-color: #84CC16; background: #F7FEE7; }
  .dc-code-pill.is-tone-1 { color: #BE185D; border-color: #F472B6; background: #FDF2F8; }
  .dc-code-pill.is-tone-2 { color: #0E7490; border-color: #22D3EE; background: #ECFEFF; }
  .dc-code-pill.is-tone-3 { color: #C2410C; border-color: #FB923C; background: #FFF7ED; }
  .dc-code-pill.is-tone-4 { color: #6D28D9; border-color: #A78BFA; background: #F5F3FF; }
  /* Syntax colours of code samples (js/code_highlight.js): highlight.js's own
     "Atom One Dark" theme (styles/atom-one-dark.css, BSD-3-Clause), its rules
     scoped to .dc-code-hl so they reach nothing else. The block itself takes
     the theme's background (.dc-form-embed-pre). */
  .dc-code-hl { color: #abb2bf; }
  .dc-code-hl .hljs-comment,
  .dc-code-hl .hljs-quote { color: #5c6370; font-style: italic; }
  .dc-code-hl .hljs-doctag,
  .dc-code-hl .hljs-keyword,
  .dc-code-hl .hljs-formula { color: #c678dd; }
  .dc-code-hl .hljs-section,
  .dc-code-hl .hljs-name,
  .dc-code-hl .hljs-selector-tag,
  .dc-code-hl .hljs-deletion,
  .dc-code-hl .hljs-subst { color: #e06c75; }
  .dc-code-hl .hljs-literal { color: #56b6c2; }
  .dc-code-hl .hljs-string,
  .dc-code-hl .hljs-regexp,
  .dc-code-hl .hljs-addition,
  .dc-code-hl .hljs-attribute,
  .dc-code-hl .hljs-meta .hljs-string { color: #98c379; }
  .dc-code-hl .hljs-attr,
  .dc-code-hl .hljs-variable,
  .dc-code-hl .hljs-template-variable,
  .dc-code-hl .hljs-type,
  .dc-code-hl .hljs-selector-class,
  .dc-code-hl .hljs-selector-attr,
  .dc-code-hl .hljs-selector-pseudo,
  .dc-code-hl .hljs-number { color: #d19a66; }
  .dc-code-hl .hljs-symbol,
  .dc-code-hl .hljs-bullet,
  .dc-code-hl .hljs-link,
  .dc-code-hl .hljs-meta,
  .dc-code-hl .hljs-selector-id,
  .dc-code-hl .hljs-title { color: #61aeee; }
  .dc-code-hl .hljs-built_in,
  .dc-code-hl .hljs-title.class_,
  .dc-code-hl .hljs-class .hljs-title { color: #e6c07b; }
  .dc-code-hl .hljs-emphasis { font-style: italic; }
  .dc-code-hl .hljs-strong { font-weight: bold; }
  .dc-code-hl .hljs-link { text-decoration: underline; }
  /* A dialog's title row and its close button (ModalShell.vue, ModalClose.vue);
     without a title, the button alone in the top-right corner. */
  .dc-modal-shell-head {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
  .dc-modal-shell-head.is-untitled {
  margin-right: -0.5rem;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
  justify-content: flex-end;
}
  .dc-modal-close {
  margin-right: -0.5rem;
  margin-top: -0.25rem;
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  --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-modal-close: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-modal-close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--theme-accent) / 0.4);
}
  /* A key of the keyboard, named in the interface ("Esc"). */
  .dc-kbd {
  border-radius: 0.25rem;
  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.25rem;
  padding-right: 0.25rem;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* In a full-bleed head row (.dc-modal-head, centred), the button needs no
     lift; in the confirm and prompt box, the column's gap already spaces it. */
  .dc-modal-head > .dc-modal-close {
  margin-top: 0px;
}
  .dc-dialog > .dc-modal-shell-head {
  margin-bottom: 0px;
}
  /* Over a dark backdrop (the gallery's image viewer): pinned to the corner of
     the screen, light on dark. */
  .dc-modal-close.is-on-dark {
  position: absolute;
  right: 1rem;
  top: 1rem;
  margin: 0px;
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .dc-modal-close.is-on-dark:hover {
  background-color: rgb(255 255 255 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .dc-modal-close.is-on-dark > .dc-kbd {
  border-color: rgb(255 255 255 / 0.3);
  background-color: transparent;
  color: rgb(255 255 255 / 0.8);
}
  /* A long dialog (help, code samples): capped at 90% of the viewport and
     800px, scrolling inside itself instead of running off the screen. Opt-in
     through ModalShell's `width` prop, since a short dialog holding a menu
     must not clip it. */
  .dc-modal-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
    max-height: min(90vh, 800px);
}
  /* 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;
}
  /* The app's confirm and prompt box (js/dialogs.js), in place of the
     browser's. Drawn above every other dialog: it is often opened from one. */
  .dc-dialog-overlay {
  z-index: 70;
  padding: 1rem;
}
  .dc-dialog {
  display: flex;
  max-width: 24rem;
  flex-direction: column;
  gap: 0.75rem;
}
  .dc-dialog-message {
  white-space: pre-line;
  font-size: 13.5px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-dialog-field {
  display: block;
}
  .dc-dialog-check {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 13.5px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-dialog-check > input {
  margin-top: 3px;
  height: 1rem;
  width: 1rem;
  flex: none;
  cursor: pointer;
  accent-color: rgb(var(--theme-accent) / 1);
}
  .dc-dialog-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

  /* --- 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));
}
  /* The yes of a question whose answer destroys something (js/dialogs.js):
     the colour of .dc-btn-danger, filled, since there it is the action the
     box is about. */
  .dc-btn-danger-strong {
  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-strong:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
  .dc-btn-danger-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(138 74 51 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .dc-btn-danger-strong:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(116 63 43 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  /* A button taking the full width of its box, label centred: the one
     action closing a form on a narrow public page. */
  .dc-btn-block {
  width: 100%;
  justify-content: center;
}
  .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));
}

  /* --- Forms: the fill page (form_fill.html, _form_field.html) -----------
     A block is a group of rows, ruled off from the block before it. A row is
     a grid; its column count only applies from lg up, below which every
     question of the row stacks in one column. */
  .dc-form-sheet {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 48rem;
}
  .dc-form-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  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: 1.25rem;
}
  @media (min-width: 640px) {

  .dc-form-body {
    padding: 1.75rem;
  }
}
  .dc-form-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
  .dc-form-block + .dc-form-block {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
}
  .dc-form-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
  .dc-form-col {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 1.5rem;
}
  @media (min-width: 1024px) {
    .dc-form-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-form-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dc-form-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* One question: a fieldset loses its browser frame and padding. */
  .dc-form-field {
  margin: 0px;
  min-width: 0px;
  border-width: 0px;
  padding: 0px;
}
  .dc-form-field > legend {
  padding: 0px;
}
  /* A section title between questions, ruled off from what precedes it. */
  .dc-form-heading {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-bottom: 0.5rem;
}
  .dc-form-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
  .dc-form-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 0.5rem;
}
  /* A point of the scale: its number under its radio. */
  .dc-form-scale-point {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 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-form-scale-end {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-required {
  margin-left: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(196 53 43 / var(--tw-text-opacity, 1));
}
  /* A file question: the framed input, its "Choose" button drawn like a
     ghost button, the rules under it, and the notice after a refused post. */
  /* `h-auto`: the fixed height of .dc-input would clip the button, whose own
     padding and border make it taller than the text line it sits on. Doubled
     class because .dc-input is declared further down and would win a tie. */
  .dc-input.dc-form-file {
  height: auto;
  min-height: 2.25rem;
  cursor: pointer;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-file::file-selector-button {
  margin-right: 0.75rem;
  cursor: pointer;
  border-radius: 0.375rem;
  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.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  vertical-align: middle;
  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));
}
  /* The files of a question taking several, each pick added to the list
     (public_form.js). */
  .dc-form-file-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-form-file-item {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  .dc-form-file-item-icon {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-file-item-name {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-file-item-size {
  flex: none;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-file-rules {
  margin-bottom: 0px;
  margin-top: 0.375rem;
}
  /* A phone question with its country picker (form_phone.js, intl-tel-input):
     the whole width of its column, the list in the look of the app's menus.
     Two classes, so these win over the library's styles loaded after. */
  .dc-phone {
  display: block;
  width: 100%;
    --iti-border-color: #E7E7E3;
    --iti-hover-color: rgb(var(--theme-accent) / 0.08);
    --iti-icon-color: currentColor;
}
  .dc-phone.iti .iti__country-selector {
  margin-top: 0.25rem;
  overflow: hidden;
  border-radius: 0.75rem;
  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 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);
}
  .dc-phone.iti .iti__search-input {
  background-color: transparent;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-phone.iti .iti__search-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-phone.iti .iti__search-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-phone.iti .iti__search-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .dc-phone.iti .iti__country {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-phone.iti .iti__dial-code {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-phone.iti .iti__selected-country-primary {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
  .dc-form-file-dropped {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  /* The one-answer notice and the send button, stacked on a phone. */
  .dc-form-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-top: 1.25rem;
}
  @media (min-width: 640px) {

  .dc-form-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
  /* Full width on a phone, where its label would otherwise sit on the left. */
  .dc-form-actions > .dc-btn-primary {
  justify-content: center;
}
  /* Who is answering, in the page header: left out on a phone, where it
     would run into the brand (a public page says it above the sheet). */
  .dc-form-head-email {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  @media not all and (min-width: 640px) {

  .dc-form-head-email {
    display: none;
  }
}
  /* Public page: the respondent's address above the questions. */
  .dc-form-email {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-bottom: 1.5rem;
}
  /* "Answering as ..." and the way to another address, above the sheet. */
  .dc-form-identity {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 0.25rem;
}
  .dc-form-change {
  margin-top: 0.25rem;
}
  /* A booking question: one week of its page's free slots at a time
     (_form_field.html, js/form_week.js). The week's label between its
     Previous/Next, the choice recalled above, then a column per day with a
     free slot -- as many as fit, down to one on a phone -- each day's times
     as radio chips drawn like the public booking page's .dc-slot. Plain
     radios and submit buttons, so it works without JavaScript. */
  .dc-form-week {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  padding: 0.75rem;
}
  .dc-form-week-choice {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
  .dc-form-week-label {
  min-width: 0px;
  flex: 1 1 0%;
  text-align: center;
  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-form-week-grid {
  display: grid;
  gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
  .dc-form-week-grid.is-loading {
  opacity: 0.5;
}
  .dc-form-week-day {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.375rem;
}
  .dc-form-week-empty {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
  .dc-form-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-form-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-form-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));
}
  .dc-form-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
  /* The radio itself stays reachable from the keyboard, but unseen. */
  .dc-form-slot > input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
  .dc-form-slot:has(> input:checked) {
  --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-form-slot:has(> input: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);
  --tw-ring-color: rgb(var(--theme-accent) / 0.4);
}
  /* No slot to offer: the empty state, kept compact inside the question. */
  .dc-form-booking-empty {
  border-radius: 10px;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
  /* The one-answer notice and the anti-robot check, left of the send button. */
  .dc-form-actions-notes {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.25rem;
}
  /* A form link embedded in another site (`?embed=1`, form_fill.html): only
     the form, on a plain surface, the sheet itself as the card. Nothing
     stretches to the frame's height: the page reports its own height
     (.dc-form-embed, js/form_embed.js) and the parent sizes the frame to it. */
  .dc-form-embed-body {
  --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));
}
  .dc-form-embed-main {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  @media (min-width: 640px) {

  .dc-form-embed-main {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
  .dc-form-embed .dc-form-body {
  border-radius: 0px;
  border-width: 0px;
  padding: 0px;
}
  @media (min-width: 640px) {

  .dc-form-embed .dc-form-body {
    padding: 0px;
  }
}
  /* The anti-robot check (js/public_form.js). */
  .dc-captcha {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-captcha-status {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-captcha-status.is-done {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
}
  .dc-captcha-status.is-failed {
  --tw-text-opacity: 1;
  color: rgb(196 53 43 / var(--tw-text-opacity, 1));
}

  /* The address and code steps of a public form that proves addresses
     (form_fill.html, `gate`): a compact card centred on the page, drawn like
     the workspace guest's sign-in, in the application's palette. The code
     entry is the guest's own (_code_input.html). */
  .dc-form-gate {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 440px;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.5rem;
}
  @media (min-width: 640px) {

  .dc-form-gate {
    padding-top: 2rem;
  }
}
  .dc-form-embed .dc-form-gate {
  padding-top: 0px;
}
  .dc-form-gate-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
  .dc-form-gate-title {
  text-wrap: balance;
  overflow-wrap: break-word;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  @media (min-width: 640px) {

  .dc-form-gate-title {
    font-size: 28px;
  }
}
  .dc-form-gate-lead {
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-size: 15px;
  line-height: 1.55;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-gate-lead strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-gate-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  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: 1.25rem;
  --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);
}
  @media (min-width: 640px) {

  .dc-form-gate-card {
    padding: 1.5rem;
  }
}
  .dc-form-gate-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
  .dc-form-gate-submit {
  height: 2.75rem;
  width: 100%;
  justify-content: center;
  font-size: 15px;
}
  .dc-form-gate-note {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-gate-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
}
  .dc-form-gate-resend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
  /* "Change address", "Resend the code": quiet text buttons, the countdown
     in mono like the guest page's. */
  .dc-form-gate-link {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  text-underline-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-form-gate-link:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .dc-form-gate-link:disabled {
  cursor: default;
  text-decoration-line: none;
}
  .dc-form-gate-link:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-gate-link.is-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
}

  /* --- Forms: the editor (FormEditor.vue) ----------------------------------
     Laid out like the explorer. The palette sits in the shell's contextual
     column (.dc-sidebar, FormPalette.vue); here, from lg, the canvas and the
     side panel are two columns scrolling on their own. Below lg the editor
     is one scrolling page: toolbar, canvas, then the panel. */
  .dc-form-editor {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  overflow-y: auto;
}
  @media (min-width: 1024px) {

  .dc-form-editor {
    flex-direction: row;
    overflow: hidden;
  }
}
  .dc-form-main {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
  @media (min-width: 1024px) {

  .dc-form-main {
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 1.5rem;
  }
}
  /* Status on the left, Preview and Save on the right. */
  .dc-form-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-toolbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  /* The toolbar of a narrow screen: the ways to the palette and to the
     settings, which a wide screen shows beside the canvas. Save and Preview
     are in the page's bars (form_editor.html). */
  @media (min-width: 1024px) {

  .dc-form-toolbar-narrow {
    display: none;
  }
}
  /* "Someone else saved": the sentence, then Reload and Overwrite. */
  .dc-form-conflict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
  .dc-form-conflict-actions {
  display: flex;
  gap: 0.5rem;
}
  /* The side panel: the column of BrowseDetailsPanel.vue from lg, stacked
     under the canvas below. */
  .dc-form-panel {
  display: flex;
  flex: none;
  flex-direction: column;
  border-top-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: 1024px) {

  .dc-form-panel {
    width: 320px;
    overflow: hidden;
    border-left-width: 1px;
    border-top-width: 0px;
  }
}
  .dc-form-panel-head {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.25rem;
  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: 18px;
  padding-bottom: 1rem;
}
  .dc-form-panel-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .dc-form-panel-body {
    min-height: 0px;
    flex: 1 1 0%;
    overflow-y: auto;
  }
}
  .dc-form-panel-hint {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
  .dc-form-settings-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
  /* The fill link and its Copy button. */
  .dc-form-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-link > .dc-input {
  min-width: 0px;
  flex: 1 1 0%;
}
  /* Public links of the form's file: one line each, label and meta then Copy. */
  .dc-form-public {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
}
  .dc-form-public-list {
  display: flex;
  flex-direction: column;
}
  .dc-form-public-list > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-divide-opacity, 1));
}
  .dc-form-public-list {
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
  .dc-form-public-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  .dc-form-public-text {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  .dc-form-public-name {
  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-form-public-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
  .dc-form-public-manage {
  font-size: 12.5px;
  line-height: 1.4;
}
  /* The "Embed" dialog of a public link (FormEmbedDialog.vue): the iframe
     code, and the help unfolded under it, each code block with its Copy. */
  .dc-form-embed-dialog {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
  .dc-form-embed-block {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.375rem;
}
  .dc-form-embed-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
  /* Ligatures off: code to copy shows `=>` and `!==` as typed. */
  .dc-form-embed-help-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  .dc-form-embed-help {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-embed-help-title {
  margin-top: 0.5rem;
  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));
}
  .dc-form-embed-pre {
  max-height: 16rem;
  overflow: auto;
  border-radius: 10px;
  padding: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.625;
    background: #282c34;
    color: #abb2bf;
    font-variant-ligatures: none;
}
  .dc-form-embed-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
  .dc-form-embed-table {
  width: 100%;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
}
  .dc-form-embed-table th {
  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(237 237 233 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-embed-table td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  vertical-align: top;
}
  .dc-form-embed-table tr:last-child td {
  border-bottom-width: 0px;
}
  /* On a phone each event reads as a short stack: name, when, fields. */
  @media (max-width: 639px) {
    .dc-form-embed-table thead {
    display: none;
  }
    .dc-form-embed-table tr {
    display: block;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
    .dc-form-embed-table tr:last-child {
    border-bottom-width: 0px;
  }
    .dc-form-embed-table td {
    display: block;
    border-bottom-width: 0px;
    padding: 0px;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
  }
  .dc-form-responses {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
  .dc-form-responses-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));
}
  .dc-form-responses-open {
  margin-top: 0.25rem;
  align-self: flex-start;
}
  /* The linked Excel workbook (FormSheetLink.vue): the file, how far behind
     it is, and its actions; in the editor's panel and on the Responses page.
     `-link`, not to be confused with .dc-form-sheet, the fill page's column. */
  .dc-form-sheet-link {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-top: 0.75rem;
}
  .dc-form-sheet-link-file {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-sheet-link-icon {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-form-sheet-link-name {
  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(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-form-sheet-link-name:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  .dc-form-sheet-link-waiting {
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
  .dc-form-sheet-link-notice {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
}
  .dc-form-sheet-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  /* The folders the workbook sits in, each a link to the file browser. */
  .dc-form-sheet-link-where {
  display: flex;
  min-width: 0px;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
  row-gap: 0.125rem;
  font-size: 12.5px;
  line-height: 1.4;
}
  .dc-form-sheet-link-sep {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-form-sheet-link-crumb {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-sheet-link-crumb:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .dc-form-sheet-link-crumb.is-plain:hover {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

  /* --- Forms: the Responses page (FormResponses.vue) ----------------------
     A page of its own next to the editor: a header, a grid of question
     cards, then the answers table. The page scrolls; the table only scrolls
     sideways, inside its panel, so a form with many questions never widens
     the page on a phone. */
  .dc-form-results-host {
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
}
  .dc-form-results {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1200px;
  flex-direction: column;
  gap: 2rem;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}
  @media not all and (min-width: 1024px) {

  .dc-form-results {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
  }
}
  /* The linked Excel workbook, as a card under the header. */
  .dc-form-results-sheet {
  display: flex;
  max-width: 28rem;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
  .dc-form-results-sheet .dc-form-sheet-link {
  border-top-width: 0px;
  padding-top: 0px;
}
  .dc-form-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
  .dc-form-results-titles {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-form-results-title {
  overflow-wrap: break-word;
}
  .dc-form-results-edit {
  flex: none;
}
  .dc-form-results-section {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.75rem;
}
  .dc-form-results-heading {
  margin: 0px;
}
  /* Cards keep their own height: a short number card never stretches to
     the chart beside it. */
  .dc-form-results-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-start;
  gap: 1rem;
}
  @media (min-width: 1024px) {

  .dc-form-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  /* The heading of the table and its source filter, on one line. */
  .dc-form-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
  .dc-form-results-bar > select {
  max-width: 100%;
}
  .dc-form-results-table-wrap {
  overflow-x: auto;
}
  .dc-form-results-table-wrap[aria-busy="true"] {
  opacity: 0.6;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-form-results-table {
  min-width: 100%;
  font-size: 13px;
}
  .dc-form-results-table th {
  height: 42px;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
  vertical-align: middle;
}
  .dc-form-results-table th.is-deleted .dc-label {
  font-style: italic;
}
  .dc-form-results-table td {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  vertical-align: top;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* A question's title in its header, cut like its cells. */
  .dc-form-results-col {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .dc-form-results-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-results-sort:hover {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-results-sort:disabled {
  cursor: wait;
  opacity: 0.6;
}
  .dc-form-results-row {
  cursor: pointer;
  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-form-results-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-form-results-row.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  .dc-form-results-date {
  white-space: nowrap;
}
  /* The date opens the answer: what the keyboard reaches in a row. */
  .dc-form-results-open {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-results-open:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .dc-form-results-who {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-results-sub {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .dc-form-results-table .dc-badge {
  white-space: nowrap;
}
  .dc-form-results-cell {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* The files of a file answer in a cell: one link after the other. */
  .dc-form-results-files {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
}
  .dc-form-results-file {
  display: inline-flex;
  min-width: 0px;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .dc-form-results-file.is-gone,
  .dc-form-results-file-name.is-gone {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  text-decoration-line: line-through;
}
  .dc-form-results-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
  .dc-form-results-pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
  .dc-form-results-page {
  height: 2rem;
  min-width: 2rem;
  border-radius: 8px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  --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-form-results-page:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-form-results-page:disabled {
  opacity: 0.6;
}
  .dc-form-results-page.is-on {
  --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-form-results-page.is-on:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
}

  /* One question of the summary (FormResultCard.vue). */
  .dc-form-result {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.75rem;
  padding: 18px;
}
  .dc-form-result-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
  .dc-form-result-icon {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  --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-form-result-titles {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
}
  .dc-form-result-title {
  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-wrap: break-word;
}
  .dc-form-result-empty,
  .dc-form-result-note {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-result-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
}
  .dc-form-result-figure {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-form-result-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
  .dc-form-result-figure-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 10px;
  --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.75rem;
  padding-bottom: 0.75rem;
}
  /* The figures of a chart, as text: what a screen reader reads. */
  .dc-form-result-counts {
  width: 100%;
  font-size: 13px;
}
  .dc-form-result-counts th,
  .dc-form-result-counts td {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
  .dc-form-result-counts th {
  overflow-wrap: break-word;
  padding-right: 0.75rem;
  text-align: left;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-result-counts td {
  width: 3.5rem;
  white-space: nowrap;
  padding-left: 0.5rem;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-result-counts tr.is-other th {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-result-recent {
  display: flex;
  flex-direction: column;
}
  .dc-form-result-recent > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-divide-opacity, 1));
}
  .dc-form-result-recent > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
  .dc-form-result-recent > li > .dc-meta {
  flex: none;
}
  .dc-form-result-recent-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0px;
  white-space: pre-line;
  overflow-wrap: break-word;
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}

  /* A chart's drawing box. Its colours are these properties, which
     FormResultChart.vue reads: the theme's accent for the bars, a quiet
     grey for "Others", the ink ramp for the text and the grid. */
  .dc-form-chart {
    --chart-bar: rgb(var(--theme-accent));
    --chart-other: #B4B9B5;
    --chart-text: #6E736F;
    --chart-grid: #EFEFEB;
    position: relative;
    width: 100%;
  }

  /* The drawer holding one whole answer, over the right edge of the page. */
  .dc-form-results-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 40;
  background-color: rgb(0 0 0 / 0.3);
}
  .dc-form-results-drawer {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 50;
  display: flex;
  width: 100%;
  max-width: 440px;
  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));
  --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);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .dc-form-results-drawer-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  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: 18px;
  padding-bottom: 1rem;
}
  .dc-form-results-drawer-body {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  .dc-form-results-answer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-form-results-answer .is-deleted {
  font-style: italic;
}
  .dc-form-results-answer-value {
  white-space: pre-line;
  overflow-wrap: break-word;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  /* The files of a file answer in the drawer: name, size, download. */
  .dc-form-results-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-form-results-file-item {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  .dc-form-results-file-icon {
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-results-file-name {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .dc-form-results-answer-none {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-results-drawer-foot {
  display: flex;
  flex: none;
  justify-content: flex-end;
  border-top-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;
}

  /* --- Forms: the palette (FormPalette.vue) --------------------------------
     The sections of a contextual column (BrowseSidebar.vue): a .dc-label
     heading, then .dc-nav-item rows with an 18px glyph in a 20px box. */
  .dc-form-palette {
  display: flex;
  height: 100%;
  min-height: 0px;
  flex-direction: column;
}
  .dc-form-palette-scroll {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
}
  .dc-form-palette-group,
  .dc-form-palette-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
  .dc-form-palette-item {
  width: 100%;
  cursor: grab;
}
  .dc-form-palette-icon {
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
}
  /* The palette's welcome while the form is empty (FormPalette.vue): a bright
     card that points down at the types, so a newcomer sees at once that the
     column below is what to drag onto the form. Its gradient runs through the
     theme's own greens (accent to rail), so a tenant's colours carry over. */
  .dc-form-palette-start {
  position: relative;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  margin-bottom: 1rem;
  flex: none;
  overflow: hidden;
  border-radius: 0.75rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-bottom: 1.75rem;
  padding-top: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background: linear-gradient(135deg, rgb(var(--theme-accent)) 0%, rgb(var(--theme-rail-hover)) 55%, rgb(var(--theme-rail)) 100%);
}
  .dc-form-palette-start-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
  .dc-form-palette-start-text {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.9);
}
  .dc-form-palette-start-arrow {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  --tw-translate-x: -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));
  color: rgb(255 255 255 / 0.9);
    animation: dc-form-palette-nudge 1.6s ease-in-out infinite;
}
  @keyframes dc-form-palette-nudge {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 3px); }
  }
  /* A type dragged from the palette (body.dc-form-dragging, FormPalette.vue):
     the drop zones say so, quietly -- a soft blue dash and the faintest wash. */
  .dc-form-dragging .dc-form-drop:empty {
    border-color: rgb(var(--theme-accent) / 0.55);
    background: rgb(var(--theme-accent-wash));
  }
  .dc-form-dragging .dc-form-drop-new:empty::before {
    color: rgb(var(--theme-accent-ink));
  }
  /* The Question section's outline (FormEditor.flashOutline): lit for a few
     seconds after each selection, then faded out; drawn over the section, so
     nothing around it moves. It says where the selected question is set up. */
  .dc-section.dc-form-inspector-hint {
  position: relative;
}
  .dc-section.dc-form-inspector-hint::after {
  pointer-events: none;
  position: absolute;
  inset: 0px;
    content: '';
    border: 2px solid transparent;
    -o-border-image: linear-gradient(135deg, rgb(var(--theme-accent)) 0%, rgb(var(--theme-rail-hover)) 55%, rgb(var(--theme-rail)) 100%) 1;
       border-image: linear-gradient(135deg, rgb(var(--theme-accent)) 0%, rgb(var(--theme-rail-hover)) 55%, rgb(var(--theme-rail)) 100%) 1;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}
  .dc-section.dc-form-inspector-hint.is-lit::after {
    opacity: 1;
    transition-duration: 0.15s;
  }
  /* The first-save bubble (FormLinkTip.vue): it floats beside the side
     panel, its tail pointing at the Public links block (--tip-tail from the
     bubble's top, or from its left edge when it sits above or below). */
  .dc-form-link-tip {
  position: fixed;
  z-index: 40;
  display: flex;
  width: 300px;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(var(--theme-accent) / 0.4);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  @media not all and (min-width: 1024px) {

  .dc-form-link-tip {
    width: auto;
  }
}
  .dc-form-link-tip {
    animation: dc-form-link-tip-in 0.2s ease-out;
  }
  .dc-form-link-tip::before {
  position: absolute;
  height: 0.75rem;
  width: 0.75rem;
  --tw-rotate: 45deg;
  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));
  border-color: rgb(var(--theme-accent) / 0.4);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    content: '';
}
  .dc-form-link-tip.is-left::before {
  right: -7px;
  border-right-width: 1px;
  border-top-width: 1px;
    top: var(--tip-tail, 16px);
}
  .dc-form-link-tip.is-above::before {
  bottom: -7px;
  border-bottom-width: 1px;
  border-right-width: 1px;
    left: var(--tip-tail, 32px);
}
  .dc-form-link-tip.is-below::before {
  top: -7px;
  border-left-width: 1px;
  border-top-width: 1px;
    left: var(--tip-tail, 32px);
}
  .dc-form-link-tip-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-link-tip-icon {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent) / var(--tw-text-opacity, 1));
}
  .dc-form-link-tip-title {
  flex: 1 1 0%;
  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));
}
  .dc-form-link-tip-text {
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-link-tip-action {
  margin-top: 0.25rem;
  align-self: flex-start;
}
  @keyframes dc-form-link-tip-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dc-form-link-tip { animation: none; }
  }
  /* The drag demo: a pointer takes the "Short answer" chip at the top and
     drops it in the dashed zone below, which lights up. One 4.5 s loop. The
     zone spans the card's width, so the chip always fits in it. */
  .dc-form-palette-demo {
  position: relative;
  margin-top: 0.75rem;
  height: 5.25rem;
  width: 100%;
}
  .dc-form-palette-demo-zone {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 2.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.6);
    animation: dc-form-demo-zone 4.5s ease-in-out infinite;
}
  .dc-form-palette-demo-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 10.5px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    left: 0; top: 0;
    animation: dc-form-demo-chip 4.5s ease-in-out infinite;
}
  .dc-form-palette-demo-cursor {
  position: absolute;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    left: 48px; top: 30px;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));
    animation: dc-form-demo-cursor 4.5s ease-in-out infinite;
}
  @keyframes dc-form-demo-cursor {
    0% { left: 70px; top: 34px; opacity: 0; }
    10% { opacity: 1; }
    22% { left: 44px; top: 10px; transform: scale(1); }
    28% { left: 44px; top: 10px; transform: scale(0.85); }
    62% { left: 60px; top: 58px; transform: scale(0.85); }
    70% { left: 60px; top: 58px; transform: scale(1); }
    88% { left: 84px; top: 70px; opacity: 1; }
    100% { left: 84px; top: 70px; opacity: 0; }
  }
  @keyframes dc-form-demo-chip {
    0%, 26% { left: 0; top: 0; opacity: 1; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
    32% { left: 2px; top: -3px; box-shadow: 0 6px 14px rgb(0 0 0 / 0.25); }
    62% { left: 18px; top: 46px; box-shadow: 0 6px 14px rgb(0 0 0 / 0.25); }
    70%, 86% { left: 18px; top: 50px; opacity: 1; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
    96% { left: 18px; top: 50px; opacity: 0; }
    100% { left: 0; top: 0; opacity: 0; }
  }
  @keyframes dc-form-demo-zone {
    0%, 52% { background: transparent; border-style: dashed; }
    62%, 86% { background: rgb(255 255 255 / 0.18); border-style: solid; }
    100% { background: transparent; border-style: dashed; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dc-form-palette-start-arrow { animation: none; }
    /* A still of the end: the chip already dropped in the lit zone. */
    .dc-form-palette-demo-zone { animation: none; background: rgb(255 255 255 / 0.18); border-style: solid; }
    .dc-form-palette-demo-chip { animation: none; left: 18px; top: 50px; }
    .dc-form-palette-demo-cursor { animation: none; left: 60px; top: 58px; }
  }
  .dc-form-palette-hint {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* An embedded editor has no contextual column: the palette is a column of
     the editor, and below lg a block over the canvas that "Add a question"
     shows and hides. */
  @media (min-width: 1024px) {

  .dc-form-palette-inline {
    overflow: hidden;
  }
}
  @media not all and (min-width: 1024px) {

  .dc-form-palette-inline.is-open {
    display: flex;
    max-height: 50vh;
    width: 100%;
    border-right-width: 0px;
    border-bottom-width: 1px;
  }
}

  /* --- Forms: the canvas and the inspector (FormCanvas.vue,
     FormFieldInspector.vue). Columns stack below lg, as on the fill page. */
  .dc-form-canvas {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.75rem;
}
  /* No gap of their own: the "Add a block" and "Add a row" dividers space
     the blocks and the rows of a block. */
  .dc-form-blocks,
  .dc-form-rows {
  display: flex;
  flex-direction: column;
}
  /* "——— + Add a block ———" between two blocks, before the first and after
     the last, and "——— + Add a row ———" after each row of a block: a
     hairline with a small button in its middle, faint until the pointer or
     the focus comes to it. Also a drop target (FormCanvas), which lights up
     while a question or a palette entry hovers it. */
  .dc-form-insert {
  position: relative;
  display: flex;
  min-height: 1.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
  .dc-form-insert::before {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
    opacity: 0.6;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .dc-form-insert:hover::before,
  .dc-form-insert:focus-within::before {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  opacity: 1;
}
  .dc-form-insert:has(.dc-form-ghost) {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
}
  .dc-form-insert:has(.dc-form-ghost)::before {
  display: none;
}
  /* The dragged card or row while over the divider: shown whole, full width. */
  .dc-form-insert > .dc-form-edit-field,
  .dc-form-insert > .dc-form-edit-row {
  width: 100%;
}
  .dc-form-insert-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  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(180 185 181 / var(--tw-text-opacity, 1));
  opacity: 0.6;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-form-insert-btn:hover {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  opacity: 1;
}
  .dc-form-insert-btn:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  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-color: rgb(var(--theme-accent) / 0.4);
}
  .dc-form-insert-btn[aria-expanded="true"] {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
  opacity: 1;
}
  /* The row dividers sit inside a block's card: slimmer. */
  .dc-form-insert-row {
  min-height: 1.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
  /* A block: the card grouping its rows, a bar with its grip on top. */
  .dc-form-edit-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  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: 0.5rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .dc-form-edit-block: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);
  --tw-ring-color: rgb(var(--theme-accent) / 0.4);
}
  @media (min-width: 640px) {

  .dc-form-edit-block {
    padding: 0.75rem;
  }
}
  /* Grip and name, then up, down and remove at the far end. */
  .dc-form-block-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-bottom: 0.5rem;
}
  .dc-form-block-handle {
  display: flex;
  cursor: grab;
  border-radius: 0.25rem;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-block-handle: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-form-block-name {
  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));
}
  .dc-form-results-table th.is-deleted .dc-form-block-name {
  font-style: italic;
}
  /* A row inside its block: a lighter frame than the block's. */
  .dc-form-edit-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding: 0.5rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .dc-form-edit-row: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);
  --tw-ring-color: rgb(var(--theme-accent) / 0.4);
}
  /* Grip, column stepper, then up, down and remove at the far end. */
  .dc-form-row-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-row-bar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
  .dc-form-row-handle {
  display: flex;
  cursor: grab;
  border-radius: 0.25rem;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-row-handle: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-form-col-stepper {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding: 0.125rem;
}
  .dc-form-col-stepper-icon {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-col-count {
  height: 1.5rem;
  min-width: 1.5rem;
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-col-count:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-form-col-count.is-on {
  --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-form-col-count.is-on:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-primary) / var(--tw-bg-opacity, 1));
}
  .dc-form-edit-cols {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.5rem;
}
  @media (min-width: 1024px) {
    .dc-form-edit-cols.dc-form-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-form-edit-cols.dc-form-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dc-form-edit-cols.dc-form-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* A column: a dashed drop list. Vue's fragment anchors are empty text
     nodes, which :empty ignores, so an empty column shows its hint. */
  .dc-form-drop {
  display: flex;
  min-height: 3.5rem;
  min-width: 0px;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  padding: 0.5rem;
}
  .dc-form-drop:empty::before {
    content: attr(data-empty-label);
    margin: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  }
  .dc-form-drop-new {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  /* Under the empty canvas: "—— or ——", then the way to ask the assistant
     for a draft (FormAiComposer.vue). */
  .dc-form-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
  .dc-form-ai-or {
  display: flex;
  width: 100%;
  max-width: 28rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-ai-or::before {
  height: 1px;
  flex: 1 1 0%;
  --tw-bg-opacity: 1;
  background-color: rgb(231 231 227 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}
  .dc-form-ai-or::after {
  height: 1px;
  flex: 1 1 0%;
  --tw-bg-opacity: 1;
  background-color: rgb(231 231 227 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}
  .dc-form-ai-start {
  gap: 0.5rem;
}
  .dc-form-ai-composer {
  display: flex;
  width: 100%;
  max-width: 42rem;
  flex-direction: column;
  gap: 0.5rem;
  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: 1rem;
}
  /* The mic button sits in the textarea's bottom right corner. */
  .dc-form-ai-field {
  position: relative;
}
  .dc-form-ai-input {
  min-height: 6rem;
  resize: vertical;
  padding-right: 2.75rem;
}
  .dc-form-ai-mic {
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
}
  .dc-form-ai-mic.is-on {
  --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-form-ai-mic.is-on:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 217 208 / var(--tw-bg-opacity, 1));
}
  .dc-form-ai-listening {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-ai-dot {
  height: 0.5rem;
  width: 0.5rem;
  flex: none;
}
  @keyframes pulse {

  50% {
    opacity: .5;
  }
}
  .dc-form-ai-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(200 85 61 / var(--tw-bg-opacity, 1));
}
  .dc-form-ai-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-ai-actions-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-ai-actions-end .dc-btn-primary {
  gap: 0.375rem;
}
  .dc-form-ai-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-ai-progress .dc-meta {
  display: block;
}
  .dc-form-ai-pulse {
  margin-top: 0.125rem;
  flex: none;
}
  @keyframes pulse {

  50% {
    opacity: .5;
  }
}
  .dc-form-ai-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent) / var(--tw-text-opacity, 1));
}
  .dc-form-ai-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
  /* One question on the canvas: its title above, then a preview of what the
     person filling in will see (.dc-form-mock). The whole card is the handle. */
  .dc-form-edit-field {
  display: flex;
  min-width: 0px;
  cursor: grab;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  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.625rem;
  --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-form-edit-field:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-form-edit-field:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-form-edit-field.is-selected {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-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-color: rgb(var(--theme-accent) / 0.3);
}
  .dc-form-edit-field.is-invalid {
  --tw-border-opacity: 1;
  border-color: rgb(196 53 43 / var(--tw-border-opacity, 1));
}
  .dc-form-edit-field.is-heading {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  /* Centred, so the card's buttons and its type line up on one axis. */
  .dc-form-edit-field-head {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
}
  .dc-form-edit-field-label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0px;
  flex: 1 1 0%;
  overflow-wrap: break-word;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
  .dc-form-edit-field.is-heading .dc-form-edit-field-label {
  font-size: 15px;
  font-weight: 600;
}
  .dc-form-edit-field-label.is-untitled {
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-edit-field-type {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-edit-field-type-name {
  display: none;
}
  @media (min-width: 640px) {

  .dc-form-edit-field-type-name {
    display: inline;
  }
}
  /* Narrow columns (3 and 4 per row) keep the glyph only. */
  @media (min-width: 1024px) {

  .dc-form-cols-3 .dc-form-edit-field-type-name,
  .dc-form-cols-4 .dc-form-edit-field-type-name {
    display: none;
  }
}
  .dc-form-edit-field-help {
  margin-top: -0.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-edit-field.is-heading .dc-form-edit-field-help {
  margin-top: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  /* The preview: inert, never a real control. */
  .dc-form-mock {
  pointer-events: none;
  min-width: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
  /* An input as .dc-input draws a disabled one, one step smaller. */
  .dc-form-mock-input {
  display: flex;
  height: 2rem;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
  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(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 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-form-mock-input.is-tall {
  height: 4rem;
  align-items: flex-start;
  padding-top: 0.375rem;
}
  .dc-form-mock-text {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* A file question: a dashed zone, the glyph, "Choose files" and its rules. */
  .dc-form-mock-file {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 10px;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --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;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-form-mock-file-text {
  display: flex;
  min-width: 0px;
  flex-direction: column;
}
  .dc-form-mock-file-rules {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-form-mock-options {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
  .dc-form-mock-option {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-mock-option > .is-untitled {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* The round marker of a single choice, the square one of a checkbox. */
  .dc-form-mock-radio,
  .dc-form-mock-check {
  height: 0.875rem;
  width: 0.875rem;
  flex: none;
  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));
}
  .dc-form-mock-radio {
  border-radius: 9999px;
}
  .dc-form-mock-check {
  border-radius: 4px;
}
  .dc-form-mock-more {
  padding-left: 22px;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  /* A booking question: its page's name over a few times drawn like slots. */
  .dc-form-mock-booking {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.375rem;
}
  .dc-form-mock-booking-page {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.375rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-mock-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
  .dc-form-mock-slot {
  border-radius: 0.375rem;
  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.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  /* Why a booking question will offer no slot, on its card and in its settings. */
  .dc-form-booking-warn {
  border-radius: 14px;
  border-width: 1px;
  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));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
  .dc-form-mock-scale {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .dc-form-mock-scale-points {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
  row-gap: 0.25rem;
}
  /* A point of the scale: its number under its marker, as on the fill page. */
  .dc-form-mock-scale-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-mock-scale-ends {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-ghost {
  opacity: 0.4;
}
  .dc-form-chosen {
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent) / var(--tw-border-opacity, 1));
}
  .dc-form-inspector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
  /* A question card's duplicate and delete buttons (FormCanvas.vue): shown on
     the selected card, on hover and on keyboard focus; always on a touch screen,
     which has no hover. */
  .dc-form-edit-field-actions {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  margin-left: auto;
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.125rem;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-form-edit-field:hover .dc-form-edit-field-actions,
  .dc-form-edit-field.is-selected .dc-form-edit-field-actions,
  .dc-form-edit-field:focus-within .dc-form-edit-field-actions {
  opacity: 1;
}
  @media (hover: none) {
    .dc-form-edit-field-actions {
    opacity: 1;
  }
  }
  .dc-form-inspector-set {
  margin: 0px;
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.5rem;
  border-width: 0px;
  padding: 0px;
}
  .dc-form-option {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
  .dc-form-option > button:disabled {
  visibility: hidden;
}
  /* A choice repeating an earlier one, once a save stopped on it. */
  .dc-form-option > input[aria-invalid="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(196 53 43 / var(--tw-border-opacity, 1));
}
  .dc-form-inspector-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
  .dc-form-inspector-error {
  margin-top: 0.25rem;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(196 53 43 / var(--tw-text-opacity, 1));
}
  /* The two switches of a choice question: several answers, drop-down list. */
  .dc-form-switches {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
  .dc-form-switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-form-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
  .dc-form-switch-label {
  flex: 1 1 0%;
}
  .dc-form-switch-hint {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}

  /* --- Date polls -------------------------------------------------------
     The public voting page (public_poll.html) and the answers table of the
     poll editor (PollEditor.vue). Answers keep one colour each everywhere:
     yes in the accent, maybe in the amber of .dc-notice-warn, no neutral. */

  /* One row per proposed date: when | totals | the three answers on a wide
     screen, stacked below sm. */
  .dc-poll-rows {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}
  /* The left edge is reserved on every row so the best one does not shift. */
  .dc-poll-row {
  display: grid;
  gap: 0.75rem;
  border-left-width: 3px;
  border-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
  @media (min-width: 640px) {

  .dc-poll-row {
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 1.25rem;
  }
}
  .dc-poll-row + .dc-poll-row {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-top-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
}
  /* The date with the most yes so far. */
  .dc-poll-row.is-best {
  --tw-border-opacity: 1;
  border-left-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));
}
  .dc-poll-when {
  display: flex;
  min-width: 0px;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
}
  .dc-poll-day {
  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));
}
  .dc-poll-totals {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  @media (min-width: 640px) {

  .dc-poll-totals {
    flex-direction: column;
    align-items: flex-end;
    gap: 0px;
  }
}
  /* One of the signed-in visitor's own events overlapping the date: warm
     like the danger notice, small enough to stay a remark. */
  .dc-poll-conflict {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 5px;
  border-width: 1px;
  --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));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}

  /* The three answers of a date, as pills. The radio stays in the page,
     visually hidden but focusable, so the keyboard and a form post work
     without script; the pill after it shows the state. The pills share the
     row's width on a phone. */
  .dc-vote {
  margin: 0px;
  display: flex;
  min-width: 0px;
  gap: 0.375rem;
  border-width: 0px;
  padding: 0px;
}
  .dc-vote-choice {
  position: relative;
  flex: 1 1 0%;
  cursor: pointer;
}
  @media (min-width: 640px) {

  .dc-vote-choice {
    flex: none;
  }
}
  .dc-vote-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
  .dc-vote-choice > span {
  display: flex;
  height: 2.25rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: 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: 0.875rem;
  padding-right: 0.875rem;
  font-size: 13.5px;
  line-height: 1.45;
  --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-vote-choice:hover > span {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-vote-choice > input:focus-visible + span {
  --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));
  --tw-ring-offset-width: 2px;
}
  .dc-vote-yes > input:checked + span {
  --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-soft) / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
}
  .dc-vote-maybe > input:checked + span {
  --tw-border-opacity: 1;
  border-color: rgb(217 190 114 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(241 228 190 / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(106 85 32 / var(--tw-text-opacity, 1));
}
  .dc-vote-no > input:checked + span {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(231 231 227 / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}

  /* Who answered what: one row per participant, one column per date. It
     scrolls sideways inside its panel, the names column pinned. */
  .dc-poll-table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.4;
}
  .dc-poll-table th,
  .dc-poll-table td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  .dc-poll-table tbody tr:last-child > th,
  .dc-poll-table tbody tr:last-child > td {
  border-bottom-width: 0px;
}
  .dc-poll-table thead th {
  white-space: nowrap;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  text-align: center;
  vertical-align: bottom;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-poll-table tbody th {
  position: sticky;
  left: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: left;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-vote-name {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  /* The date with the most yes, and the one the organizer closed on. */
  .dc-poll-table th.is-best {
  --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-deep) / var(--tw-text-opacity, 1));
}
  .dc-poll-table th.is-chosen {
  --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-dark) / var(--tw-text-opacity, 1));
  --tw-shadow: inset 0 3px 0 rgb(var(--theme-accent));
  --tw-shadow-colored: inset 0 3px 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);
}
  /* The visitor's own row. */
  .dc-poll-table tr.is-me > th {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-dark) / var(--tw-text-opacity, 1));
  --tw-shadow: inset 3px 0 0 rgb(var(--theme-accent));
  --tw-shadow-colored: inset 3px 0 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);
}
  /* An answer cell: tinted per answer. Empty on the public page, where a
     small square carries the answer; the editor puts an icon in it. */
  .dc-cell-yes,
  .dc-cell-maybe,
  .dc-cell-no,
  .dc-cell-none {
  text-align: center;
  vertical-align: middle;
}
  .dc-cell-yes {
  --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-ink) / var(--tw-text-opacity, 1));
}
  .dc-cell-maybe {
  --tw-bg-opacity: 1;
  background-color: rgb(246 241 228 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(176 138 46 / var(--tw-text-opacity, 1));
}
  .dc-cell-no {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(180 185 181 / var(--tw-text-opacity, 1));
}
  .dc-cell-none {
  --tw-text-opacity: 1;
  color: rgb(213 216 212 / var(--tw-text-opacity, 1));
}
  .dc-cell-yes > svg,
  .dc-cell-no > svg {
  display: inline-block;
  vertical-align: middle;
}
  .dc-cell-yes:empty::before,
  .dc-cell-maybe:empty::before,
  .dc-cell-no:empty::before,
  .dc-cell-none:empty::before {
    content: '';
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 3px;
    background-color: currentColor;
    vertical-align: middle;
  }
  /* No answer: an outlined square rather than a filled one. */
  .dc-cell-none:empty::before {
  border-width: 1px;
  border-color: currentColor;
  background-color: transparent;
}

  /* --- Week slot picker (WeekSlotPicker.vue) ---------------------------- */

  /* A day header that picks the whole day (multiple mode). It sits on the
     bg-subtle header row, so the hover steps one tone darker; picked, it
     takes the accent tint with a bar under it. */
  .dc-week-day-toggle {
  cursor: pointer;
  border-radius: 0.375rem;
  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-week-day-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(231 231 227 / var(--tw-bg-opacity, 1));
}
  .dc-week-day-toggle:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
  .dc-week-day-toggle.is-picked {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 -2px 0 rgb(var(--theme-accent));
  --tw-shadow-colored: inset 0 -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);
}
  .dc-week-day-toggle.is-picked:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-soft) / var(--tw-bg-opacity, 1));
}
  .dc-week-day-toggle:disabled,
  .dc-week-day-toggle.is-picked:disabled {
  cursor: default;
}
  .dc-week-day-toggle:disabled:hover,
  .dc-week-day-toggle.is-picked:disabled:hover {
  background-color: transparent;
}
  .dc-week-day-toggle.is-picked:disabled:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
}
  /* The whole day selected in the poll editor's dates list. */
  .dc-week-day-toggle.is-selected {
  --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-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent-deep) / var(--tw-ring-opacity, 1));
}
  /* A picked slot drawn over the day column, above the busy blocks. Its
     first line holds the times (.dc-slot-line), an optional second one the
     answer count (.dc-slot-badge). */
  .dc-slot-picked {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--theme-accent-ink) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  .dc-slot-line {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.25rem;
}
  /* Poll editor: the block can be dragged, resized and removed. Touch drags
     the block instead of scrolling the grid. */
  .dc-slot-picked.is-editable {
  cursor: grab;
  touch-action: none;
}
  .dc-slot-picked.is-dragging {
  z-index: 10;
  cursor: grabbing;
  opacity: 0.9;
  --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);
}
  /* The proposal most people can attend. */
  .dc-slot-picked.is-best {
  --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-soft) / var(--tw-bg-opacity, 1));
}
  /* A proposal overlapping one of the user's own events: the amber of
     .dc-notice-warn (a thicker left edge, a warm tint, so it stands out
     over the busy block it covers), and an info mark (.dc-slot-warn) whose
     text shows in the picker's floating hint. */
  .dc-slot-picked.is-conflict {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(176 138 46 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 246 234 / var(--tw-bg-opacity, 1));
}
  .dc-slot-warn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
  .dc-slot-warn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(201 162 74 / var(--tw-ring-opacity, 1));
}
  /* The proposal selected in the poll editor's dates list: a ring outside
     the block, which its own overflow does not clip, above its neighbours. */
  .dc-slot-picked.is-selected {
  z-index: 2;
  --tw-shadow: 0 0 0 2px #fff,0 0 0 4px rgb(var(--theme-accent-deep));
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color), 0 0 0 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);
}
  .dc-slot-picked.is-selected.is-dragging {
  z-index: 10;
}
  /* Answer count of a proposal: inside its block, or under a whole day's date. */
  .dc-slot-badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}
  .dc-slot-badge.is-best,
  .dc-slot-picked.is-best .dc-slot-badge {
  font-weight: 600;
}
  /* Remove button in the block's top-right corner, shown on hover or focus
     (always on touch screens, which have no hover). */
  .dc-slot-remove {
  position: absolute;
  right: 0.125rem;
  top: 0.125rem;
  z-index: 1;
  display: flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  --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-deep) / var(--tw-text-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .dc-slot-remove:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-soft) / var(--tw-bg-opacity, 1));
}
  .dc-slot-remove:focus-visible {
  opacity: 1;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
  .dc-slot-picked:hover .dc-slot-remove {
  opacity: 1;
}
  /* Bottom-edge resize handle: an 8px hit area kept inside the block, whose
     overflow-hidden would clip anything hanging below it; a short bar on
     hover. The × stays above it on a short block. */
  .dc-slot-handle {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 0.5rem;
  cursor: ns-resize;
}
  .dc-slot-handle::after {
    content: '';
    position: absolute;
    bottom: 0.125rem;
    left: 50%;
    height: 0.125rem;
    width: 1rem;
    --tw-translate-x: -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));
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--theme-accent-ink) / var(--tw-bg-opacity, 1));
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .dc-slot-picked:hover .dc-slot-handle::after {
  opacity: 1;
}
  @media (hover: none) {
    .dc-slot-remove,
    .dc-slot-handle::after {
    opacity: 1;
  }
  }
  /* `fill` mode: the picker takes the height its flex column parent leaves
     it (the poll editor's main column) and its hours scroll inside that,
     never below 220px, under which the parent scrolls instead. */
  .dc-week-fill {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  .dc-week-fill > .dc-week-frame {
  display: flex;
  min-height: 220px;
  flex: 1 1 0%;
  flex-direction: column;
}
  .dc-week-fill .dc-week-sheet {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  /* Where a click on empty grid would add a slot. */
  .dc-slot-ghost {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: dashed;
  border-color: rgb(var(--theme-accent-ink) / 0.6);
  background-color: rgb(var(--theme-accent-wash) / 0.5);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 10px;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-deep) / var(--tw-text-opacity, 1));
}

  /* --- Hint (tooltip) ---------------------------------------------------- */

  /* The bubble of a hint: dark, small, wrapping past 16rem. */
  .dc-hint-bubble {
  pointer-events: none;
  width: -moz-max-content;
  width: max-content;
  max-width: 16rem;
  white-space: normal;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(22 25 27 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 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);
}
  /* An immediate hint on any element outside a clipping box:
     <span class="dc-hint" data-hint="Text" tabindex="0">, shown above it on
     hover and keyboard focus. Inside overflow-hidden or scrolling boxes, use
     a .dc-hint-float element placed by script instead (WeekSlotPicker). */
  /* A hint fixed to the viewport, its `left`/`top` set inline to the point
     it hangs from: centred above it, or below it with .is-below. Above the
     dialogs (z-50) and their popovers. */
  .dc-hint-float {
  position: fixed;
  z-index: 80;
  --tw-translate-x: -50%;
  --tw-translate-y: -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));
}
  .dc-hint-float.is-below {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* 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));
}

  .dc-form-results-table th.is-deleted .dc-field-label {
  font-style: italic;
}

  .dc-field-label {
  margin-bottom: 0.375rem;
  display: block;
}
  /* Three fields side by side, their inputs level even when one label wraps
     onto a second line in a narrow column. */
  .dc-field-row-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-end;
  gap: 0.75rem;
}
  @media (min-width: 640px) {

  .dc-field-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

  /* 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));
}
  /* Native checkbox in the accent colour (the event form, the poll editor). */
  .dc-checkbox {
  border-radius: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-checkbox:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
  /* Native radio in the accent colour: round, where .dc-checkbox's corners
     would square it off. */
  .dc-radio {
  border-radius: 9999px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-radio:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
}
  /* A radio or checkbox with its label, and an optional hint line under it. */
  .dc-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-choice > input {
  margin-top: 0.125rem;
}

  /* Suggestions floating under a typed field (PeopleInput, InviteePicker).
     Absolute, so an appearing list never pushes what follows the field. */
  .dc-suggest-list {
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 50;
  margin-top: 0.25rem;
  max-height: 14rem;
  width: 100%;
  overflow-y: auto;
  border-radius: 0.5rem;
  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 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);
}
  .dc-suggest-item {
  cursor: pointer;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(61 66 63 / var(--tw-text-opacity, 1));
}
  .dc-suggest-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  /* The row the arrow keys or the pointer are on. */
  .dc-suggest-item.is-active {
  --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));
}
  .dc-suggest-item.is-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-tint) / var(--tw-bg-opacity, 1));
}

  /* Framed row of a short list of things one owns (the date polls of the
     poll editor): a title block, then its actions. */
  .dc-list-row.is-current {
  --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));
}

  /* 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 {
  position: relative;
  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 {
  position: relative;
  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 {
  position: relative;
  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 photo of a person, laid over the initials or the glyph of their
     avatar (js/photo.js), which show again should it fail to load. */
  .dc-avatar-photo {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
}
  /* An avatar whose photo can be changed: the round button opening the file
     picker, marked by a camera at its foot, and the cross taking the photo
     away. The account page and the contact sheet. */
  .dc-photo-pick {
  position: relative;
  display: flex;
  flex: none;
  border-radius: 9999px;
}
  .dc-photo-pick:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--theme-accent) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}
  .dc-photo-pick:disabled {
  cursor: default;
}
  .dc-photo-pick-badge {
  position: absolute;
  bottom: -0.125rem;
  right: -0.125rem;
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: 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));
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  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-photo-pick:hover .dc-photo-pick-badge {
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-photo-pick:disabled .dc-photo-pick-badge {
  display: none;
}
  .dc-photo-remove {
  position: absolute;
  right: -0.25rem;
  top: -0.25rem;
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: 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));
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  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-photo-remove:hover {
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  /* A finger's worth of target around the small cross. */
  .dc-photo-remove::before {
    content: '';
    position: absolute;
    inset: -0.375rem;
  }
  /* 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; }
  /* The badge filling a grid tile or the details panel's preview area. */
  .dc-ft-xl {
  border-radius: 1rem; width: 60px; height: 60px;
}

  /* --- 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));
}

  /* --- Template picker (components/PromptTemplatePicker.vue) ------------- */
  /* A row carrying a second line under its title: the glyph lines up with the
     first line rather than centring itself against both. */
  .dc-pick-row.is-stacked {
  align-items: flex-start;
}
  .dc-pick-title {
  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));
}
  /* The opening line of the prompt, to recognise it by. One line, cut: a row
     that grew with its prompt would let two long templates fill the dialog. */
  .dc-pick-preview {
  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 way out of picking and into writing, under the list. */
  .dc-pick-foot {
  display: flex;
  flex: none;
  align-items: center;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  /* 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;
  }
}

  /* Forms shown to someone who may only answer them -- a workspace guest
     (workspace.html), a read-only member of a shared folder (FormCards.vue):
     a grid of cards above the listing instead of rows in it. A card holds
     the form's title, its description and one action, a button or a state
     badge; never a file action. One column on a phone, up to three. */
  .dc-form-cards-section {
  margin-bottom: 1.25rem;
}
  /* A form answered in the frame of a workspace (form_fill_workspace.html):
     the header and body of the workspace page, the way back on top. */
  .dc-form-guest-head {
  display: flex;
  align-items: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 0.875rem;
}
  @media (min-width: 1024px) {

  .dc-form-guest-head {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
  .dc-form-guest-back {
  margin-left: -0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --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-form-guest-back: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-form-guest-body {
  flex: 1 1 0%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.5rem;
}
  @media (min-width: 1024px) {

  .dc-form-guest-body {
    min-height: 0px;
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(251 251 249 / var(--tw-bg-opacity, 1));
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 2rem;
    padding-bottom: 26px;
  }
}
  /* Against the left edge, like the listing of the workspace page. */
  .dc-form-guest-body .dc-form-sheet {
  margin-left: 0px;
  margin-right: 0px;
}
  .dc-form-cards-title {
  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));
}
  .dc-form-results-table th.is-deleted .dc-form-cards-title {
  font-style: italic;
}
  .dc-form-cards-title {
  margin-bottom: 0.625rem;
}
  .dc-form-cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}
  @media (min-width: 640px) {

  .dc-form-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  @media (min-width: 1280px) {

  .dc-form-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  .dc-form-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;
  min-width: 0px;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
  .dc-form-card-head {
  display: flex;
  min-width: 0px;
  align-items: flex-start;
  gap: 0.75rem;
}
  .dc-form-card-title {
  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;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
}
  /* The creator's line breaks are kept; past three lines the rest is cut. */
  .dc-form-card-desc {
  margin-top: 0.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: pre-line;
  overflow-wrap: break-word;
  font-size: 12.5px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-form-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
  /* "Already answered", "Closed": where the button would be, nothing to click. */
  .dc-form-card-state {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  /* In the explorer the cards sit between the toolbar and the listing panel,
     on the listing frame's gutter, and never take the whole height from it:
     past a few rows they scroll on their own. */
  .dc-form-cards-browse {
  margin-left: 22px;
  margin-right: 22px;
  margin-bottom: 0.875rem;
  max-height: 45vh;
  flex: none;
  overflow-y: auto;
}
  @media not all and (min-width: 1024px) {

  .dc-form-cards-browse {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0.75rem;
  }
}
  /* The guest side's dark button at the size of .dc-btn-primary. */
  .dc-form-card-btn-guest {
  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-form-card-btn-guest: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));
}
  .dc-form-card-btn-guest {
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 13px;
}

  /* 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));
}
  .dc-form-result-recent > li > .dc-file-item-kind {
  flex: none;
}
  .dc-form-ai-progress .dc-file-item-kind {
  display: block;
}
  .dc-file-item-kind {
  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);
}
  /* The folder of the tree being dragged to another one (TreeNode.vue). */
  .dc-nav-item.is-dragging {
  opacity: 0.5;
}
  /* The whole of a truncated label, laid over it while the pointer is on its
     row (js/reveal_overflow.js): fixed, over the column it overflows and the
     drawer, under the dialogs. The background of a hovered
     .dc-nav-item, or of a current one; the shadow is cut on the left, where
     the copy sits inside its row, so only the part past the row floats. */
  .dc-overflow-reveal {
  pointer-events: none;
  position: fixed;
  z-index: 45;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 235 / var(--tw-bg-opacity, 1));
  padding-right: 0.625rem;
  --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);
    clip-path: inset(-12px -12px -12px 0);
}
  .dc-overflow-reveal.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  .dc-overflow-reveal[hidden] {
  display: none;
}
  /* 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));
}
  .dc-form-result-recent > li > .dc-section-meta {
  flex: none;
}
  .dc-form-ai-progress .dc-section-meta {
  display: block;
}
  .dc-section-meta {
  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));
}
  .dc-form-result-recent > li > .dc-attachment-meta {
  flex: none;
}
  .dc-form-ai-progress .dc-attachment-meta {
  display: block;
}
  .dc-attachment-meta {
  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);
}
  /* In a library pane the box takes the height left over rather than a number
     of rows. Both halves have to follow: the backdrop already does, being
     `inset-0`, but a field left at its `rows` height would stop short and the
     bottom of the box would take no click. */
  .dc-hl.is-filling {
  display: flex;
  min-height: 0px;
  flex-direction: column;
}
  .dc-hl.is-filling > .dc-hl-input {
  min-height: 0px;
  flex: 1 1 0%;
}
  /* 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 library panes ------------------------------------------------ */
  /* Two panes share this shape: prompt templates (PromptTemplatesPane.vue)
     and assistant skills (AssistantSkillsPane.vue). Both are "what this
     account has written down" -- the list on the left, the one being written
     on the right -- so they share the classes rather than each carrying a
     near-copy that drifts. Named for the shape and not for either of them.

     Both were dialogs once, which is where the ceiling below comes from: an
     overlay centres its panel without scrolling it, so a dialog taller than
     the window pushes its own footer off-screen. Kept for whatever still
     opens one of these lists over a page; in the assistant they carry
     `.is-in-page` and take the column's height instead. The 22rem floor keeps
     either from collapsing on a short entry. */
  .dc-lib-shell {
  display: flex;
  max-height: 62vh;
  min-height: 22rem;
  gap: 1rem;
}
  /* In the page rather than over it (AssistantSkillsPane.vue,
     PromptTemplatesPane.vue): the column it sits in already bounds the
     height, so the share of the window becomes wrong -- it would leave a band
     of nothing under the footer on a tall screen and still overflow a short
     one. */
  .dc-lib-shell.is-in-page {
  max-height: none;
  min-height: 0px;
  flex: 1 1 0%;
}
  /* Fixed width so the editor beside it does not resize every time a longer
     name arrives; it scrolls on its own rather than growing the modal. */
  .dc-lib-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-lib-edit {
  display: flex;
  min-height: 0px;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}
  .dc-lib-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-lib-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-lib-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" / "New skill" is an action, not one of the entries: it
     sits a step back so the list below it reads as the actual contents. */
  .dc-lib-row.is-new {
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-lib-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-lib-row-shared {
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-lib-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));
}

  /* The pane those two dialogs became: a heading, the shell, and a row of
     buttons, taking the column the transcript would have had. It is a place
     you go to rather than a box over what you were reading -- writing a skill
     or a prompt takes several passes and a look at the other entries, and a
     modal makes all three awkward. */
  .dc-library-pane {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
  .dc-library-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
  /* Separated by a rule rather than floating under the shell: the shell
     scrolls, and without it the last row of the list reads as a button. */
  .dc-library-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
}
  /* 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 way to a template (components/apps/AssistantApp.vue) --------- */
  /* There used to be a second one: "New conversation" was a split button whose
     caret opened the template library. Managing templates is a setting, so it
     moved to the Settings section of the sidebar, and `.dc-split-main` /
     `.dc-split-caret` went with it. Nothing else was split in two.

     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));
}
  .dc-form-result-recent > li > .dc-accordion-meta {
  flex: none;
}
  .dc-form-ai-progress .dc-accordion-meta {
  display: block;
}
  .dc-accordion-meta {
  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));
}
  /* The guests of a workspace (WorkspaceMembersEditor.vue): a search that
     always answers -- the address card, then contacts and groups -- and one
     compact list of guests, the rights in a pill that opens its options. */
  .dc-wsg {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
  .dc-wsg-search-icon {
  pointer-events: none;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  --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));
  --tw-text-opacity: 1;
  color: rgb(154 160 156 / var(--tw-text-opacity, 1));
}
  .dc-input.dc-wsg-input {
  padding-left: 2.25rem;
}
  .dc-wsg-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));
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  z-index: 30;
  margin-top: 0.25rem;
  display: flex;
  max-height: 20rem;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  padding: 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-wsg-panel-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));
}
  .dc-form-results-table th.is-deleted .dc-wsg-panel-label {
  font-style: italic;
}
  .dc-wsg-panel-label {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.25rem;
  padding-top: 0.625rem;
}
  .dc-wsg-panel-note {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  /* The typed address: coloured when it can be invited, amber when what is
     typed can be neither invited nor found, plain as a hint otherwise. */
  .dc-wsg-invite {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(var(--theme-accent) / 0.3);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-accent-wash) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / 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-wsg-invite.is-active,
  .dc-wsg-invite:hover {
  border-color: rgb(var(--theme-accent) / 0.6);
}
  .dc-wsg-invite.is-muted,
  .dc-wsg-invite.is-hint {
  cursor: default;
  border-color: transparent;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-wsg-invite.is-invalid {
  cursor: default;
  --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-wsg-invite-icon {
  margin-top: 0.125rem;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: rgb(255 255 255 / 0.7);
}
  .dc-wsg-invite.is-muted .dc-wsg-invite-icon,
  .dc-wsg-invite.is-hint .dc-wsg-invite-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-wsg-invite-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
  .dc-wsg-invite-text {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.375;
  opacity: 0.9;
}
  .dc-wsg-option {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  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-wsg-option:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-wsg-option.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-wsg-avatar {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(230 244 242 / var(--tw-bg-opacity, 1));
  font-size: 10px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-wsg-avatar.is-group {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(236 234 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(91 79 168 / var(--tw-text-opacity, 1));
}
  /* Never cut: an address typed wrong is a live grant to whoever owns that
     mailbox, so it is shown whole, wrapped where it must be. */
  .dc-wsg-name {
  display: block;
  word-break: break-all;
  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-wsg-name.is-small {
  font-size: 12.5px;
  line-height: 1.4;
}
  .dc-wsg-meta {
  display: block;
  overflow-wrap: break-word;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-wsg-resend {
  margin-left: 0.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-wsg-resend:hover {
  text-decoration-line: underline;
}
  /* The separator is not part of the link: inline-block keeps it out of the
     underline. */
  .dc-wsg-resend::before {
    content: '·';
    margin-right: 0.25rem;
    display: inline-block;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(154 160 156 / var(--tw-text-opacity, 1));
  }
  .dc-wsg-meta .is-pending {
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-wsg-meta .is-not-sent {
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
  .dc-wsg-list {
  display: flex;
  flex-direction: column;
}
  .dc-wsg-list > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-divide-opacity, 1));
}
  .dc-wsg-list {
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 231 227 / var(--tw-border-opacity, 1));
}
  .dc-wsg-row.is-open {
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 250 / var(--tw-bg-opacity, 1));
}
  .dc-wsg-row-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  /* Under the name: the status on the left, the rights pill on the right. */
  .dc-wsg-row-foot {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  /* The rights of a guest, as a pill that opens their options. */
  .dc-wsg-right {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  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.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --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-wsg-right:hover {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 212 / var(--tw-border-opacity, 1));
}
  .dc-wsg-row.is-open .dc-wsg-right {
  border-color: rgb(var(--theme-accent) / 0.5);
  --tw-text-opacity: 1;
  color: rgb(var(--theme-accent-ink) / var(--tw-text-opacity, 1));
}
  .dc-wsg-right-caret {
  --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-wsg-row.is-open .dc-wsg-right-caret {
  --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-wsg-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-bottom: 0.75rem;
  padding-top: 0.125rem;
}
  /* One checkbox per right, its glyph, its name and what it allows. A right
     that cannot be taken away (the last way in) shows it, greyed. */
  .dc-wsg-rights {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
}
  .dc-wsg-right-option {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
  .dc-wsg-right-option:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 240 / var(--tw-bg-opacity, 1));
}
  .dc-wsg-right-option .dc-checkbox {
  margin-top: 0.125rem;
  flex: none;
}
  .dc-wsg-right-icon {
  margin-top: 0.125rem;
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-wsg-right-name {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 25 27 / var(--tw-text-opacity, 1));
}
  .dc-wsg-right-hint {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-wsg-no-access {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(246 233 228 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-wsg-right.is-empty {
  --tw-border-opacity: 1;
  border-color: rgb(232 201 188 / 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-wsg-body-note {
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(110 115 111 / var(--tw-text-opacity, 1));
}
  .dc-wsg-sublist {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  .dc-wsg-subrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
  .dc-wsg-subrow + .dc-wsg-subrow {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(244 244 240 / var(--tw-border-opacity, 1));
}
  .dc-wsg-remove {
  align-self: flex-start;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(138 74 51 / var(--tw-text-opacity, 1));
}
  .dc-wsg-remove:hover {
  text-decoration-line: underline;
}
  .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));
}
  /* A toast offering to take back what it reports ("Undo"): the text, then
     its button. The one kind of toast the pointer reaches -- the others let
     clicks through to the page under them. */
  .dc-toast.has-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
  .dc-toast-action {
  flex: none;
  font-weight: 600;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}
  .dc-toast-action:hover {
  text-decoration-line: none;
}

  /* --- 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), and,
     with .dc-prose-doc below, a document shared by link. Written out rather
     than taken from a typography plugin: the type has to match the messages
     around it, and the tag lists are the short ones 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));
}

  /* A shared document read as a page (js/public_share.js). The rules above
     are sized for a chat bubble; a document is read at length, opens on a
     title, nests its sections and holds images and task lists. */
  .dc-prose-doc {
  font-size: 15px;
  line-height: 1.7;
}
  .dc-prose-doc p, .dc-prose-doc ul, .dc-prose-doc ol,
  .dc-prose-doc blockquote, .dc-prose-doc pre, .dc-prose-doc table {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
  .dc-prose-doc h1 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 26px;
  line-height: 1.25;
}
  .dc-prose-doc h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-border-opacity, 1));
  padding-bottom: 0.375rem;
  font-size: 20px;
  line-height: 1.375;
}
  .dc-prose-doc h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 17px;
}
  .dc-prose-doc h4, .dc-prose-doc h5, .dc-prose-doc h6 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
  .dc-prose-doc code {
  font-size: 13px;
}
  .dc-prose-doc pre {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  .dc-prose-doc pre code {
  font-size: 12.5px;
}
  /* As wide as its columns, and scrolled rather than squeezed past the page. */
  .dc-prose-doc table {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.45;
}
  /* The alignment a delimiter row asks for (`--:`), written by marked as an
     attribute, which the left alignment of the cells above would override. */
  .dc-prose-doc th[align="center"], .dc-prose-doc td[align="center"] {
  text-align: center;
}
  .dc-prose-doc th[align="right"], .dc-prose-doc td[align="right"] {
  text-align: right;
}
  .dc-prose-doc img {
  height: auto;
  max-width: 100%;
  border-radius: 0.375rem;
}
  /* A task item: no bullet, its box hanging where the bullet was. */
  .dc-prose-doc li:has(> input[type="checkbox"]),
  .dc-prose-doc li:has(> p:first-child > input[type="checkbox"]) {
  list-style-type: none;
}
  .dc-prose-doc li input[type="checkbox"] {
    margin: 0 0.4em 0.2em -1.4em;
    vertical-align: middle;
  }
.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-\[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-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.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 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-\[7px\] {
  margin-top: 7px;
}
.mt-px {
  margin-top: 1px;
}
.\!block {
  display: block !important;
}
.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 !important;
}
.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-\[150px\] {
  max-height: 150px;
}
.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-\[480px\] {
  max-height: 480px;
}
.max-h-\[52vh\] {
  max-height: 52vh;
}
.max-h-\[56vh\] {
  max-height: 56vh;
}
.max-h-\[58vh\] {
  max-height: 58vh;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.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-\[10rem\] {
  min-height: 10rem;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.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-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[104px\] {
  width: 104px;
}
.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-\[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-\[160px\] {
  min-width: 160px;
}
.min-w-\[17px\] {
  min-width: 17px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[2\.5rem\] {
  min-width: 2.5rem;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[620px\] {
  min-width: 620px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.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-\[1180px\] {
  max-width: 1180px;
}
.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-\[36rem\] {
  max-width: 36rem;
}
.max-w-\[40\%\] {
  max-width: 40%;
}
.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-\[680px\] {
  max-width: 680px;
}
.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-\[90ch\] {
  max-width: 90ch;
}
.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 {
  flex-shrink: 1;
}
.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;
}
.cursor-text {
  cursor: text;
}
.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-1\.5 {
  row-gap: 0.375rem;
}
.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-soft > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(239 239 235 / var(--tw-divide-opacity, 1));
}
.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-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-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-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--theme-rail-deep) / 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-10 {
  padding: 2.5rem;
}
.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-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.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-\[\#111827\] {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-\[\#16A34A\] {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-\[\#2563EB\] {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 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-\[\#6B7280\] {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-\[\#7A6224\] {
  --tw-text-opacity: 1;
  color: rgb(122 98 36 / var(--tw-text-opacity, 1));
}
.text-\[\#7C3AED\] {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / 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-\[\#CA8A04\] {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / 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-\[\#DB2777\] {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-\[\#DC2626\] {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-\[\#E4826A\] {
  --tw-text-opacity: 1;
  color: rgb(228 130 106 / var(--tw-text-opacity, 1));
}
.text-\[\#EA580C\] {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-\[\#EAB308\] {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 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-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-error {
  --tw-text-opacity: 1;
  color: rgb(196 53 43 / 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-guest {
  --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);
}
.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) !important;
}
.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);
  }
.\[-webkit-touch-callout\:none\] {
  -webkit-touch-callout: none;
}

/* --- 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.
   Clearly distinct, saturated hues so a family is told apart at a glance:
   red (PDF), blue (documents, code), green (sheets), pink (forms), orange
   (slides, archives), yellow (images, folders), violet (video, audio,
   design), black (plain text, Markdown), grey (unknown). Each ink stays
   readable on its wash. Keep in sync with FILE_TYPE_MAP, FAMILY_ICON and
   FAMILY_INK in common.js. */
.ft-pdf   { background: #FEE2E2; color: #DC2626; }
.ft-doc   { background: #DBEAFE; color: #2563EB; }
.ft-code  { background: #DBEAFE; color: #2563EB; }
.ft-sheet { background: #DCFCE7; color: #16A34A; }
.ft-form  { background: #FCE7F3; color: #DB2777; }
.ft-slide { background: #FFEDD5; color: #EA580C; }
.ft-arch  { background: #FFEDD5; color: #EA580C; }
.ft-image { background: #FEF3C7; color: #CA8A04; }
.ft-dir   { background: #FEF3C7; color: #CA8A04; }
.ft-video { background: #EDE9FE; color: #7C3AED; }
.ft-audio { background: #EDE9FE; color: #7C3AED; }
.ft-design{ background: #EDE9FE; color: #7C3AED; }
.ft-text  { background: #E5E7EB; color: #111827; }
.ft-note  { background: #E5E7EB; color: #111827; }
.ft-other { background: #F3F4F6; color: #6B7280; }

/* --- 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-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-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\:p-4 {
    padding: 1rem;
  }

  .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;
  }

  .max-lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}
@media not all and (min-width: 640px) {

  .max-sm\:hidden {
    display: none;
  }
}
@media (min-width: 640px) {

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:hidden {
    display: none;
  }

  .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-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:px-\[34px\] {
    padding-left: 34px;
    padding-right: 34px;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@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\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: minmax(0,1fr) 340px;
  }

  .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-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .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\: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));
  }
}
@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));
  }
}
@media print {

  .print\:block {
    display: block;
  }

  .print\:hidden {
    display: none;
  }
}
.\[\&\:\:-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-682ed7a5.css.ae27f9c8466c.map */