/* Page styles for the predictions site.
   Ported from the Claude Design project's Login.dc.html and Predictions.dc.html:
   every declaration below is the design's own value, lifted out of inline `style`
   attributes into named classes as the design system asks. */

/* ── Ground ──────────────────────────────────────────────────────────────
   The design's "sand" palette, overriding the design system's light default. */

:root {
  --color-bg: #d8cfbe;
  --color-text: #37322a;
  --color-divider: color-mix(in srgb, #37322a 20%, transparent);
  --paper-dim: #6d6555;
  --paper-quiet: #8b8272;
  --mark: var(--color-accent-700);
  --mark-text: var(--color-accent-800);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

body { margin: 0; background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-accent-700); text-decoration: none; border-bottom: 1px solid var(--color-divider); }
a:hover { color: var(--color-accent-800); border-bottom-color: var(--color-accent-700); }

/* ── Page shell ─────────────────────────────────────────────────────────── */

.page {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  padding: 88px 24px 120px;
}
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.page-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.page-wide .page-inner { max-width: 960px; gap: 44px; }

/* ── Login ──────────────────────────────────────────────────────────────── */

.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.login-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.login-form { display: flex; flex-direction: column; gap: 28px; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  padding: 6px 0;
  outline: none;
}
.login-input::placeholder { color: var(--paper-quiet); }
.login-input:focus { border-bottom-color: var(--color-accent-700); }
.login-submit {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  background: transparent;
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  padding: 13px 20px;
  cursor: pointer;
  transition: background 120ms ease;
}
.login-submit:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.login-submit:active { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }

/* ── Post ───────────────────────────────────────────────────────────────── */

.post-header { display: flex; flex-direction: column; gap: 14px; }
.post-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
/* A post chooses its own columns, so a wide one scrolls inside its own box rather
   than pushing the whole page sideways. */
.post-section { display: flex; flex-direction: column; gap: 20px; overflow-x: auto; }

/* The reading page is two measures, sharing one left edge. The content block is as
   wide as the table needs — ten-odd columns of figures want more room than prose
   does — while the heading and the notes stay capped at 620px, because a line of
   text 1040px long is not readable. Everything starts at the same x, so the table
   extends to the right rather than the prose being inset from it.

   Scoped away from .page-wide, whose 960px container is already sized for its own
   content. */
.page:not(.page-wide) .page-inner {
  max-width: min(1040px, calc(100vw - 48px));
}
.page:not(.page-wide) .post-header,
.page:not(.page-wide) .post-notes {
  max-width: 620px;
}

.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.post-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.post-table tbody tr { border-bottom: 1px solid var(--color-divider); }
.post-table td { padding: 14px 16px 14px 0; }
.post-table th:last-child, .post-table td:last-child { padding-right: 0; }

.post-table .align-left { text-align: left; }
.post-table .align-center { text-align: center; }
.post-table .align-right { text-align: right; }

/* The first column carries the design's ticker treatment; other left-aligned
   columns read as the italic "Direction" cell; centred/right columns stay plain. */
.post-table .cell-lead {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.post-table .cell-prose { font-style: italic; color: var(--paper-dim); }

.post-notes { display: flex; flex-direction: column; gap: 44px; }
.post-note { display: flex; flex-direction: column; gap: 10px; }
.post-note-head { display: flex; align-items: baseline; gap: 12px; }
.post-note-ticker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.post-note-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  max-width: none;
  text-wrap: pretty;
}

.post-empty { color: var(--paper-dim); font-style: italic; }

/* ── Chrome shared by the admin pages ───────────────────────────────────── */

/* A quiet utility strip in the top corner — the design has no navigation chrome,
   so this stays out of the text column entirely. */
.bar {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bar a, .bar button {
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--paper-quiet);
  text-decoration: none;
}
.bar a:hover, .bar button:hover { color: var(--mark-text); border-bottom-color: var(--mark); }

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-quiet);
}

.messages { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.messages li {
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--color-divider);
  border-left: 2px solid var(--mark);
  border-radius: var(--radius-md);
}
.messages li.error { border-left-color: #a33; }

.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-style: italic;
  color: #a33;
}

/* ── Post list ──────────────────────────────────────────────────────────── */

.list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.list-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.list-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--color-divider); vertical-align: baseline; }
.list-table th:last-child, .list-table td:last-child { padding-right: 0; text-align: right; }
.list-title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; }
.list-meta { color: var(--paper-dim); font-size: 13px; }
.row-actions { display: inline-flex; gap: 14px; align-items: baseline; justify-content: flex-end; }

.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  color: var(--paper-quiet);
}
.pill-current { border-color: var(--mark); color: var(--mark-text); }

.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.linkbtn:hover { color: var(--mark-text); border-bottom-color: var(--mark); }
.linkbtn-danger:hover { color: #a33; border-bottom-color: #a33; }

/* ── Composer ───────────────────────────────────────────────────────────── */

.composer { display: flex; flex-direction: column; gap: 40px; }
.composer-block { display: flex; flex-direction: column; gap: 14px; }
.composer-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.composer-row > * { flex: 1 1 200px; }

.field-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  margin-bottom: 8px;
}
.text-input, .select-input, .area-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  padding: 6px 0;
  outline: none;
}
.text-input:focus, .select-input:focus, .area-input:focus { border-bottom-color: var(--mark); }
.area-input { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 10px 12px; line-height: 1.7; resize: vertical; }
.select-input { cursor: pointer; }
.select-input option { background: var(--color-bg); color: var(--color-text); }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--color-divider); }
.tab {
  border: 0;
  background: none;
  padding: 0 0 10px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--mark-text); border-bottom-color: var(--mark); }

.col-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.col-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: grab;
}
.col-chip.dragging { opacity: 0.4; }
.col-chip input {
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  outline: none;
  width: 9ch;
}
.col-chip select {
  border: 0;
  background: transparent;
  color: var(--paper-quiet);
  font-family: var(--font-body);
  font-size: 11px;
  outline: none;
  cursor: pointer;
}
.col-chip .drag-handle { color: var(--paper-quiet); font-size: 12px; cursor: grab; user-select: none; }

.xbtn {
  border: 0;
  background: none;
  color: var(--paper-quiet);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
.xbtn:hover { color: #a33; }

.grid-wrap { overflow-x: auto; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.grid-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  padding: 0 10px 10px 0;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.grid-table td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--color-divider); }
.grid-table th:last-child, .grid-table td:last-child { padding-right: 0; width: 1%; }
.grid-table input {
  width: 100%;
  min-width: 7ch;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 0;
  outline: none;
  border-bottom: 1px solid transparent;
}
.grid-table input:focus { border-bottom-color: var(--mark); }

.note-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-divider);
}
.note-editor-head { display: flex; align-items: center; gap: 12px; }
.note-editor-head input { flex: 1; }

.json-area {
  width: 100%;
  min-height: 380px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 14px;
  outline: none;
  resize: vertical;
  tab-size: 2;
}
.json-area:focus { border-color: var(--mark); }
.json-status { font-size: 12px; font-style: italic; color: var(--paper-dim); min-height: 1.2em; }
.json-status.bad { color: #a33; font-style: normal; }

.composer-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-line {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mark-text);
  background: transparent;
  border: 1px solid var(--mark);
  border-radius: var(--radius-md);
  padding: 13px 20px;
  cursor: pointer;
  transition: background 120ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-line:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.btn-line:active { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
.btn-line-quiet { color: var(--paper-quiet); border-color: var(--color-divider); }
.btn-line-quiet:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.checkline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.checkline input { accent-color: var(--mark); width: 15px; height: 15px; }

/* ── Join and readers ───────────────────────────────────────────────────── */

.join-intro {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-dim);
  text-wrap: pretty;
}

.invite-new { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.invite-new-field { display: block; }
.invite-new-field .field-label { margin-bottom: 6px; }
.invite-new-field .text-input { min-width: 200px; }

.invite-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-divider);
}
.invite-row-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.invite-row-head .row-actions { margin-left: auto; }

.invite-url {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  outline: none;
}
.invite-url:focus { border-color: var(--mark); }

.invite-spent td { border-bottom: 1px solid var(--color-divider); }

.hidden { display: none !important; }