/* ============================================================
   In-page editor furniture — PORTED FROM NESTING TREE
   (src/styles/global.css, the :root[data-nt-mode] block onward)
   ------------------------------------------------------------
   FROZEN. Geometry, z-indexes, transitions and the mode scoping are the
   original, unchanged.

   TWO THINGS ABOUT THIS FILE.

   1. IT LIVES IN public/, NOT src/styles/. Nesting Tree carried it
      inside its main stylesheet. Here it is served as its own file and
      linked from BaseLayout, for one reason: this is the editor's
      toolbar, and the editor is not the design. `src/` is under two
      build gates — no hex literal, no border-radius — that exist to
      keep the approved frame honest, and a pill-shaped button belonging
      to a piece of tooling has no business being weighed against them.
      Keeping it out of src/ keeps the gates meaningful instead of
      forcing an exception into them.

   2. THE COLOURS ARE THE ONE REWRITE. The original referenced Nesting
      Tree's palette variables — --color-olive, --color-stone,
      --color-card, --color-line, --color-mutedlight. None of them exist
      in this repo, so the file would simply have rendered without
      colour. Each is repointed at the nearest K.D. token, with a
      literal fallback so the furniture still draws if this file is ever
      loaded before the site stylesheet. Nothing else changed.

   The `nt-` prefix throughout matches src/scripts/inline-edit.js, which
   is frozen. Renaming it here would break the pairing.
   ============================================================ */

/* Everything below is scoped to :root[data-nt-mode] — the attribute the
   "Edit text" button sets. With the mode off, an editable element is
   styled exactly like any other text on the page, because a reader is
   not editing and should see no trace of the machinery. */

/* Every editable run is outlined while the mode is on, so what can be
   changed is visible rather than something you discover by accident. */
:root[data-nt-mode] [data-nt-editable] {
  outline: 1px dashed rgba(104, 166, 160, 0.55);
  outline-offset: 3px;
  cursor: text;
}

/* Hover emphasis stays desktop-only: on a touch screen :hover sticks
   after a tap, so every tapped paragraph would keep the stronger box
   around it for the rest of the visit. */
@media (hover: hover) and (pointer: fine) {
  :root[data-nt-mode] [data-nt-editable]:hover {
    outline-color: rgba(104, 166, 160, 0.95);
  }
}

/* While editing we take over the long press, so iOS must not also raise
   its callout. Scoped to the mode: with editing off, long-press has to
   go back to selecting text, which is what it is for. */
:root[data-nt-mode] [data-nt-editable] {
  -webkit-touch-callout: none;
}

[data-nt-editing] {
  outline: 2px solid var(--kd-teal, #68a6a0);
  outline-offset: 3px;
  cursor: text;
  background-color: rgba(215, 248, 221, 0.16);
}

/* ---- Toolbar ----
   The bar is what is positioned; the pills inside it are in flow, so a
   second button sits beside the first instead of on top of it. */
.nt-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  display: flex;
  flex-direction: row-reverse; /* the mode button stays nearest the corner */
  align-items: center;
  gap: 8px;
}

/* Undo is only meaningful once you are editing, so it appears with the
   mode and is not clutter for a reader. */
.nt-bar .nt-pill:not(.nt-pill-mode) {
  display: none;
}
:root[data-nt-mode] .nt-bar .nt-pill {
  display: block;
}

/* The mode button is the one thing a reader might see, so it sits
   quieter than the rest until pointed at. */
.nt-pill {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(30, 43, 48, 0.82);
  color: var(--kd-mist, #dbe5e7);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(30, 43, 48, 0.28);
  opacity: 0.55;
  transition: opacity 0.25s ease, background-color 0.25s ease;
  cursor: pointer;
}
.nt-pill:hover,
.nt-pill:focus-visible {
  opacity: 1;
  background-color: var(--kd-ink-deep, #1e2b30);
}

/* Editing on: the button stops being a suggestion and reads as state. */
:root[data-nt-mode] .nt-pill-mode {
  opacity: 1;
  background-color: var(--kd-teal, #68a6a0);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--kd-ink-deep, #1e2b30);
}

/* ---- Toast ---- */
.nt-toast {
  position: fixed;
  right: 16px;
  bottom: 64px;
  z-index: 9999;
  max-width: min(24rem, calc(100vw - 32px));
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(44, 58, 64, 0.18);
  background-color: var(--kd-mist, #dbe5e7);
  color: var(--kd-ink, #2c3a40);
  box-shadow: 0 8px 28px rgba(30, 43, 48, 0.26);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nt-toast.is-up {
  opacity: 1;
  transform: none;
}

/* ---- Per-element version menu ---- */
.nt-menu {
  position: absolute;
  z-index: 9999;
  width: min(20rem, calc(100vw - 24px));
  padding: 0.35rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  border: 1px solid rgba(44, 58, 64, 0.18);
  background-color: var(--kd-mist, #dbe5e7);
  box-shadow: 0 12px 32px rgba(30, 43, 48, 0.28);
}
.nt-menu-head {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kd-slate, #8a96a6);
  padding: 0.4rem 0.5rem 0.3rem;
}
.nt-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.5rem;
  font-size: 13px;
  line-height: 1.35;
  color: var(--kd-ink, #2c3a40);
  cursor: pointer;
}
.nt-menu-item:hover:not(:disabled) {
  background-color: rgba(44, 58, 64, 0.08);
}
.nt-menu-item:disabled {
  cursor: default;
  color: var(--kd-slate, #8a96a6);
}
.nt-menu-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-menu-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--kd-slate, #8a96a6);
}

/* ---- Job postings on /careers (src/scripts/careers-editor.js) ----
   Added 2026-09-29; not part of the Nesting Tree port. The add card and
   the remove buttons exist for a signed-in editor only, and show only
   while the mode is on, like Undo. */
.nt-jobs-add,
.nt-jobs-remove,
.nt-jobs-expiry {
  display: none;
}
:root[data-nt-mode] .nt-jobs-expiry {
  display: block;
  margin-top: 20px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  color: var(--kd-slate-2, #5b6672);
}
:root[data-nt-mode] .nt-jobs-add {
  display: block;
}
:root[data-nt-mode] .nt-jobs-remove {
  display: inline-block;
}

.nt-jobs-add {
  border: 2px dashed var(--kd-teal, #68a6a0);
  padding: 32px;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--kd-ink, #2c3a40);
}
.nt-jobs-add form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nt-jobs-head {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nt-jobs-add label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.nt-jobs-add label span {
  font-weight: 400;
  color: var(--kd-slate, #8a96a6);
}
.nt-jobs-add input,
.nt-jobs-add select {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 10px;
  border: 1px solid rgba(44, 58, 64, 0.3);
  background-color: #fff;
  color: var(--kd-ink, #2c3a40);
  width: 100%;
}
.nt-jobs-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kd-mint-2, #2e6b39);
}
.nt-jobs-note {
  font-size: 12px;
  color: var(--kd-slate, #8a96a6);
}
.nt-jobs-error {
  font-size: 13px;
  color: #a4312a;
}
.nt-jobs-submit,
.nt-jobs-remove {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 14px;
  cursor: pointer;
}
.nt-jobs-submit {
  align-self: flex-start;
  background-color: var(--kd-teal, #68a6a0);
  color: var(--kd-ink-deep, #1e2b30);
}
.nt-jobs-remove {
  margin-top: 20px;
  border: 1px solid #a4312a;
  color: #a4312a;
  background: transparent;
}
.nt-jobs-submit:disabled,
.nt-jobs-remove:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Text blocks on project pages (src/scripts/project-blocks-editor.js) ----
   Added 2026-10-08. The add card reuses .nt-jobs-add above; these are
   its textarea and kind switch, and the move/remove buttons on each
   added block — shown, like the card, only while the mode is on. */
.nt-blocks-add textarea {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 10px;
  border: 1px solid rgba(44, 58, 64, 0.3);
  background-color: #fff;
  color: var(--kd-ink, #2c3a40);
  width: 100%;
  resize: vertical;
}
.nt-blocks-kind {
  display: flex;
  gap: 20px;
}
.nt-blocks-add .nt-blocks-kind label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.nt-blocks-tools {
  display: none;
}
:root[data-nt-mode] .nt-blocks-tools {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
:root[data-nt-mode] [data-block] {
  outline: 1px dashed var(--kd-teal, #68a6a0);
  outline-offset: 6px;
}
.nt-blocks-tools button {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  cursor: pointer;
  border: 1px solid var(--kd-teal, #68a6a0);
  color: var(--kd-ink, #2c3a40);
  background: #fff;
}
.nt-blocks-tools button:last-child {
  border-color: #a4312a;
  color: #a4312a;
}
.nt-blocks-tools button:disabled {
  opacity: 0.35;
  cursor: default;
}

@media print {
  .nt-bar,
  .nt-pill,
  .nt-toast,
  .nt-menu,
  .nt-blocks-tools,
  .nt-jobs-add,
  .nt-jobs-remove {
    display: none !important;
  }
}

/* ---- Gallery manager link (added 3 Oct 2026) ----
   On pages that show photographs, edit mode adds a link to the studio
   gallery manager (/studio/gallery) in the opposite corner to the
   editor bar. Gallery captions are not edited in the page any more —
   see src/components/GalleryGrid.astro — so this is where they are. */
.nt-gallery-manage {
  display: none;
}
:root[data-nt-mode] .nt-gallery-manage {
  display: block;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: var(--kd-teal, #68a6a0);
  color: var(--kd-ink-deep, #1e2b30);
  box-shadow: 0 4px 16px rgba(30, 43, 48, 0.28);
  text-decoration: none;
}

/* ---- Links in edit mode (added 19 Oct 2026, src/scripts/inline-edit.js) ----
   With the mode on no link navigates, so the copy in it can be clicked
   and edited. A card's stretched link (an empty <a class="absolute
   inset-0"> over the whole card) lets clicks through to the text under
   it, and a linked card or list item gets a small "Open" button,
   <kd-open>, for following the link on purpose. Square, Inter, ink with
   mint, so it reads the same on a dark band, a light one or a photograph.
   Nothing here applies with the mode off. */
:root[data-nt-mode] a[href].absolute.inset-0 {
  pointer-events: none;
}
kd-open {
  display: none;
}
:root[data-nt-mode] kd-open {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 0;
  border: 1px solid var(--kd-mint, #d7f8dd);
  background-color: var(--kd-ink, #2c3a40);
  color: var(--kd-mint, #d7f8dd);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
:root[data-nt-mode] kd-open:hover,
:root[data-nt-mode] kd-open:focus-visible {
  background-color: var(--kd-mint, #d7f8dd);
  color: var(--kd-ink, #2c3a40);
}
/* On a card: its top right corner, over the picture or the ink. */
:root[data-nt-mode] kd-open.nt-open-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}
/* Beside a link in a list (the works on a client card). */
:root[data-nt-mode] kd-open.nt-open-inline {
  margin-left: 8px;
  vertical-align: middle;
}
/* At the right end of a row-shaped link (the steel ledger), in room
   made for it, so it covers nothing. */
:root[data-nt-mode] .nt-open-host {
  position: relative;
  padding-right: 64px;
}
:root[data-nt-mode] kd-open.nt-open-row {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}


/* ============================================================
   Launch mode (4 Nov 2026): public/launch-badges.js, signed-in editors only.
   A small chip on what launch mode takes off the public site. Not scoped to
   the mode: a signed-in browser always draws everything, so it always says
   which of it the public does not get.
   ============================================================ */
.nt-launch-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 3px 8px;
  background: var(--kd-ink-deep, #1e2b30);
  border: 1px solid var(--kd-mint, #d7f8dd);
  color: var(--kd-mint, #d7f8dd);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.nt-launch-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 88px;
  z-index: 40;
  padding: 8px 16px;
  background: var(--kd-ink-deep, #1e2b30);
  border-bottom: 1px solid var(--kd-mint, #d7f8dd);
  color: var(--kd-mint, #d7f8dd);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* ============================================================
   Launch views (4 Nov 2026): the two buttons in the floating bar, and the
   yellow marking of "This is what was removed". public/launch-badges.js,
   signed-in editors only. Square, not pills: only the frozen port above is
   rounded. The yellow is not a site colour on purpose, so it can never be
   mistaken for part of the page, and it lives only here.
   ============================================================ */
/* Out of the bar's flow, beside it: the bar is often on screen before this
   arrives, and growing it would count as a layout shift. No transform here, or
   the phone panel's position: fixed would be measured from this box. */
.nt-lv {
  --nt-yellow: #ffd60a;
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 8px);
  width: max-content;
  display: flex;
  align-items: center;
  font-family: var(--font-sans, system-ui, sans-serif);
}
/* The bar of its own the buttons use until the editor's arrives. */
.nt-lv-own {
  min-height: 32px;
}
.nt-lv-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nt-lv-say {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--kd-mint, #d7f8dd);
  background-color: var(--kd-ink-deep, #1e2b30);
  color: var(--kd-mist, #dbe5e7);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.nt-lv-btn,
.nt-lv-fold {
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--kd-mint, #d7f8dd);
  border-radius: 0;
  background-color: var(--kd-ink-deep, #1e2b30);
  color: var(--kd-mint, #d7f8dd);
  cursor: pointer;
}
.nt-lv-btn:hover,
.nt-lv-fold:hover {
  background-color: var(--kd-ink, #2c3a40);
}
.nt-lv-btn[aria-pressed="true"] {
  background-color: var(--kd-mint, #d7f8dd);
  color: var(--kd-ink-deep, #1e2b30);
}
.nt-lv-btn[data-view="removed"][aria-pressed="true"] {
  border-color: var(--nt-yellow);
  background-color: var(--nt-yellow);
}
/* Two rings, so the focus shows on a dark band and a light one alike. */
.nt-lv-btn:focus-visible,
.nt-lv-fold:focus-visible {
  outline: 2px solid var(--kd-ink-deep, #1e2b30);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--kd-mint, #d7f8dd);
}
.nt-lv-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.nt-lv-fold {
  display: none;
}
:root[data-nt-launch-view="removed"] .nt-lv-fold {
  border-color: var(--nt-yellow);
  color: var(--nt-yellow);
}

/* In either view "Edit text" stays in the bar, switched off. */
:root[data-nt-launch-view] .nt-pill-mode {
  opacity: 0.45;
  background-color: rgba(30, 43, 48, 0.82);
  cursor: not-allowed;
}

/* Launch preview is what a visitor gets: none of the editor's furniture but
   the bar itself. */
:root[data-nt-launch-view="preview"] [data-nt-ui]:not(.nt-bar) {
  display: none !important;
}

/* Too narrow for a row beside "Edit text" (the nav folds at the same width):
   one button, which opens the rest above the bar. In edit mode "Undo" and
   "Done editing" need that room. */
@media (max-width: 1079px) {
  .nt-lv-fold {
    display: block;
  }
  .nt-lv-panel {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 56px;
    flex-direction: column;
    align-items: stretch;
    width: min(18rem, calc(100vw - 32px));
  }
  .nt-lv.is-open .nt-lv-panel {
    display: flex;
  }
  .nt-lv-btn {
    white-space: normal;
    text-align: left;
  }
  :root[data-nt-mode] .nt-lv {
    display: none;
  }
}

/* Outline and box-shadow only: nothing on the page moves. An inset shadow
   paints over the item's own background and under its text, so the text keeps
   its colour; one layer only, where a card sits inside a section that goes. */
@media screen {
  .nt-launch-gone {
    outline: 3px solid #ffd60a !important;
    outline-offset: 0 !important;
    box-shadow: inset 0 0 0 100vmax rgba(255, 214, 10, 0.2) !important;
  }
  .nt-launch-gone .nt-launch-gone {
    box-shadow: none !important;
  }
  /* The one text colour the yellow would dull: fog on a dark band. */
  .nt-launch-gone .text-kd-fog {
    color: var(--kd-mist, #dbe5e7) !important;
  }
}
.nt-launch-strip {
  position: fixed;
  left: 0;
  right: 0;
  top: 88px;
  z-index: 40;
  padding: 8px 16px;
  background-color: #ffd60a;
  color: var(--kd-ink-deep, #1e2b30);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}