/* The basic look of dynamic_forms/fields/*. A project replaces any of these classes with its own (dynamic_forms/fields.html: classes),
   and its colours with --df-* on the fields' container.
   All in the cascade layer "components" (Tailwind's, where a project's component classes are): loaded after the project's CSS, these rules
   still win over the project's component classes on the same element, but its utility classes (Tailwind's "utilities" layer, and any CSS
   outside layers) win over them, so classes can change the structure too (the grid, a field's rows), not only the look.
   The rules that meet a project's class on the same element (the cell, a dropdown's summary, a quantity) are a little more specific, so they
   hold whatever the order of the stylesheets. flatpickr's own CSS is in the layer too, so a project's flatpickr theme always wins over it */
@import url("../vendor/flatpickr.min.d5a8fe561233.css") layer(components);

@layer components {

:root { --df-background: #fff; --df-text: #263241; --df-muted: #66717d; --df-border: #cbd1d7; --df-accent: #526578; --df-error: #a52b30; --df-note-background: #f3f5f7;
        --df-option-hover: #f3f5f7; --df-option-chosen: #e6ebf0; --df-option-chosen-text: #263241; }

.df-title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 500; }
.df-description { margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.6; color: var(--df-text); }
.df-description p { margin: 0; }
.df-description p + p { margin-top: .75rem; }
.df-description--note { padding: 1rem 1.25rem; border-radius: 4px; background: var(--df-note-background); }
.df-description--folded { border-bottom: 1px solid var(--df-border); }
.df-description--folded summary { padding: .75rem 0; font-weight: 600; cursor: pointer; }
.df-description--folded[open] summary { margin-bottom: .25rem; }
.df-description--folded > p:last-child { padding-bottom: 1rem; }
.df-form { display: grid; gap: 2rem; justify-items: center; }
.df-form > :not(.df-button) { justify-self: stretch; }
.df-button { padding: .75rem 2rem; border: 0; border-radius: 4px; background: var(--df-accent); color: var(--df-background); font: inherit; cursor: pointer; }

.df-fields { color: var(--df-text); }
.df-field { min-width: 0; color: var(--df-text); }

/* The grid of the fields, whatever classes a project gives them: six columns, and each field a cell of three rows of the grid
   (label, control, help and errors), so the labels, the controls and the help texts of a row line up. A field takes the whole row,
   half of it or a third of it (its width in the admin), by the width of the form itself: thirds are halves in a narrow form, all whole in a very narrow one */
/* The grid takes back the space under its last row inside its wrapper (a block of its own), so the space a project puts after the fields stays */
.df-fields-wrap { display: flow-root; }
.df-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--df-column-gap, 1.5rem); row-gap: 0; margin-bottom: calc(-1 * var(--df-row-gap, 1.5rem)); }
.df-grid > .df-cell { display: grid; grid-column: 1 / -1; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; margin: 0 0 var(--df-row-gap, 1.5rem); }
.df-grid > .df-cell > .df-row-control { grid-row: 2; min-width: 0; }
.df-grid > .df-cell > .df-feedback { grid-row: 3; }
/* A textarea is a block, as the inputs: inline it would leave the space of the letters' descenders under it, a gap more than between the other fields */
.df-grid textarea { display: block; }
/* A field that starts hidden (field.start_hidden), until a script of the project shows it */
.df-grid > .df-hidden { display: none; }
@container (min-width: 32rem) { .df-grid > .df-width-half, .df-grid > .df-width-third { grid-column: span 3; } }
@container (min-width: 40rem) { .df-grid > .df-width-third { grid-column: span 2; } }
.df-label { display: block; margin: 0 0 .5rem; padding: 0; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.df-required { color: var(--df-error); }
/* The icon of a group's label, on the line of its text (a project's CSS may make every svg a block) */
.df-label-icon { display: inline-flex; margin-right: .4rem; vertical-align: text-bottom; }
.df-label-icon svg { display: block; }

.df-control-wrap { position: relative; min-width: 0; }
.df-control { cursor: text; display: block; box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--df-border); border-radius: 4px; background: var(--df-background); color: var(--df-text); font: inherit; font-size: .875rem; line-height: 1.5; }
.df-control::placeholder { color: var(--df-muted); opacity: 1; }
.df-control:focus-visible, .df-check:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.df-control[aria-invalid=true] { border-color: var(--df-error); }
.df-control--icon { padding-left: 2.5rem; }
/* The controls that open a picker (dates, times, selects) */
.df-picker { cursor: pointer; }
select.df-control { padding-right: 2.5rem; appearance: none; }
textarea.df-control { min-height: 7rem; resize: vertical; }
.df-icon { position: absolute; top: 50%; left: .75rem; display: flex; transform: translateY(-50%); pointer-events: none; color: var(--df-muted); }
.df-icon-svg { display: inline-block; width: 1rem; height: 1rem; vertical-align: middle; }
.df-arrow { position: absolute; inset-block: 0; right: 0; display: flex; width: 2.5rem; align-items: center; justify-content: center; pointer-events: none; color: var(--df-muted); }
/* The arrow itself, in the colour of the text around it: a mask, as it lands on whole pixels of the screen; an inline SVG between two pixels (a form whose
   width follows the screen) draws one of its sides shorter */
.df-arrow-icon { display: block; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 100% no-repeat; }

.df-help { margin: .5rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--df-muted); }
.df-errors { margin: .5rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--df-error); }
.df-errors p { margin: 0; }
.df-form-errors { margin-bottom: 1.5rem; padding: .75rem 1rem; border: 1px solid var(--df-error); border-radius: 4px; background: var(--df-background); color: var(--df-error); font-size: .9rem; }
.df-form-errors p { margin: 0; }

.df-choices { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.df-choice { display: inline-flex; align-items: flex-start; gap: .65rem; font-size: .875rem; line-height: 1.5; cursor: pointer; }
.df-check-wrap { display: grid; flex: none; place-items: center; }
.df-check-wrap > * { grid-area: 1 / 1; }
.df-tick { display: none; }
.df-radio { border-radius: 50%; }
.df-check { flex: none; width: 1rem; height: 1rem; margin: .15rem 0 0; accent-color: var(--df-accent); cursor: pointer; }

.df-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .75rem; }
.df-addon { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--df-border); border-radius: 4px; background: var(--df-background); }
.df-addon:has(:checked) { border-color: var(--df-accent); }
.df-addon-image { width: 5rem; height: auto; }
.df-addon-copy { flex: 1; min-width: 8rem; }
.df-addon-name { display: block; font-size: .875rem; font-weight: 600; color: var(--df-text); cursor: pointer; }
.df-addon-description { margin: .15rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--df-muted); }
input.df-addon-quantity { width: 5rem; }

.df-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.df-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

}