/* settings-kit.css — shared design language for AI-prompt settings across
 * Platypus apps. Everything is namespaced .pk- and themed via CSS variables
 * so each app can tint it to its own palette by overriding :root values.
 */
:root {
  --pk-accent: #0e7a5f;          /* platypus green — override per app */
  --pk-bg: #ffffff;
  --pk-fg: #1a1a1a;
  --pk-muted: #6b7280;
  --pk-border: #d9d9d9;
  --pk-surface: #f6f6f4;
  --pk-danger: #b3382c;
  --pk-radius: 10px;
  --pk-font: inherit;            /* inherit the app's own typeface */
  --pk-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pk-bg: #1d1f21; --pk-fg: #ececec; --pk-muted: #9aa1a9;
    --pk-border: #3a3d41; --pk-surface: #26282b;
  }
}

/* --- cog button ---------------------------------------------------------- */
.pk-cog {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: transparent; color: var(--pk-muted); cursor: pointer;
  transition: color .15s, transform .25s;
}
.pk-cog:hover { color: var(--pk-accent); transform: rotate(45deg); }
.pk-cog svg { width: 22px; height: 22px; }

/* --- modal ---------------------------------------------------------------- */
.pk-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 9000;
}
.pk-overlay.pk-hidden { display: none; }
.pk-modal {
  font-family: var(--pk-font);
  background: var(--pk-bg); color: var(--pk-fg);
  width: min(920px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  border-radius: var(--pk-radius); box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.pk-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--pk-border);
}
.pk-modal-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.pk-close {
  border: none; background: transparent; color: var(--pk-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.pk-close:hover { color: var(--pk-fg); }

/* --- tabs ------------------------------------------------------------------ */
.pk-tabs {
  display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--pk-border);
  overflow-x: auto; scrollbar-width: thin;
}
.pk-tab {
  border: none; background: transparent; color: var(--pk-muted);
  padding: 10px 14px; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pk-tab:hover { color: var(--pk-fg); }
.pk-tab.pk-active { color: var(--pk-accent); border-bottom-color: var(--pk-accent); font-weight: 600; }
.pk-panels { overflow-y: auto; padding: 18px 20px; flex: 1; }
.pk-panel.pk-hidden { display: none; }

/* --- prompt editor field ---------------------------------------------------- */
.pk-field { margin-bottom: 20px; }
.pk-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pk-field label { font-weight: 600; font-size: 13.5px; display: block; margin-bottom: 2px; }
.pk-field .pk-desc { font-size: 12.5px; color: var(--pk-muted); margin: 0 0 6px; }
.pk-field .pk-count { font-size: 11.5px; color: var(--pk-muted); font-family: var(--pk-mono); }
.pk-textarea {
  width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical;
  padding: 10px 12px; font-family: var(--pk-mono); font-size: 12.5px; line-height: 1.5;
  color: var(--pk-fg); background: var(--pk-surface);
  border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 4px);
}
.pk-textarea:focus { outline: 2px solid var(--pk-accent); outline-offset: -1px; }

/* --- model picker ------------------------------------------------------------ */
.pk-model { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.pk-model label { font-weight: 600; font-size: 13.5px; }
.pk-select {
  appearance: none; width: 100%; box-sizing: border-box;
  padding: 8px 34px 8px 12px; font-size: 13.5px; color: var(--pk-fg);
  background: var(--pk-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 4px);
  cursor: pointer;
}
.pk-select:focus { outline: 2px solid var(--pk-accent); outline-offset: -1px; }
.pk-model .pk-hint { font-size: 11.5px; color: var(--pk-muted); }

/* --- footer / actions ---------------------------------------------------------- */
.pk-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--pk-border);
}
.pk-status { margin-right: auto; font-size: 12.5px; color: var(--pk-muted); }
.pk-status.pk-error { color: var(--pk-danger); }
.pk-btn {
  border: 1px solid var(--pk-border); background: var(--pk-surface); color: var(--pk-fg);
  padding: 8px 18px; font-size: 13.5px; border-radius: 999px; cursor: pointer;
}
.pk-btn:hover { border-color: var(--pk-muted); }
.pk-btn-primary { background: var(--pk-accent); border-color: var(--pk-accent); color: #fff; font-weight: 600; }
.pk-btn-primary:hover { filter: brightness(1.08); }
.pk-btn:disabled { opacity: .55; cursor: default; }