/* UpdateFormatter Styles
 *
 * Standalone stylesheet. All design tokens are defined on :root below using
 * the same variable names as the main site, so this file works on its own
 * AND can be themed by loading it after a site stylesheet that defines the
 * same variables (later definitions win).
 *
 * Design notes (monkeytype-inspired, function first):
 *   - ONE accent color (--color-primary, ice blue). It marks whatever
 *     matters right now: the active view, the main action of each screen,
 *     focus, and the current log. Nothing else is allowed to use it.
 *   - Everything else is a cool gray ramp. Secondary controls are quiet
 *     gray "ghost" buttons that only speak up on hover; destructive actions
 *     stay gray too and merely turn red on hover, so the page never looks
 *     busy.
 *   - Dark, but mid-dark: gray canvas rather than black, bright cool-white
 *     text for contrast — easy on the eyes without being sleepy.
 *   - Glow is the emphasis multiplier: a faint ambient wash behind the
 *     page, and a soft halo on accent actions and focused fields. Always
 *     subtle, never neon.
 *   - Fonts: Lexend Deca for UI (built for reading ease), JetBrains Mono
 *     for the paste-ready output panes.
 */

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
 * Design tokens
 * ============================================================ */
:root {
  /* The single emphasis color — and the dark ink used on top of it.
     * --color-primary-rgb exists so glows can be built as rgba() tints. */
  --color-primary: #7dd3fc;
  --color-primary-bright: #a9e4ff; /* gradient top edge on accent buttons */
  --color-primary-rgb: 125, 211, 252;
  --color-on-primary: #0e1b24;

  /* Only non-gray besides the accent; used solely for destructive hover. */
  --color-error: #d95d69;

  /* Cool gray ramp (darkest to lightest) */
  --color-bg-page: #2b2e33; /* canvas */
  --color-bg-primary: #26292d; /* cards, modals */
  --color-bg-secondary: #1f2226; /* inputs, section rows, output panes */
  --color-bg-raised: #383c42; /* ghost buttons */
  --color-bg-raised-hover: #444951;
  --color-bg-overlay: rgba(0, 0, 0, 0.65);

  --color-text-primary: #e3e6e9; /* bright cool-white */
  --color-text-secondary: #aeb6be;
  --color-text-muted: #6d757e;

  --color-border-light: #3a3f45;
  --color-border-medium: #4c535b;

  /* Glow + gradients — the only decoration in the system. Keep faint. */
  --glow-primary: 0 0 14px rgba(var(--color-primary-rgb), 0.25);
  --glow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
  --gradient-card: linear-gradient(180deg, #2a2d32 0%, #25282c 100%);
  --gradient-primary: linear-gradient(
    180deg,
    var(--color-primary-bright) 0%,
    var(--color-primary) 100%
  );

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Radii */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Shadows */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* Misc */
  --transition-normal: all 0.15s ease;
  --z-fixed: 100;

  /* Fonts */
  --font-ui: "Lexend Deca", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
 * Page layout (replaces the old Navbar/PageHero/Content/ContentBox
 * React components with plain elements)
 * ============================================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Faint ambient accent glow bleeding in from the top of the canvas. */
  background: radial-gradient(
      ellipse 80% 40% at 50% -10%,
      rgba(var(--color-primary-rgb), 0.07),
      transparent 70%
    )
    var(--color-bg-page);
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: 400; /* 300 reads too thin on dark backgrounds */
  line-height: 1.55;
}

/* The accent owns emphasis, including text selection and focus. */
::selection {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Quiet scrollbars that match the theme. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-medium) transparent;
}

/* The header is a wordmark bar, not part of the tool: title sits to the
 * side like a logo, subtitle trails it in muted text. */
.page-hero {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

.page-hero-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* A single accent mark on the wordmark — the page's one decoration. */
.page-hero-title::after {
  content: "_";
  color: var(--color-primary);
  text-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.6);
}

.page-hero-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md) 6rem; /* bottom padding clears the corner buttons */
}

.content-box {
  background: var(--gradient-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.section-heading {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* View panels are toggled with the hidden attribute; make sure no display
 * rule can override it. */
[hidden] {
  display: none !important;
}

/* ============================================================
 * Tool container — the switcher and all its panels share ONE card
 * surface, so tabs + content clearly read as a single section.
 * ============================================================ */
.tool {
  background: var(--gradient-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-xl);
  overflow: clip; /* keep children inside the rounded corners */
}

/* Panels supply the surface padding themselves. */
.tool > [data-view] {
  padding: var(--spacing-lg);
}

/* Inside the tool, the old standalone card chrome is neutralized —
 * the .tool surface replaces it. */
.tool .content-box {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

/* ============================================================
 * View switcher — the tool's tab bar; the active tab is the only
 * accent-colored text on screen.
 * ============================================================ */
.view-switcher {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.view-switcher-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  transition: var(--transition-normal);
}

.view-switcher-btn:hover {
  color: var(--color-text-primary);
}

.view-switcher-btn.active {
  color: var(--color-primary);
  font-weight: 500;
  text-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.5);
}

/* ============================================================
 * Input fields — borderless wells that light up on focus, so the
 * field being edited is always obvious.
 * ============================================================ */
.update-formatter-title-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  transition: var(--transition-normal);
}

.update-formatter-textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 1rem;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  transition: var(--transition-normal);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--glow-focus);
}

/* ============================================================
 * Section (editor rows)
 * ============================================================ */
.update-formatter-section {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border-light);
}

.update-formatter-section-content {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.update-formatter-section-inputs {
  flex-grow: 1;
  min-width: 0;
}

/* Nested inputs sit on a darker well so they still read as fields. */
.update-formatter-section-title-input {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  transition: var(--transition-normal);
}

.update-formatter-section-points-textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  transition: var(--transition-normal);
}

.update-formatter-section-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Stack controls under the inputs on narrow screens */
@media (max-width: 600px) {
  .update-formatter-section-content {
    flex-direction: column;
  }
  .update-formatter-section-controls {
    flex-direction: row;
  }
}

/* ============================================================
 * Buttons
 *   .update-formatter-btn          quiet gray ghost (the default)
 *   .update-formatter-btn-primary  the ONE accent action per screen
 * ============================================================ */
.update-formatter-btn {
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  background-color: var(--color-bg-raised);
  color: var(--color-text-secondary);
  transition: var(--transition-normal);
}

.update-formatter-btn:hover {
  background-color: var(--color-bg-raised-hover);
  color: var(--color-text-primary);
}

.update-formatter-btn-primary {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-weight: 500;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--glow-primary);
}

.update-formatter-btn-primary:hover {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  filter: brightness(1.08);
}

.update-formatter-btn-move {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.9rem;
  min-width: 60px;
}

/* Destructive stays gray until you commit to it. */
.update-formatter-btn-remove {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.9rem;
  min-width: 60px;
}

.update-formatter-btn-remove:hover {
  background-color: var(--color-error);
  color: var(--color-text-primary);
}

/* ============================================================
 * Preview section
 * ============================================================ */
.update-formatter-preview-title {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  font-weight: 500;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
}

.update-formatter-preview-section-title {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
}

.update-formatter-preview-list {
  padding-left: var(--spacing-xl);
  margin: 0;
}

.update-formatter-preview-list-item {
  margin-bottom: var(--spacing-xs);
}

.update-formatter-preview-list-item::marker {
  color: var(--color-text-muted);
}

.update-formatter-preview-closer {
  margin-top: var(--spacing-lg);
}

.update-formatter-preview-empty {
  color: var(--color-text-muted);
  text-align: center;
}

/* ============================================================
 * Output panes — mono text well; Copy is the accent action here.
 * ============================================================ */
.update-formatter-output-container {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  position: relative;
  min-height: 100px;
}

.update-formatter-output-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.update-formatter-output-copy-btn {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  border: none;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--glow-primary);
  transition: var(--transition-normal);
}

.update-formatter-output-copy-btn:hover {
  filter: brightness(1.08);
}

/* ============================================================
 * Floating action buttons — quiet gray pills; utilities, not headlines.
 * ============================================================ */
.update-formatter-fab {
  position: fixed;
  z-index: var(--z-fixed);
  border-radius: 999px;
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-medium);
  cursor: pointer;
  background-color: var(--color-bg-raised);
  color: var(--color-text-secondary);
  transition: var(--transition-normal);
}

.update-formatter-fab:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

.update-formatter-fab-load {
  bottom: 24px;
  right: 24px;
}

.update-formatter-fab-data {
  bottom: 24px;
  left: 24px;
}

/* ============================================================
 * Modals (native <dialog> elements)
 * ============================================================ */
.update-formatter-modal {
  background: var(--gradient-card);
  color: var(--color-text-primary);
  width: 95%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  border: 1px solid var(--color-border-medium);
}

.update-formatter-modal::backdrop {
  background: var(--color-bg-overlay);
}

.update-formatter-modal-small {
  max-width: 600px;
}

.update-formatter-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.update-formatter-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.update-formatter-modal-close-btn {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  transition: var(--transition-normal);
}

.update-formatter-modal-close-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-raised);
}

.update-formatter-modal-centered {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.update-formatter-modal-action-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  border: none;
  background-color: var(--color-bg-raised);
  color: var(--color-text-secondary);
}

.update-formatter-modal-action-btn:hover {
  background-color: var(--color-bg-raised-hover);
  color: var(--color-text-primary);
}

/* New Log is the modal's one accent action. */
.update-formatter-modal-new-btn {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-weight: 500;
  box-shadow: var(--glow-primary);
}

.update-formatter-modal-new-btn:hover {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  filter: brightness(1.08);
}

/* ============================================================
 * Logs list (formerly "archive")
 * ============================================================ */
.update-formatter-archive-list {
  max-height: 400px;
  overflow-y: auto;
}

.update-formatter-archive-empty {
  color: var(--color-text-muted);
  text-align: center;
}

.update-formatter-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.update-formatter-archive-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.update-formatter-archive-item-name {
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-formatter-archive-item-date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* The accent marks which log is open. */
.update-formatter-archive-item-current {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 500;
  text-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.5);
}

.update-formatter-archive-item-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.update-formatter-archive-btn {
  border: none;
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  background-color: var(--color-bg-raised);
  color: var(--color-text-secondary);
}

.update-formatter-archive-btn:hover:not(:disabled) {
  background-color: var(--color-bg-raised-hover);
  color: var(--color-text-primary);
}

/* Load is the row's main action. */
.update-formatter-archive-btn-load {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-weight: 500;
}

.update-formatter-archive-btn-load:hover:not(:disabled) {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  filter: brightness(1.08);
}

.update-formatter-archive-btn-load:disabled {
  background: var(--color-bg-raised);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.update-formatter-archive-btn-delete:hover:not(:disabled) {
  background-color: var(--color-error);
  color: var(--color-text-primary);
}