/* Paddock — Inbox (notifications.html) + Release log (updates.html).
   Cards are still rendered by site.js (notificationCardHtml / updateCardHtml); restyled here as timing rows. */

.pd-inbox {
  padding-bottom: 96px;
  color: var(--pd-ink);
  font-family: "Archivo", sans-serif;
}

/* home.css forces button/input fonts and `body.site-dark-mode button { color }` with !important */
.pd-inbox input,
.pd-inbox select,
.pd-inbox textarea,
.pd-inbox button { font-family: "Archivo", sans-serif !important; }
.pd-inbox .pd-m,
.pd-inbox .pd-kicker,
.pd-inbox .pd-chip,
.pd-inbox .update-edit { font-family: var(--pd-mono) !important; }
.pd-inbox .pd-btn,
.pd-inbox .pd-d { font-family: var(--pd-display) !important; }
.pd-inbox .pd-btn { color: #fff !important; }
.pd-inbox .pd-btn--ghost { color: var(--pd-ink) !important; }
.pd-inbox .pd-chip { color: var(--pd-soft) !important; }
.pd-inbox .pd-chip:hover { color: #fff !important; }
.pd-inbox .pd-chip.active { background: var(--pd-ink); border-color: var(--pd-ink) !important; color: var(--pd-bg) !important; }

/* Legacy octagon frames: drop their border pseudo-elements and clip paths */
.pd-inbox .cut-corners { clip-path: none !important; }
.pd-inbox .cut-corners::before,
.pd-inbox .cut-corners::after { display: none !important; }

/* Header: kicker + giant title + stats with red slashes */
.pd-inbox-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 40px;
  padding: 56px 0 36px;
}

.pd-inbox-heading {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.pd-inbox-heading h1 {
  margin: 0;
  font-size: clamp(64px, 8.6vw, 128px);
}

.pd-inbox-heading p {
  max-width: 560px;
  margin: 0;
  color: var(--pd-soft);
  font-size: 17px;
  line-height: 1.55;
}

.pd-inbox-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.pd-inbox-stats > span {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--pd-mute);
  font-family: var(--pd-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pd-inbox-stats > span + span { padding-left: 24px; }

.pd-inbox-stats > span + span::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--pd-red);
  transform: skewX(-18deg);
  content: "";
}

.pd-inbox-stats strong {
  color: var(--pd-ink);
  font-family: var(--pd-display);
  font-stretch: 125%;
  font-style: italic;
  font-weight: 900;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Layout */
.pd-inbox-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.pd-inbox-main {
  display: flex;
  flex: 999 1 640px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pd-inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pd-line);
}

.pd-inbox-filters .pd-chip { min-height: 40px; padding: 0 16px; }

.pd-inbox-side {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pd-inbox-side .pd-panel-head { padding: 18px 20px; }
.pd-inbox-side .pd-panel-head h2 { font-size: 20px; }
.pd-inbox-side .pd-panel-head .pd-m { white-space: nowrap; }

/* Notification rows */
.pd-inbox-list {
  display: flex;
  flex-direction: column;
  background: var(--pd-panel);
  border: 1px solid var(--pd-line);
}

.pd-inbox .notification-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pd-inbox .notification-card + .notification-card { border-top: 1px solid var(--pd-line-2) !important; }
.pd-inbox .notification-card:hover { background: #18181a; }

.pd-inbox .notification-card.is-unread {
  background: #161617;
  box-shadow: inset 4px 0 0 var(--pd-red);
}

.pd-inbox .notification-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: #2a2a2d;
  background-size: cover;
  background-position: center;
  color: var(--pd-ink);
  font-family: var(--pd-display);
  font-stretch: 125%;
  font-style: italic;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
}

.pd-inbox .notification-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pd-inbox .notification-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.pd-inbox .notification-top span,
.pd-inbox .notification-top time,
.pd-inbox .notification-meta span {
  font-family: var(--pd-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-inbox .notification-top span { display: inline-flex; align-items: center; gap: 8px; color: var(--pd-red-hi); }
.pd-inbox .notification-top time { color: var(--pd-mute); }

.pd-inbox .notification-card.is-unread .notification-top span::before {
  width: 8px;
  height: 8px;
  background: var(--pd-red);
  transform: skewX(-18deg);
  content: "";
}

.pd-inbox .notification-card h2 {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--pd-ink);
  font-family: "Archivo", sans-serif !important;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 800 !important;
  font-size: 16px;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

.pd-inbox .notification-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #a9a9af;
  font-size: 14px;
  line-height: 1.5;
}

.pd-inbox .notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
}

.pd-inbox .notification-meta span {
  padding: 0;
  border: 0;
  background: none;
  clip-path: none;
  color: var(--pd-mute);
}

.pd-inbox .notification-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  background: #1f1f22;
  color: var(--pd-ink);
  clip-path: var(--pd-slant);
  font-family: var(--pd-display);
  font-stretch: 125%;
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pd-inbox .notification-open:hover { background: var(--pd-red); color: #fff; }

.pd-inbox .notification-empty,
.pd-inbox .updates-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px;
  padding: 36px 24px;
  background: transparent;
  border: 1px dashed #3a3a3e !important;
  color: var(--pd-soft);
}

.pd-inbox .notification-empty h2,
.pd-inbox .updates-empty h2 { margin: 0; font-size: 22px; }
.pd-inbox .notification-empty p,
.pd-inbox .updates-empty p { margin: 0; }

/* Badge settings (checkbox rows) */
.pd-inbox-settings { display: flex; flex-direction: column; }

.pd-inbox .notification-setting {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-top: 1px solid var(--pd-line-2) !important;
  background: transparent;
  clip-path: none;
  cursor: pointer;
  font-family: "Archivo", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.pd-inbox .notification-setting:hover { background: #18181a; }
.pd-inbox .notification-setting input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pd-red); }
.pd-inbox .notification-setting span { display: flex; flex-direction: column; gap: 3px; }
.pd-inbox .notification-setting strong { color: var(--pd-ink); font-weight: 700; font-size: 14px; }
.pd-inbox .notification-setting small { color: var(--pd-mute); font-family: "Archivo", sans-serif; font-size: 13px; line-height: 1.4; }

/* ---------- Release log (updates.html) ---------- */
.pd-updates-list {
  display: flex;
  flex-direction: column;
  background: var(--pd-panel);
  border: 1px solid var(--pd-line);
}

.pd-updates .update-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 22px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pd-updates .update-card + .update-card { border-top: 1px solid var(--pd-line-2) !important; }
.pd-updates .update-card:first-child { box-shadow: inset 4px 0 0 var(--pd-red); }
.pd-updates .update-card::before { display: none !important; }

.pd-updates .update-version {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-updates .update-version strong {
  color: var(--pd-ink);
  font-family: var(--pd-display);
  font-stretch: 125%;
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 0.95;
  text-transform: uppercase;
}

.pd-updates .update-card:first-child .update-version strong { color: var(--pd-red-hi); }

.pd-updates .update-version time {
  color: var(--pd-mute);
  font-family: var(--pd-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pd-updates .update-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pd-updates .update-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.pd-updates .update-top h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
}

.pd-updates .update-draft {
  padding: 4px 8px;
  background: var(--pd-yellow);
  color: var(--pd-bg);
  font-family: var(--pd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-updates .update-main > p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #a9a9af;
  font-size: 14px;
  line-height: 1.6;
}

.pd-updates .update-main > p.update-summary {
  color: var(--pd-soft);
  font-size: 16px;
  font-weight: 600;
}

.pd-updates .update-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.pd-updates .update-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--pd-line);
  background: var(--pd-panel-2);
  clip-path: var(--pd-cut-sm);
}

.pd-updates .update-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.pd-updates .update-tags span {
  padding: 4px 8px;
  border: 1px solid var(--pd-line);
  color: var(--pd-soft);
  font-family: var(--pd-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-inbox .update-edit {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--pd-line);
  background: transparent;
  color: var(--pd-soft) !important;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: none;
  cursor: pointer;
}

.pd-inbox .update-edit:hover { border-color: var(--pd-ink) !important; color: #fff !important; }

/* Owner editor */
.pd-updates-editor {
  margin-bottom: 32px;
  padding: 22px 24px 26px;
}

.pd-updates .pd-updates-editor { border-top: 4px solid var(--pd-red) !important; }
.pd-updates-editor[hidden] { display: none; }

.pd-updates-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.pd-updates-editor-head h2 { margin: 10px 0 0; font-size: clamp(26px, 3vw, 36px); }

.pd-updates-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pd-updates-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-updates-wide { grid-column: 1 / -1; }

.pd-updates-form input,
.pd-updates-form select,
.pd-updates-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--pd-bg);
  border: 1px solid var(--pd-line);
  color: var(--pd-ink);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  box-sizing: border-box;
}

.pd-updates-form textarea { resize: vertical; line-height: 1.5; }
.pd-updates-form input:focus,
.pd-updates-form select:focus,
.pd-updates-form textarea:focus { border-color: var(--pd-ink) !important; outline: none; }

.pd-updates-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-updates-actions [hidden] { display: none; }

@media (max-width: 760px) {
  .pd-inbox-head { padding: 36px 0 28px; }
  .pd-inbox-heading h1 { font-size: 15vw; }
  .pd-inbox-heading .pd-kicker { letter-spacing: 0.26em; }
  .pd-inbox-heading p { font-size: 15px; }
  .pd-inbox-stats strong { font-size: 32px; }
  .pd-inbox-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pd-inbox-filters::-webkit-scrollbar { display: none; }
  .pd-inbox-filters .pd-chip { flex: none; }

  .pd-inbox .notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 16px;
  }

  .pd-inbox .notification-open { grid-column: 2; justify-self: start; }

  .pd-updates .update-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .pd-updates .update-version { flex-direction: row; align-items: baseline; gap: 14px; }
  .pd-updates-form { grid-template-columns: minmax(0, 1fr); }
  .pd-updates-editor { padding: 18px 16px 22px; }
}