/* Editorial Operator — custom layer */

:root {
  color-scheme: dark;
  --bg:        #0a0a0a;
  --ink:       #fafaf7;
  --amber:     #d97706;
  --amber-2:   #f59e0b;
  --mute:      #6b7280;
  --line:      #262626;
  --line-2:    #404040;
  --danger:    #dc2626;
  --ok:        #65a30d;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: -0.02em;
}

/* Subtle scanline + grain — the texture anchor */
.op-grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 0%, rgba(217, 119, 6, 0.05), transparent 60%);
  z-index: 1;
  mix-blend-mode: screen;
}

/* Hairline borders */
.hl       { border-color: var(--line); }
.hl-2     { border-color: var(--line-2); }

/* Tag pill (status, labels) */
.op-tag {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
}
.op-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--amber); }
.op-tag.ok  .dot { background: var(--ok); }
.op-tag.err .dot { background: var(--danger); }

/* Hover underline — editorial */
.op-link {
  position: relative;
  display: inline-block;
}
.op-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--amber);
  transition: right .25s ease;
}
.op-link:hover::after { right: 0; }

/* Form inputs */
.op-input {
  background: #ffffff;
  border: 1px solid var(--line-2);
  color: #000000;
  padding: .75rem 1rem;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .02em;
  color-scheme: light;
}
.op-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: inset 0 -1px 0 var(--amber);
}
.op-input::placeholder { color: #6b7280; }
.op-input:-webkit-autofill,
.op-input:-webkit-autofill:hover,
.op-input:-webkit-autofill:focus,
.op-input:-webkit-autofill:active {
  -webkit-text-fill-color: #000000 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: #000000 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Password reveal toggle */
.op-pw-wrap { position: relative; }
.op-pw-wrap .op-input { padding-right: 3.25rem; }
.op-pw-toggle {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--mute);
  padding: .25rem .5rem;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.op-pw-toggle:hover { color: var(--amber); border-color: var(--amber); }

.op-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--ink); color: var(--bg);
  padding: .75rem 1.25rem;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.op-btn:hover { background: var(--amber); color: var(--bg); border-color: var(--amber); }

.op-btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}
.op-btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

/* Section number gutter */
.op-marker {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute);
}

/* Scrollbar — operator-grade */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* Selection */
::selection { background: var(--amber); color: var(--bg); }