:root {
  --ink: #1c1a17;
  --ink-soft: #55504a;
  --ink-faint: #8c857c;
  --page: #fbf9f5;
  --card: #ffffff;
  --rule: #e4ddd2;
  --accent: #7a5c3e;
  --accent-soft: #f2e9dd;
  --open: #9a6b1f;
  --accepted: #2f6b46;
  --declined: #8a3b3b;
  --applied: #4a5a76;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 26, 23, .05), 0 8px 24px rgba(28, 26, 23, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }

.masthead {
  border-bottom: 1px solid var(--rule);
  background: rgba(251, 249, 245, .92);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.masthead h1 {
  margin: 0;
  font: 600 1.05rem/1.3 Georgia, "Iowan Old Style", serif;
  letter-spacing: .01em;
}

.masthead .meta { color: var(--ink-faint); font-size: .82rem; margin-left: auto; display: flex; gap: 1rem; align-items: center; }

.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accepted); display: inline-block; margin-right: .35rem; }
.live-dot.stale { background: var(--ink-faint); }

.wrap { max-width: 76rem; margin: 0 auto; padding: 2rem 1.5rem 6rem; }

/* ------------------------------------------------------------- manuscript */

.reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 62rem) {
  .reading { grid-template-columns: minmax(0, 1fr); }
  .margin { position: static !important; }
}

.manuscript {
  font: 1.05rem/1.85 Georgia, "Iowan Old Style", "Times New Roman", serif;
  max-width: 38rem;
}

.manuscript .block {
  position: relative;
  padding: .35rem .75rem .35rem .9rem;
  margin: 0 0 1.05rem -0.9rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: text;
  transition: background .12s ease, border-color .12s ease;
}

.manuscript .block:hover { background: #fff; border-left-color: var(--rule); }
.manuscript .block.has-notes { border-left-color: var(--accent); background: #fff; }
.manuscript .block.selected { background: var(--accent-soft); border-left-color: var(--accent); }

.manuscript h2, .manuscript h3, .manuscript h4 {
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
  margin: 0;
}
.manuscript h2 { font-size: 1.5rem; }
.manuscript h3 { font-size: 1.22rem; }
.manuscript h4 { font-size: 1.05rem; }

.block .note-flag {
  position: absolute;
  right: -1.1rem;
  top: .4rem;
  font: 600 .7rem/1.5rem sans-serif;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.block .add-note {
  position: absolute;
  right: -1.1rem;
  top: .4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px dashed var(--ink-faint);
  background: var(--page);
  color: var(--ink-faint);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.manuscript .block:hover .add-note { opacity: 1; }

/* ----------------------------------------------------------------- margin */

.margin { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

.margin h2 { font: 600 .78rem/1 sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem; }

.thread {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .85rem .9rem;
  margin-bottom: .8rem;
  box-shadow: var(--shadow);
  scroll-margin-top: 5rem;
}

.thread.focus { border-color: var(--accent); }
.thread.orphaned { border-style: dashed; }

.thread blockquote {
  margin: 0 0 .6rem;
  padding-left: .65rem;
  border-left: 2px solid var(--accent-soft);
  font: italic .84rem/1.5 Georgia, serif;
  color: var(--ink-soft);
}

.note { border-top: 1px solid var(--rule); padding-top: .55rem; margin-top: .55rem; }
.note:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.note .who { font-size: .78rem; font-weight: 600; }
.note .when { font-size: .72rem; color: var(--ink-faint); font-weight: 400; margin-left: .4rem; }
.note .body { font-size: .88rem; white-space: pre-wrap; margin-top: .15rem; }

.role-tag {
  font: 600 .62rem/1 sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .35rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: .35rem;
  vertical-align: .05rem;
}

.pill {
  display: inline-block;
  font: 600 .66rem/1 sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.pill.open { color: var(--open); }
.pill.accepted { color: var(--accepted); }
.pill.declined { color: var(--declined); }
.pill.applied { color: var(--applied); }
.pill.pending { color: var(--open); }
.pill.approved { color: var(--accepted); }
.pill.changes { color: var(--open); }
.pill.published { color: var(--applied); }

/* -------------------------------------------------------------- approvals */

.item { padding: 1.1rem 1.15rem; }

.item-title {
  font: 600 1.05rem/1.35 Georgia, "Iowan Old Style", serif;
  margin: 0 0 .7rem;
}

/* A post is shown the way it will publish: line breaks intact, no reflow, no
   markdown interpretation. What she approves is what goes out. */
.post {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .95rem;
  line-height: 1.6;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .85rem .95rem;
}

.post.prior { opacity: .7; margin-top: .5rem; font-size: .88rem; }

details summary { cursor: pointer; font-size: .85rem; color: var(--ink-faint); }
details summary::marker { color: var(--rule); }

.chip {
  display: inline-block;
  font: 600 .66rem/1 sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .45rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: .3rem;
}
.chip.quiet { background: transparent; color: var(--ink-faint); border: 1px solid var(--rule); }

.decide {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

.btn.approve { background: var(--accepted); border-color: var(--accepted); }

.note.decision {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: .55rem .65rem;
  margin-top: .6rem;
  border-top: 0;
}

.muted.warn { color: var(--declined); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: .2rem; }
.field select, .field input { min-width: 11rem; }

select {
  padding: .5rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: #fff;
  font-size: .9rem;
}

.tabs .count {
  display: inline-block;
  min-width: 1.15rem;
  padding: .05rem .3rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  vertical-align: .05rem;
}

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

textarea, input[type=text], input[type=password] {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .55rem .65rem;
  background: #fff;
  font-size: .9rem;
  resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: .45rem .8rem;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  /* 44px is the floor for a target you hit with a thumb rather than a mouse.
     Applied everywhere, not only on phones: it costs nothing on a desktop. */
  min-height: 2.75rem;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: .3rem .55rem; font-size: .78rem; min-height: 2.25rem; }

/* Approve is the one irreversible-feeling action in the app and it sits next
   to two buttons that are not. On the second tap it changes colour and words
   rather than firing on the first. */
.btn.approve.arming { background: var(--open); border-color: var(--open); }

.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.muted { color: var(--ink-faint); font-size: .85rem; }

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

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.panel > h2 { font: 600 .78rem/1 sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem; }

.stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.stat .n { font: 600 1.7rem/1.1 Georgia, serif; }
.stat .k { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }

table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th { text-align: left; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); padding: 0 .6rem .45rem 0; font-weight: 600; }
td { padding: .5rem .6rem .5rem 0; border-top: 1px solid var(--rule); vertical-align: top; }

code { font: .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); padding: .1rem .3rem; border-radius: 4px; word-break: break-all; }

.gate { max-width: 24rem; margin: 6rem auto; }
.gate h1 { font: 600 1.3rem/1.3 Georgia, serif; margin: 0 0 .4rem; }
.gate p { color: var(--ink-soft); font-size: .9rem; margin-top: 0; }
.gate label { display: block; font-size: .78rem; font-weight: 600; margin: .9rem 0 .3rem; }

.err { color: var(--declined); font-size: .85rem; min-height: 1.2rem; }
.hidden { display: none !important; }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0; background: none; padding: .7rem .8rem; cursor: pointer; white-space: nowrap;
  font-size: .88rem; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
  min-height: 2.75rem;
}
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

/* ================================================================ first run */

/* What this is, in her voice, before anyone has to ask. Dismissible, three
   lines, and gone for good once it is closed — a tour would be worse than
   nothing. Nothing on any reader-facing surface names a vendor or a tool. */
.explainer {
  background: var(--accent-soft);
  border: 1px solid #e3d6c4;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.6rem;
  position: relative;
}
.explainer h2 { font: 600 1rem/1.35 Georgia, "Iowan Old Style", serif; margin: 0 0 .4rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.explainer p { margin: 0 0 .5rem; font-size: .9rem; color: var(--ink-soft); }
.explainer ul { margin: .1rem 0 .7rem; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-soft); }
.explainer li { margin-bottom: .25rem; }
.explainer .dismiss { background: transparent; border: 1px solid #d8c8b2; color: var(--accent); }

/* An empty screen has to say what will appear in it. The state before the
   first draft lands is the state a link handed out today is opened in. */
.empty-state { text-align: left; padding: 2rem 1.5rem; }
.empty-state h2 { font: 600 1.15rem/1.35 Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 .5rem; }
.empty-state p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 .6rem; max-width: 34rem; }

.gate .hint { font-size: .82rem; color: var(--ink-faint); margin-top: 1rem; }
.gate .brand { font: 600 .7rem/1 sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .5rem; }

/* ------------------------------------------------------------------ intake */

.drop {
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop strong { color: var(--ink); }

.preview { background: var(--page); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; margin-top: .9rem; }
.preview h3 { font: 600 .78rem/1 sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .7rem; }
.preview .figures { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.preview .figure .n { font: 600 1.35rem/1.1 Georgia, serif; }
.preview .figure .k { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.preview .figure.warn .n { color: var(--declined); }
.preview .sample { font: .85rem/1.6 Georgia, serif; color: var(--ink-soft); border-left: 2px solid var(--rule); padding-left: .7rem; margin-top: .6rem; }
.preview .sample div { margin-bottom: .3rem; }
.preview .sample .h { font-weight: 700; color: var(--ink); }

/* How long a thing has sat. The number nobody computes by reading timestamps. */
.age {
  display: inline-block;
  font: 600 .68rem/1 sans-serif;
  padding: .25rem .4rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.age.warm { background: #fdf0d9; color: var(--open); }
.age.hot { background: #f7e2e2; color: var(--declined); }

.banner {
  border-left: 3px solid var(--open);
  background: #fdf8ef;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  font-size: .88rem;
}
.banner.bad { border-left-color: var(--declined); background: #fbf1f1; }

/* =============================================================== responsive */

/* One breakpoint was a tablet accommodation. Approving a post is a phone
   activity, and so is reading a manuscript in bed, so the phone layout is a
   design rather than a squeeze. Everything below is checked at 390px. */

@media (max-width: 48rem) {
  .wrap { padding: 1.25rem 1rem 5rem; }
  .masthead-inner { padding: .7rem 1rem; gap: .5rem; }
  .masthead h1 { font-size: .98rem; }
  .masthead .meta { font-size: .76rem; gap: .6rem; width: 100%; margin-left: 0; }
  .panel { padding: 1rem; border-radius: 8px; }
  .stats { gap: 1.25rem; }
  .stat .n { font-size: 1.45rem; }

  /* Reading measure: a manuscript at phone width wants a slightly larger face
     and a shorter line, not the desktop type scaled down. */
  .manuscript { font-size: 1.06rem; line-height: 1.75; max-width: none; }
  .manuscript .block { padding: .3rem 2.5rem .3rem .65rem; margin-left: -.65rem; }
  .manuscript h2 { font-size: 1.3rem; }
  .manuscript h3 { font-size: 1.12rem; }

  /* The note markers move inside the text column — hanging off the right edge
     put them off-screen at this width. */
  .block .note-flag, .block .add-note { right: .35rem; top: .5rem; }

  /* Selecting text on a touchscreen to attach a note is the hardest
     interaction in this app, so it stops being the only way in: the per-
     paragraph target is always drawn, never revealed on hover. */
  .block .add-note { opacity: 1; width: 1.9rem; height: 1.9rem; font-size: 1rem; }
  .block .note-flag { width: 1.9rem; height: 1.9rem; line-height: 1.9rem; }

  .margin { max-height: none; overflow: visible; }
  .thread { padding: .9rem; }

  /* Three buttons that carry the whole point of the app. Stacked and full
     width: reachable with a thumb, and impossible to hit one while aiming for
     another. Approve goes first and is the only filled one. */
  .decide .row { flex-direction: column; align-items: stretch; gap: .5rem; }
  .decide .row .btn { width: 100%; }

  /* The character count has to stay visible while the keyboard is up. */
  .count-sticky {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .95);
    padding: .4rem 0;
    border-top: 1px solid var(--rule);
    z-index: 5;
  }

  /* A five-column table does not survive 390px. Each row becomes a card with
     its column headings inline, which reads as a list instead of a scroll. */
  table.stack, table.stack thead, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr {
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: .7rem .8rem;
    margin-bottom: .7rem;
    background: var(--card);
  }
  table.stack td { border: 0; padding: .2rem 0; }
  table.stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font: 600 .66rem/1.4 sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  table.stack code { display: block; font-size: .74rem; padding: .35rem .4rem; }

  .row.compose-fields { flex-direction: column; align-items: stretch; }
  .row.compose-fields .field { width: 100%; }
  .field select, .field input { min-width: 0; width: 100%; }

  .gate { margin: 2.5rem auto; padding: 0 .25rem; }

  /* iOS zooms the page in on any input under 16px when it takes focus, and
     never zooms back out. This is the whole fix for that. */
  textarea, input[type=text], input[type=password], select { font-size: 16px; }
}

@media (max-width: 30rem) {
  .item-actions { flex-direction: column; align-items: stretch; }
  .item-actions .btn { width: 100%; }
  .preview .figures { gap: 1rem; }
}

/* Pointing devices that cannot hover never reveal a hover-only control, at
   any width — an iPad in landscape is wide and still has no cursor. */
@media (hover: none) {
  .block .add-note { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}