/* The configurator page (njreid/woodwerx#23). Layout only: colours and spacing are the
   tokens in kj.css, which every page links; this file never redefines a token. */

/* The whole configurator sits in a padded, full-width container (.wrap gives the side
   gutters), so the embedded viewer never touches the window edge. */
.kj-configure-page {
  max-width: none;
  padding-top: 4px;
  padding-bottom: 16px;
}

.kj-configure {
  margin-top: 12px;
  position: relative;
}

/* configure.js appends this status line (`savedNotice`) after the iframe, for "Saving stock
   decisions…"/"…saved"/restore-failure messages — a plain, unstyled `<p>`. Left as an in-flow
   sibling of the iframe, it inherits kj.css's generic paragraph rule (`margin: 0 0 1em`)
   unconditionally, even while empty (the common case: it only gets text once a Stock-room
   plan changes, or a `?project=` restore fails) — and even styled, ANY in-flow height here
   sits below `sizeFrame()`'s own budget (configure.js), which sizes only the iframe to fill
   the viewport below *its* own top and has no notion of a trailing sibling's height. Either
   way the outer page's total height can exceed the viewport, scrolling the site header's own
   nav and the viewer's room-tab bar/toolbar out of view above the fold (issue #646) — not the
   iframe's own content, which `sizeFrame()` already fits exactly. Taken out of flow instead,
   the same way `.kj-viewer-loading` already overlays without affecting `.kj-configure`'s
   height (both rely on `.kj-configure`'s own `position: relative`): this status line can
   never grow the page, whether it is empty or showing a message. */
#kj-manufacturing-save-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}
#kj-manufacturing-save-state:empty {
  display: none;
}

.kj-configure-frame {
  width: 100%;
  /* configure.js measures its own distance from the top of the viewport (header height
     isn't a fixed value kj.css exposes) and sets this on load/resize; the vh fallback only
     matters before that first measurement, or with JS disabled. */
  height: var(--kj-frame-h, min(80vh, 720px));
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* Phones: the model is the page. One-row header, no gutter/border/radius around the viewer,
   and the frame fills what is left of the viewport (configure.js sets --kj-frame-h). */
@media (max-width: 640px) {
  body:has(.kj-configure-page) .kj-header .wrap { flex-wrap: nowrap; gap: 8px; padding-top: 4px; padding-bottom: 4px; }
  body:has(.kj-configure-page) .kj-wordmark-logo { height: 36px; width: auto; }
  body:has(.kj-configure-page) .kj-header nav { order: 0; flex-basis: auto; flex-wrap: nowrap; margin-left: auto; gap: 0; }
  body:has(.kj-configure-page) .kj-header nav a:not(:first-child),
  body:has(.kj-configure-page) #theme-toggle-label { display: none; }
  body:has(.kj-configure-page) .kj-profile { margin-left: 0; }
  .kj-configure-page { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }
  .kj-configure { margin-top: 0; }
  .kj-configure-actions, .kj-configure-save-form, #project-create-errors { padding-left: 16px; padding-right: 16px; }
  .kj-configure-frame { min-height: 0; border: 0; border-radius: 0; display: block; }
}
/* A phone on its side has no height to spare: the site header goes and the model gets it all. */
@media (max-height: 500px) and (orientation: landscape) {
  body:has(.kj-configure-page) .kj-header { display: none; }
  .kj-configure-page { padding: 0; }
  .kj-configure { margin-top: 0; }
  .kj-configure-frame { min-height: 0; border: 0; border-radius: 0; display: block; }
}

.kj-configure-actions[hidden] { display: none; }

.kj-configure-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* A native `<details>`/`<summary>` menu — the same no-framework pattern the viewer's own
   `#diag` groups use (viewer/index.html's `details.group`) — rather than a bespoke
   JS-driven dropdown; `summary` alone is the toggle, no listener required. */
.kj-dropdown {
  position: relative;
}

.kj-dropdown > summary {
  list-style: none;
}

.kj-dropdown > summary::-webkit-details-marker {
  display: none;
}

.kj-dropdown > summary::after {
  content: " \25BE";
}

.kj-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px;
}

.kj-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.kj-dropdown-item:hover:not(:disabled) {
  background: var(--surface-2);
}

.kj-dropdown-item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.kj-dropdown-note {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 4px 8px 2px;
}

/* Issue #622 Task 6: the "G-code" export item plus its inline machine picker (the plan's
   own addition — the spec never designed this UI). The button keeps the same disabled gate
   every other export item follows; the select beside it is always enabled. */
.kj-dropdown-gcode {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kj-dropdown-gcode .kj-dropdown-item {
  flex: 1;
}

.kj-dropdown-select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

/* `#kj-gcode-result` reuses `.kj-notice`/`.kj-notice--error` (kj.css); only its own
   placement is set here. */
#kj-gcode-result {
  margin: 8px 0;
}

.kj-configure-note {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

/* "Save to project" is a modal over the page: Datastar's data-show toggles the inline
   display, so this only sets the layout it shows with. */
.kj-configure-save-form {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kj-configure-save-actions {
  display: flex;
  gap: 8px;
}

.kj-configure-save-form .kj-field {
  margin-bottom: 8px;
}

.kj-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.kj-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.kj-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent-strong);
}

.kj-notice {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 14px;
}

.kj-notice--error {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.kj-notice code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: monospace;
}

/* The assembly Plan page on a phone is an app, not a document: the shell is exactly the viewport
   (dvh follows the mobile browser bars / the installed PWA's window), nothing on the host page
   scrolls or rubber-bands, and the footer is out of the way. Only panels inside the viewer's
   iframe scroll. Scoped to .kj-plan-app: the catalogue configurator keeps its save form below
   the frame and still needs to scroll. */
@media (max-width: 640px) {
  html:has(.kj-plan-app), body:has(.kj-plan-app) { overscroll-behavior: none; }
  body:has(.kj-plan-app) {
    height: 100vh; height: 100dvh; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body:has(.kj-plan-app) .kj-header { flex: none; }
  body:has(.kj-plan-app) .kj-footer { display: none; }
  .kj-plan-app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .kj-plan-app .kj-configure { flex: 1 1 auto; min-height: 0; }
  .kj-plan-app .kj-configure-frame { height: 100%; }
}