/* Platform bits: forms, buttons, tables, dashboard chrome.
   Same palette as the public site. The dashboard is allowed to be plain. */

/* --- landing ------------------------------------------------------------ */

h1.hero {
  font-size: 2.05rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}

p.lede {
  font-size: 1.06rem;
  color: var(--muted);
  margin: 0 0 1.35rem;
}

p.cta-row { margin: 2rem 0 2.5rem; }

a.button, button {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--link);
  border-radius: 4px;
  background: var(--link);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
a.button:hover, button:hover { filter: brightness(0.94); text-decoration: none; }

a.button.secondary, button.secondary {
  background: var(--paper-2);
  color: var(--link);
}
button.danger {
  background: #fff;
  color: #b3261e;
  border-color: #d6a9a5;
}
button.danger:hover { background: #fdf2f1; }

ol.howto { padding-left: 1.3rem; }
ol.howto li { margin-bottom: 0.7rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 0.1em 0.32em;
  border-radius: 3px;
}

/* --- flashes ------------------------------------------------------------ */

ul.flashes { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.flash {
  margin: 0 0 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: #f7f8fa;
  font-size: 0.95rem;
}
.flash.error { border-color: #e3b7b3; background: #fdf4f3; color: #8c1d18; }
.flash.ok    { border-color: #b9d3bd; background: #f3f8f4; color: #1c4a26; }
.flash.info  { border-color: #c3d2e4; background: #f3f6fb; color: #17416f; }

/* --- forms -------------------------------------------------------------- */

.form-title { margin-bottom: 0.6rem; }

form.stack { margin: 1.75rem 0 0; max-width: 34rem; }
form.stack label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}
form.stack input[type=text],
form.stack input[type=email],
form.stack input[type=password],
form.stack textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid #c8ccd3;
  border-radius: 4px;
  padding: 0.55rem 0.65rem;
  margin: 0 0 1.15rem;
}
form.stack textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 22rem;
}
form.stack input:focus, form.stack textarea:focus {
  outline: 2px solid #b6cdf4;
  outline-offset: 1px;
  border-color: var(--link);
}
form.stack button { margin-right: 0.5rem; }

.hint, p.hint { font-size: 0.86rem; color: var(--muted); margin: -0.85rem 0 1.15rem; }
.optional { font-weight: 400; color: var(--muted); }
p.small { font-size: 0.95rem; }

/* --- public publication header ------------------------------------------ */

.pub-header { margin-bottom: 2.25rem; }
.pub-header h1 { margin-bottom: 0.4rem; }
.pub-meta { font-size: 0.95rem; color: var(--muted); }

/* --- dashboard shell ---------------------------------------------------- */

body.app { background: var(--paper); }

.app-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.85rem;
  margin-bottom: 1.75rem;
}
.app-brand { display: block; font-size: 1.1rem; }
.app-sub { color: var(--muted); font-size: 0.88rem; margin-left: 0.5rem; }
.app-nav { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.9; }
.app-nav a { margin-right: 1rem; white-space: nowrap; }
.app-main h1 { font-size: 1.6rem; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.app-main h2 { font-size: 1.15rem; margin: 2.25rem 0 0.6rem; }
.app-main h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem; }

/* --- the delete box on the settings page -------------------------------- */

.danger-zone {
  border: 1px solid #e0b4b0;
  border-radius: 4px;
  background: #fdf7f6;
  padding: 1rem 1.1rem 1.25rem;
  margin: 0.75rem 0 2rem;
}
.danger-zone > p { margin-top: 0; }
.danger-zone ul { margin: 0.4rem 0 0.9rem; padding-left: 1.3rem; }
.danger-zone form.stack { margin-top: 0.75rem; }

.app-lede { font-size: 0.98rem; margin: 0 0 1.25rem; }
.app-actions { margin: 1.5rem 0; }
.app-actions .button { margin-right: 0.5rem; margin-bottom: 0.5rem; }

table.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0.75rem 0 2rem;
}
table.app-table th, table.app-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}
table.app-table th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom-width: 2px;
}
.row-actions { white-space: nowrap; }

/* Wide tables scroll inside their own box so a phone doesn't scroll sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

form.inline { display: inline; }
button.linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0.5rem 0 0;
  color: var(--link);
  font-size: 0.95rem;
  cursor: pointer;
}
button.linklike:hover { text-decoration: underline; }
button.linklike.danger-text, .danger-text { color: #b3261e; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  border: 1px solid #c9cfd8;
  border-radius: 3px;
  color: var(--muted);
  vertical-align: middle;
}
.tag.danger-tag { border-color: #e0b4b0; color: #8c1d18; }

/* --- rendered post body ------------------------------------------------- */

.feed-more { margin-top: 1.75rem; }

.post-body img { max-width: 100%; height: auto; }
.post-body pre {
  background: #f4f5f7;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border-radius: 4px;
}
.post-body pre code { background: none; padding: 0; }
.post-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.1rem; }
.post-body th, .post-body td { border: 1px solid var(--rule); padding: 0.4rem 0.55rem; }

/* --- front page: Latest Posts ------------------------------------------- */

.feed-note {
  font-size: 0.95rem;
  color: var(--muted);
  border-left: 3px solid var(--rule);
  padding-left: 0.85rem;
  margin: 0 0 2rem;
}

ol.latest > li h2 { font-size: 1.25rem; }
ol.latest .post-meta a { color: var(--muted); }
ol.latest .post-meta time { white-space: nowrap; }

/* --- editor ------------------------------------------------------------- */

/* The editor gets a wider page than the rest of the dashboard so Write and
   Preview can sit side by side on a big screen. */
body.editing .wrap { max-width: 62rem; }

form.editor { max-width: none; }

.editor-shell {
  border: 1px solid #c8ccd3;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 1.15rem;
  overflow: hidden;
}
form.editor.is-dropping .editor-shell {
  outline: 3px solid #b6cdf4;
  outline-offset: 0;
}

.editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 0.6rem;
  background: #f7f8fa;
  border-bottom: 1px solid var(--rule);
}

.editor-tabs { display: flex; gap: 0.25rem; }
.editor-tabs .tab {
  font-size: 0.9rem;
  padding: 0.35rem 0.7rem;
  min-height: 2.1rem;
  background: #fff;
  color: var(--text);
  border: 1px solid #c8ccd3;
  border-radius: 4px;
}
.editor-tabs .tab.is-on {
  background: var(--link);
  border-color: var(--link);
  color: #fff;
}
/* Side by side needs the room; on a narrow screen the mode degrades to Write. */
.editor-tabs .tab-split { display: none; }

.editor-tools { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.editor-tools button {
  font-size: 0.85rem;
  line-height: 1.1;
  padding: 0.35rem 0.5rem;
  min-width: 2.1rem;
  min-height: 2.1rem;
  background: #fff;
  color: var(--text);
  border: 1px solid #c8ccd3;
  border-radius: 4px;
}
.editor-tools button:hover { background: #eef1f5; }

/* --- the unsaved draft this browser is holding --------------------------- */

/* Offered, never applied: the page shows what the server has, and this is the
   way back to the words that were last typed here. Weight and a bar, not just
   colour — one good eye has to find it at a glance. */
.draft-restore {
  margin: 0 0 1.25rem;
  border: 2px solid #c8ccd3;
  border-left: 6px solid var(--link);
  border-radius: 4px;
  background: #fbfbf7;
  padding: 0.9rem 1rem 0.5rem;
}
.draft-restore-head {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.draft-restore-meta {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.draft-restore .draft-restore-actions { margin: 0.6rem 0 0.4rem; }

.editor-count {
  margin: 0 0 0 auto;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

.editor-panes { display: block; }

/* The writing column: the words sit in a readable measure, centred in the panel
   with a margin either side, so the prose is never edge to edge. Where the panel
   is narrower than the measure (Write + Preview on a normal screen) the margin
   falls back to a flat 1.5rem and the column fills what is left; where it is
   wider (Write or Preview alone on a big screen) the measure wins and the extra
   room becomes margin. The panel stays white throughout, so it still reads as
   one box. Keep the preview's padding identical or the two panes stop lining up. */
form.stack .editor-panes textarea {
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 24rem;
  padding: 0.8rem max(1.5rem, calc((100% - 34rem) / 2));
}
form.stack .editor-panes textarea:focus { outline: 2px solid #b6cdf4; outline-offset: -2px; }

.editor-preview {
  display: none;
  min-height: 24rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.8rem max(1.5rem, calc((100% - 34rem) / 2));
  background: #fff;
}
/* The extra `form.stack` is load-bearing: the base textarea rule above
   (`form.stack .editor-panes textarea { display: block }`) outranks a plain
   `.editor-panes[data-panes="preview"] textarea`, so without it Preview showed
   the textarea and the preview stacked instead of the preview alone. */
form.stack .editor-panes[data-panes="preview"] .editor-preview { display: block; }
form.stack .editor-panes[data-panes="preview"] textarea { display: none; }

.editor-empty { color: var(--muted); font-size: 0.95rem; }

p.hint.is-error { color: #8c1d18; }
p.hint.is-ok { color: #1c4a26; }

/* Wide screen: all three modes available. Write and Preview get the full width;
   side by side is opt-in via its own tab, not forced. */
@media (min-width: 1000px) {
  .editor-tabs .tab-split { display: inline-flex; align-items: center; }
  .editor-panes[data-panes="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 0;
  }
  .editor-panes[data-panes="split"] .editor-preview { display: block; }
  form.stack .editor-panes[data-panes="split"] textarea { display: block; }
  .editor-panes[data-panes="split"] > * { border-right: 1px solid var(--rule); }
  .editor-panes[data-panes="split"] > *:last-child { border-right: 0; }
  .editor-preview { max-height: 60vh; }
}

@media (max-width: 480px) {
  h1.hero { font-size: 1.65rem; }
  table.app-table { font-size: 0.9rem; }
  table.app-table th, table.app-table td { padding: 0.45rem 0.35rem; }
  .editor-count { margin-left: 0; width: 100%; }
  .editor-tools button { font-size: 0.8rem; }
  /* A phone has no room for a 1.5rem margin on both sides of the words. */
  form.stack .editor-panes textarea, .editor-preview { padding-inline: 1.1rem; }
}