/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --brand-color: #38bdf8;
  --brand-color-hover: #7dd3fc;
}

/* ── Header / Footer ───────────────────────────────────────────────────────── */
.site-header {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 2rem;
}

.site-header nav {
  margin-bottom: 0;
}

.brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--brand-color) !important;
  text-decoration: none !important;
}

.brand:hover {
  color: var(--brand-color-hover) !important;
}

.site-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color);
  text-align: center;
  color: var(--pico-muted-color);
}

/* ── Form: create page ─────────────────────────────────────────────────────── */
#content {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  min-height: 18rem;
  resize: vertical;
}

.form-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.inline-label {
  flex: 1;
  min-width: 10rem;
  margin-bottom: 0;
}

.inline-label select {
  margin-top: 0.25rem;
}

#submit-btn {
  flex-shrink: 0;
  margin-bottom: 0;
  min-width: 10rem;
}

.size-indicator {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  font-weight: normal;
  margin-left: 0.5rem;
}

.size-indicator.warn {
  color: var(--pico-form-element-invalid-border-color);
}

/* ── Result box ────────────────────────────────────────────────────────────── */
.link-box {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.link-box input {
  flex: 1;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.link-box button {
  flex-shrink: 0;
  margin-bottom: 0;
  min-width: 5rem;
}

.new-paste-btn {
  display: inline-block;
}

/* ── View page ─────────────────────────────────────────────────────────────── */
.paste-meta {
  color: var(--pico-muted-color);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.paste-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.paste-actions button,
.paste-actions a {
  margin-bottom: 0;
}

.paste-content {
  background: var(--pico-code-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
  tab-size: 4;
  max-height: 70vh;
  overflow-y: auto;
}

.paste-content code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 0.9rem;
  background: none;
  padding: 0;
  color: inherit;
}

/* ── Error / shared ────────────────────────────────────────────────────────── */
.error-msg {
  color: var(--pico-form-element-invalid-border-color);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

.hidden {
  display: none !important;
}

/* ── No-JS warning ─────────────────────────────────────────────────────────── */
.noscript-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--pico-del-color);
  color: #fff;
  text-align: center;
  padding: 0.75rem;
  z-index: 9999;
}