/* AtomPost — Design tokens
   Dark refined SaaS, warm amber accent
*/
:root {
  /* Surfaces — slightly warm dark */
  --bg-0: oklch(0.155 0.006 60); /* page bg */
  --bg-1: oklch(0.185 0.006 60); /* card surface */
  --bg-2: oklch(0.215 0.006 60); /* input / hover */
  --bg-3: oklch(0.255 0.006 60); /* raised hover */

  /* Text */
  --fg-0: oklch(0.98 0.005 60); /* primary */
  --fg-1: oklch(0.78 0.008 60); /* secondary */
  --fg-2: oklch(0.6 0.008 60); /* tertiary */
  --fg-3: oklch(0.45 0.008 60); /* quaternary */
  --fg-4: oklch(0.32 0.008 60); /* faintest */

  /* Borders */
  --line-1: oklch(1 0 0 / 0.06);
  --line-2: oklch(1 0 0 / 0.1);
  --line-3: oklch(1 0 0 / 0.16);

  /* Brand — warm amber */
  --acc: oklch(0.8 0.155 65);
  --acc-fg: oklch(0.2 0.05 60); /* text on accent */
  --acc-soft: oklch(0.8 0.155 65 / 0.12);
  --acc-line: oklch(0.8 0.155 65 / 0.3);

  /* Semantic */
  --ok: oklch(0.78 0.14 155);
  --ok-soft: oklch(0.78 0.14 155 / 0.13);
  --warn: oklch(0.82 0.14 85);
  --warn-soft: oklch(0.82 0.14 85 / 0.13);
  --err: oklch(0.72 0.18 25);
  --err-soft: oklch(0.72 0.18 25 / 0.14);
  --info: oklch(0.78 0.1 230);
  --info-soft: oklch(0.78 0.1 230 / 0.13);

  /* Elevation and shadow tokens */
  --shadow-1:
    0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px 0 oklch(0 0 0 / 0.4);
  --shadow-2: 0 0 0 1px oklch(1 0 0 / 0.03), 0 8px 24px -8px oklch(0 0 0 / 0.5);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --font-sans:
    'Geist', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:
    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ----------- base ----------- */
.ap {
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--fg-0);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}
.ap,
.ap * {
  box-sizing: border-box;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'zero', 'ss01';
  letter-spacing: -0.01em;
}

/* ----------- chrome ----------- */
.ap-card {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.ap-card--inset {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
}

/* ----------- inputs ----------- */
.ap-input,
.ap-select,
.ap-textarea {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font: 13px/1.4 var(--font-sans);
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
  width: 100%;
}
.ap-input::placeholder,
.ap-textarea::placeholder {
  color: var(--fg-3);
}
.ap-input:focus,
.ap-select:focus,
.ap-textarea:focus {
  outline: none;
  border-color: var(--acc-line);
  box-shadow: 0 0 0 3px var(--acc-soft);
  background: var(--bg-2);
}
.ap-input--lg {
  padding: 11px 13px;
  font-size: 14px;
  border-radius: var(--r-md);
}
.ap-input--sm {
  padding: 6px 8px;
  font-size: 12px;
}

.ap-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.ap-hint {
  font-size: 11.5px;
  color: var(--fg-2);
  margin-top: 4px;
}

/* ----------- buttons ----------- */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 var(--font-sans);
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s,
    transform 0.04s;
  white-space: nowrap;
}
.ap-btn:active {
  transform: translateY(0.5px);
}
.ap-btn--primary {
  background: var(--acc);
  color: var(--acc-fg);
  border-color: oklch(0.78 0.155 65);
  font-weight: 550;
}
.ap-btn--primary:hover {
  background: oklch(0.84 0.155 65);
}
.ap-btn--secondary {
  background: var(--bg-2);
  color: var(--fg-0);
  border-color: var(--line-2);
}
.ap-btn--secondary:hover {
  background: var(--bg-3);
  border-color: var(--line-3);
}
.ap-btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: transparent;
}
.ap-btn--ghost:hover {
  background: var(--bg-2);
  color: var(--fg-0);
}
.ap-btn--danger-ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line-2);
}
.ap-btn--danger-ghost:hover {
  color: var(--err);
  border-color: var(--err);
  background: var(--err-soft);
}
.ap-btn--lg {
  padding: 11px 16px;
  font-size: 14px;
}
.ap-btn--sm {
  padding: 5px 9px;
  font-size: 12px;
  gap: 4px;
}
.ap-btn--icon {
  padding: 7px;
}

/* ----------- pills ----------- */
.ap-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 11px/1 var(--font-sans);
  padding: 4px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  background: var(--bg-2);
  letter-spacing: 0.005em;
}
.ap-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fg-2);
  flex: none;
}
.ap-pill--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: oklch(0.78 0.14 155 / 0.25);
}
.ap-pill--ok .dot {
  background: var(--ok);
}
.ap-pill--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: oklch(0.82 0.14 85 / 0.25);
}
.ap-pill--warn .dot {
  background: var(--warn);
}
.ap-pill--err {
  color: var(--err);
  background: var(--err-soft);
  border-color: oklch(0.72 0.18 25 / 0.3);
}
.ap-pill--err .dot {
  background: var(--err);
}
.ap-pill--info {
  color: var(--info);
  background: var(--info-soft);
  border-color: oklch(0.78 0.1 230 / 0.25);
}
.ap-pill--info .dot {
  background: var(--info);
}
.ap-pill--acc {
  color: var(--acc);
  background: var(--acc-soft);
  border-color: var(--acc-line);
}
.ap-pill--acc .dot {
  background: var(--acc);
}

/* ----------- table ----------- */
.ap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.ap-table thead th {
  text-align: left;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  background: oklch(1 0 0 / 0.015);
}
.ap-table tbody td {
  padding: 5px;
  border-bottom: 1px solid var(--line-1);
  color: var(--fg-0);
  vertical-align: middle;
}
.ap-table tbody tr:last-child td {
  border-bottom: none;
}
.ap-table tbody tr:hover td {
  background: oklch(1 0 0 / 0.018);
}

/* ----------- kbd ----------- */
.ap-kbd {
  display: inline-block;
  padding: 1px 5px;
  font: 11px/1.4 var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--fg-1);
}

/* ----------- divider ----------- */
.ap-hr {
  height: 1px;
  background: var(--line-1);
  border: 0;
  margin: 0;
}

/* ----------- focus rings clean ----------- */
.ap *:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
  border-radius: 4px;
}

/* date inputs match dark */
.ap-input[type='datetime-local'],
.ap-input[type='date'],
.ap-input[type='time'] {
  color-scheme: dark;
}

/* checkbox */
.ap-check {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line-3);
  background: var(--bg-2);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.12s;
}
.ap-check:checked {
  background: var(--acc);
  border-color: var(--acc);
}
.ap-check:checked::after {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--acc-fg);
  border-bottom: 1.5px solid var(--acc-fg);
  transform: rotate(-45deg) translate(0.5px, -1px);
}

/* radio segmented */
.ap-seg {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.ap-seg button {
  padding: 6px 12px;
  font: 500 12.5px/1 var(--font-sans);
  background: transparent;
  color: var(--fg-1);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.ap-seg button.is-active {
  background: var(--bg-3);
  color: var(--fg-0);
  box-shadow: 0 0 0 1px var(--line-2);
}

/* tab bar */
.ap-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line-2);
}
.ap-tabs button {
  padding: 9px 12px;
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-2);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.ap-tabs button:hover {
  color: var(--fg-0);
}
.ap-tabs button.is-active {
  color: var(--fg-0);
  border-bottom-color: var(--acc);
}

/* logo mark */
.ap-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--acc) 0%, oklch(0.7 0.15 50) 100%);
  display: grid;
  place-content: center;
  color: var(--acc-fg);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.05em;
  position: relative;
}
.ap-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.25);
}

/* scrollbar */
.ap ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ap ::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
  border: 2px solid var(--bg-0);
}
.ap ::-webkit-scrollbar-thumb:hover {
  background: var(--line-3);
}
.ap ::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- sidebar hover helpers ---- */
.ap-side-link:hover {
  background: var(--bg-2);
  color: var(--fg-0);
}
.ap-side-client:hover {
  background: var(--bg-2);
}

/* ---- utility: hidden (used by JS that toggles visibility) ---- */
.hidden {
  display: none !important;
}