/* Isthafa deck: inline editing affordances, save status and the edit-key prompt. */
body.can-edit [data-field]:not([hidden]) { cursor: text; border-radius: 4px; }
body.can-edit [data-field]:not([hidden]):hover,
body.can-edit.show-fields [data-field]:not([hidden]) {
  outline: 1px dashed color-mix(in oklab, var(--lagoon) 55%, transparent);
  outline-offset: 3px;
}
[data-field].is-editing {
  outline: 2px solid var(--lagoon) !important;
  outline-offset: 4px;
  background: color-mix(in oklab, var(--lagoon) 9%, transparent);
  caret-color: var(--lagoon);
  cursor: text;
}
[data-field].is-editing::selection, [data-field].is-editing *::selection { background: color-mix(in oklab, var(--lagoon) 35%, transparent); }

.hud-status {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  white-space: nowrap;
}
.hud-status.show { opacity: 1; }
.hud-status[data-state="saved"], .hud-status[data-state="unlocked"] { color: var(--lagoon); }
.hud-status[data-state="offline"] { color: var(--coral); }
.hud-status[data-state="locked"] { color: var(--sand); }
.hud-status[data-state="saving"]::after { content: "…"; }

.btn-icon[data-action="edit"][aria-pressed="true"] { color: var(--bg); background: var(--sand); border-color: var(--sand); }

.key-popover {
  position: fixed;
  top: calc(var(--hud-h) + 0.5rem);
  right: var(--gutter);
  z-index: 90;
  width: min(380px, calc(100% - 2rem));
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--lagoon) 40%, var(--line-strong));
  background: oklch(14% 0.022 250 / 0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -30px oklch(0% 0 0 / 0.9);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.key-popover.open { opacity: 1; transform: none; }
.key-popover .label { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--lagoon); }
.key-popover p { margin-top: 0.35rem; }
.key-popover form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.key-popover input {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.key-popover input:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
.primary-btn {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--lagoon);
  color: var(--bg);
  font-weight: 700;
  font-size: var(--text-sm);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.primary-btn:hover { background: color-mix(in oklab, var(--lagoon) 85%, white); }
.primary-btn:active { transform: scale(0.97); }
.primary-btn:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
form.busy .primary-btn { opacity: 0.6; pointer-events: none; }
.key-popover .error { color: var(--coral); font-size: var(--text-xs); margin-top: 0.5rem; min-height: 1em; }
.key-popover .close-popover { position: absolute; top: 0.6rem; right: 0.6rem; width: 2rem; height: 2rem; }

.ue-legend .swatch.cogs { background: var(--coral); }
.ue-legend .swatch.gp { background: var(--lagoon); }
.donut .seg { stroke: var(--lagoon-dim); }
.mult-value { display: inline; }

@media print {
  .hud-status, .key-popover { display: none !important; }
  [data-field] { outline: none !important; }
}