/* Extracted from kdots/css/kdots.css by eleventy.config.cjs - do not edit */
/*** END APPLICATION ***/
[layout="stack"] {
  /* Default: children keep their own height and do not grow.
   * Not `:scope > *`: this compiles into kdots.css, a document stylesheet, where :scope is
   * :root - so the rule matched nothing and non-growing children silently kept the flex
   * defaults (shrinkable, min-height: auto) instead.  Stays less specific than the opt-in
   * rule below, which has to win.
   */
  /* Opt-in growth.  Et2LayoutController overrides flex-grow inline when grow= names a factor,
   * which CSS cannot read out of the attribute.
   *
   * A tabbox and a nextmatch grow without asking - they are never what a stack should leave space
   * around, so needing grow= on every one of them would only be noise.  Keep this list the same as
   * GROW_TAG_SELECTOR in Et2LayoutStrategies.ts, which decides the same thing for the grid layouts.
   */
}

[layout="stack"]::part(base) {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[layout="stack"] > * {
  flex: 0 0 auto;
  min-height: 0;
}

[layout="stack"] [grow],
[layout="stack"] et2-tabbox,
[layout="stack"] et2-nextmatch {
  flex: 1 1 auto;
  min-height: 0;
}

/* Common grid base */
/* Common rules for column layout, may be extended with
 *  .layout-grid-base(~'[layout="layout-name"]');
 */
/* Common rules for 2 columns, may be extended */
/* Base container */
/* Used when the grid layout has to collapse down to one column */
/* Both selectors name the same element, for the two kinds of host this mixin serves.
   * A shadow-DOM host (et2-template) exposes its wrapper through ::part(base).  A light-DOM
   * host - et2-customfields and friends render into light DOM so eTemplate can find the child
   * widgets they generate - has no shadow boundary for ::part() to cross, so there `part` is
   * just an ordinary attribute on an ordinary child, matched as one.
   */
[layout="2-column"]::part(base),
[layout="2-column"] > [part~="base"] {
  position: relative;
  display: grid;
  /* Auto-collapse to one column once a column would get too narrow */
  grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width, 26rem), 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  row-gap: var(--sl-spacing-small);
  column-gap: var(--sl-spacing-large, 1rem);
  height: 100%;
  min-height: 0;
}

[layout="2-column"] {
  /* Do not allow fixed width labels to wrap normally - the one-column rules below
	 * override this once the container is too narrow to keep label and input side by side.
	 * Keep this selector no more specific than _grid-one-column's matching rule, or that
	 * override silently loses and the label never wraps.  et2-box/et2-hbox child variants
	 * are deliberately absent: .et2-label-fixed already matches them, so they would only
	 * add specificity.
	 */
}

[layout="2-column"] *.et2-label-fixed::part(form-control) {
  flex-wrap: nowrap;
}

/* One-column mode: keep label/input stacking consistent for all widgets */
@container (max-width: calc(var(--column-min-width, 26rem) * 2 + var(--sl-spacing-large, 1rem))) {
  [layout="2-column"]::part(base),
  [layout="2-column"] > [part~="base"] {
    grid-template-columns: 1fr;
  }
}

/* Responsive fallback: collapse to 1 column on small screens */
/* var() is not fully supported yet, so this is the fallback */
@container (max-width: 600px) {
  [layout="2-column"]::part(base),
  [layout="2-column"] > [part~="base"] {
    grid-template-columns: 1fr;
  }
}

/* var() is not fully supported yet */
@container (max-width: var(--collapse-width, 600px)) {
  [layout="2-column"]::part(base),
  [layout="2-column"] > [part~="base"] {
    grid-template-columns: 1fr;
  }
}

/* A single column still has room for label and input side by side well below the point where
   * the columns collapse, so labels only stack above their fields once the container is really
   * narrow.  Relative units, so it follows the text size like --column-min-width does.
   */
@container (max-width: 36em) {
  [layout="2-column"] *.et2-label-fixed::part(form-control) {
    flex-wrap: wrap;
  }
  [layout="2-column"] *::part(form-control-label) {
    width: 100%;
    flex-basis: 100%;
    margin-right: 0;
  }
  [layout="2-column"] *::part(form-control-input) {
    flex-basis: 100%;
  }
  [layout="2-column"] *::part(form-control-help-text) {
    left: 0;
  }
  /* When titles break, we want to align widgets at the bottom of the hbox */
  [layout="2-column"] et2-hbox::part(base) {
    align-items: flex-end;
  }
}

[layout="2-column"] {
  height: 100%;
  container-type: inline-size;
  overflow-y: auto;
  overflow-x: hidden;
  /* ---------- FULL-WIDTH ROWS ---------- */
  /* A tabbox and a nextmatch take every column without being asked, the same way they take the
	 * leftover height below: half a dialog is not a useful width for either of them, so saying
	 * span="all" on every one would only be noise.
	 */
  /* ---------- REST-WIDTH ROWS ---------- */
  /* span="end" / span="*" stretch from their own column to the end of the line, which CSS
	 * cannot express: `grid-column-end: -1` on an auto-placed item is a span of one ending at
	 * the last line, so it would jump into the last column instead of filling the rest of its
	 * line.  Et2LayoutController measures the column it landed in and writes the real
	 * `grid-column` inline.
	 */
  /* ---------- DEFAULT COLUMN FLOW ---------- */
  /* ---------- VERTICAL GROW ---------- */
  /* Keep the automatic tags here the same as GROW_TAG_SELECTOR in Et2LayoutStrategies.ts: that
	 * is what gives their row a 1fr track, and without the stretch the item would sit at its own
	 * height inside the track it was just given.
	 */
  /* ---------- WIDGET CHANGES ---------- */
  /* Grow row sizing is set by Et2LayoutController strategy to target the actual grow row */
}

[layout="2-column"] [full],
[layout="2-column"] [span="all"],
[layout="2-column"] et2-tabbox,
[layout="2-column"] et2-nextmatch {
  grid-column: 1 / -1;
}

[layout="2-column"] * {
  min-height: 0;
}

[layout="2-column"] [grow],
[layout="2-column"] et2-tabbox,
[layout="2-column"] et2-nextmatch {
  align-self: stretch;
}

/* Base container */
/* Used when the grid layout has to collapse down to one column */
/* Both selectors name the same element, for the two kinds of host this mixin serves.
   * A shadow-DOM host (et2-template) exposes its wrapper through ::part(base).  A light-DOM
   * host - et2-customfields and friends render into light DOM so eTemplate can find the child
   * widgets they generate - has no shadow boundary for ::part() to cross, so there `part` is
   * just an ordinary attribute on an ordinary child, matched as one.
   */
[layout="edit"]::part(base),
[layout="edit"] > [part~="base"] {
  position: relative;
  display: grid;
  /* Auto-collapse to one column once a column would get too narrow */
  grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width, 26rem), 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  row-gap: var(--sl-spacing-small);
  column-gap: var(--sl-spacing-large, 1rem);
  height: 100%;
  min-height: 0;
}

[layout="edit"] {
  /* Do not allow fixed width labels to wrap normally - the one-column rules below
	 * override this once the container is too narrow to keep label and input side by side.
	 * Keep this selector no more specific than _grid-one-column's matching rule, or that
	 * override silently loses and the label never wraps.  et2-box/et2-hbox child variants
	 * are deliberately absent: .et2-label-fixed already matches them, so they would only
	 * add specificity.
	 */
}

[layout="edit"] *.et2-label-fixed::part(form-control) {
  flex-wrap: nowrap;
}

/* One-column mode: keep label/input stacking consistent for all widgets */
@container (max-width: calc(var(--column-min-width, 26rem) * 2 + var(--sl-spacing-large, 1rem))) {
  [layout="edit"]::part(base),
  [layout="edit"] > [part~="base"] {
    grid-template-columns: 1fr;
  }
}

/* Responsive fallback: collapse to 1 column on small screens */
/* var() is not fully supported yet, so this is the fallback */
@container (max-width: 600px) {
  [layout="edit"]::part(base),
  [layout="edit"] > [part~="base"] {
    grid-template-columns: 1fr;
  }
}

/* var() is not fully supported yet */
@container (max-width: var(--collapse-width, 600px)) {
  [layout="edit"]::part(base),
  [layout="edit"] > [part~="base"] {
    grid-template-columns: 1fr;
  }
}

/* A single column still has room for label and input side by side well below the point where
   * the columns collapse, so labels only stack above their fields once the container is really
   * narrow.  Relative units, so it follows the text size like --column-min-width does.
   */
@container (max-width: 36em) {
  [layout="edit"] *.et2-label-fixed::part(form-control) {
    flex-wrap: wrap;
  }
  [layout="edit"] *::part(form-control-label) {
    width: 100%;
    flex-basis: 100%;
    margin-right: 0;
  }
  [layout="edit"] *::part(form-control-input) {
    flex-basis: 100%;
  }
  [layout="edit"] *::part(form-control-help-text) {
    left: 0;
  }
  /* When titles break, we want to align widgets at the bottom of the hbox */
  [layout="edit"] et2-hbox::part(base) {
    align-items: flex-end;
  }
}

[layout="edit"] {
  height: 100%;
  container-type: inline-size;
  overflow-y: auto;
  overflow-x: hidden;
  /* ---------- FULL-WIDTH ROWS ---------- */
  /* A tabbox and a nextmatch take every column without being asked, the same way they take the
	 * leftover height below: half a dialog is not a useful width for either of them, so saying
	 * span="all" on every one would only be noise.
	 */
  /* ---------- REST-WIDTH ROWS ---------- */
  /* span="end" / span="*" stretch from their own column to the end of the line, which CSS
	 * cannot express: `grid-column-end: -1` on an auto-placed item is a span of one ending at
	 * the last line, so it would jump into the last column instead of filling the rest of its
	 * line.  Et2LayoutController measures the column it landed in and writes the real
	 * `grid-column` inline.
	 */
  /* ---------- DEFAULT COLUMN FLOW ---------- */
  /* ---------- VERTICAL GROW ---------- */
  /* Keep the automatic tags here the same as GROW_TAG_SELECTOR in Et2LayoutStrategies.ts: that
	 * is what gives their row a 1fr track, and without the stretch the item would sit at its own
	 * height inside the track it was just given.
	 */
  /* ---------- WIDGET CHANGES ---------- */
  /* Grow row sizing is set by Et2LayoutController strategy to target the actual grow row */
}

[layout="edit"] [full],
[layout="edit"] [span="all"],
[layout="edit"] et2-tabbox,
[layout="edit"] et2-nextmatch {
  grid-column: 1 / -1;
}

[layout="edit"] * {
  min-height: 0;
}

[layout="edit"] [grow],
[layout="edit"] et2-tabbox,
[layout="edit"] et2-nextmatch {
  align-self: stretch;
}

[layout="edit"] {
  /* Specific rules for edit layout */
}

[layout="edit"] [class*="header"],
[layout="edit"] [class*="footer"],
[layout="edit"] [class*="Header"],
[layout="edit"] [class*="Footer"] {
  /* Header / footer are automatically full width */
  grid-column: 1 / -1;
}

[layout="edit"] et2-appicon {
  flex-grow: 0;
}

[layout="edit"] et2-tabbox {
  min-height: 20em;
}