/* --- Projects section ----------------------------------------------------- */

/* The tab bar that used to sit across the top of this page is gone: the
   sidebar lists the projects, so the page is only ever about the one that is
   open and does not need to say which one it could have been. */

/* An anchor wearing .btn. It needs the three things a link is that a button is
   not: no underline, an inherited color, and a box that can hold the icon
   beside the word. */
.p-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
}

.p-open svg { flex: none; opacity: .6; }
.p-open:hover { color: var(--accent-ink); border-color: var(--line); }
.p-open:hover svg { opacity: 1; }

/* --- findings ------------------------------------------------------------- */

/* What an assistant left on the page. Read-only and disposable: the two
   controls are "I have seen these" and a × per row. */

.pf-new {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-bg);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  white-space: nowrap;
}

.pf-list { padding: 4px 0 8px; }
.pf-list .empty { padding: 22px 16px; text-align: left; }

.pf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: start;
  padding: 9px 12px 9px 16px;
  margin: 0 4px;
  border-radius: var(--r-md);
}

.pf:hover { background: var(--hover); }

/* Unread carries a rule down its left edge rather than a background: the row
   still has to be legible against the card, and a tinted block behind prose is
   the thing that makes a list look like an advert. */
.pf.is-new { box-shadow: inset 2px 0 0 var(--tint); }

/* A button, because the row opens the finding — styled as the row it sits in
   rather than as a control, the same way a task row's body is. */
.pf-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.pf-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.pf.is-new .pf-title { font-weight: 550; }

/* Two lines in the list, all of it in the panel. One finding that came back as
   four paragraphs would otherwise push everything under it off the card. */
.pf-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.pf-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1px;
}

.pf-when,
.pf-by,
.pf-host {
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}

.pf-by::before,
.pf-host::before { content: "·"; margin-right: 8px; }

.pf-host { color: var(--muted); }

/* --- one finding, read in full -------------------------------------------- */

.fd-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.fd-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--faint);
}

.fd-by::before { content: "·"; margin-right: 8px; }

/* Rendered markdown. Sets the size; the blocks inside come from base.css. */
.fd-text {
  margin-top: 12px;
  font-size: 13.5px;
}

.fd-link { margin-top: 16px; }

.pf-x {
  width: 22px;
  height: 22px;
  display: grid;
  place-content: center;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, color .16s ease, background .16s ease;
}

.pf:hover .pf-x,
.pf-x:focus-visible { opacity: 1; }
.pf-x:hover { color: var(--danger); background: var(--danger-bg); }

/* --- detail --------------------------------------------------------------- */

.projdetail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.p-hero { padding: 18px 20px 0; }

.hero-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.012em;
  color: var(--ink);
}

.hero-pct {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--tint);
}

.hero-sum {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* The one thing that moves it forward, set apart from the description of what
   it is. */
.hero-next {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 11px;
  font-size: 12.5px;
}

.hero-next .n-k {
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tint);
}

.hero-next .n-v { color: var(--ink); }

/* Which milestone it is reading, so "in progress" and "not started yet" are not
   the same sentence. Absent when the line came from the typed field, because
   then there is no milestone to have a state. */
.hero-next .n-m {
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero-next .n-m.doing { color: var(--tint); }

.state {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--muted);
}

.state.active { color: var(--ok); }
.state.review { color: var(--accent-ink); }
.state.paused { color: var(--faint); }

/* A gauge bled to the card edge, not a rounded pill floating inside it — it
   reads as an instrument scale and doubles as the divider above the facts.
   Color is set in the project's editor, not out here: it is a property of the
   project, not a control the page needs standing by. */
.gauge {
  position: relative;
  height: 3px;
  margin: 18px -20px 0;
  background: var(--fill-2);
}

.gauge span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--tint);
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 -20px;
  background: var(--hair);
}

.fact {
  padding: 12px 20px 14px;
  background: var(--glass-2);
}

.f-k {
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

.f-v {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink);
}

/* --- milestones ----------------------------------------------------------- */

.ms-list { padding: 6px 0 10px; }

.ms {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 6px 16px;
}

/* A button: advancing a milestone is the action you take on one, so it happens
   on the marker itself rather than through the editor. */
.ms-mark {
  display: grid;
  place-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: #fff;
  cursor: pointer;
}

.ms-mark:hover { border-color: var(--tint); }
.ms.is-pending { opacity: .55; }

.ms.done .ms-mark { background: var(--ok); border-color: var(--ok); }

/* In progress is a ring, not a fill: the work is around it, not behind it. */
.ms.doing .ms-mark {
  border-color: var(--tint);
  box-shadow: inset 0 0 0 3px var(--tint-bg);
  background: var(--tint);
}

.ms-title {
  padding: 2px 0;
  font-size: 12.5px;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-title:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ms.done .ms-title { color: var(--read); }
.ms.doing .ms-title { color: var(--ink); font-weight: 550; }

.ms-when {
  font-size: 10.5px;
  color: var(--faint);
}

.ms-when.is-late { color: var(--danger); }

/* The note sits on its own line under the title and not under the marker, which
   is what `2 / -1` buys over spanning the whole row. The grid centres its items
   and this one is a second line, so the row switches to top alignment when it
   has one. */
.ms:has(.note-peek) { align-items: start; }
.ms:has(.note-peek) .ms-mark { margin-top: 2px; }
.ms .note-peek { grid-column: 2 / -1; margin-top: -3px; }

/* --- empty state ---------------------------------------------------------- */

.empty-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px 52px;
  text-align: center;
}

.eb-title { font-size: 14px; font-weight: 600; color: var(--ink); }

.eb-text {
  max-width: 42ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.empty-big .btn { margin-top: 6px; }

/* --- activity ------------------------------------------------------------- */

.act-list { padding: 6px 0 10px; }

.act {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  padding: 7px 16px;
}

.act-mark {
  display: grid;
  place-content: center;
  padding-top: 2px;
  color: var(--tint);
}

.act-body { min-width: 0; }

.act-what {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.act-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.act-kind {
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tint);
}

.act-when { font-size: 10.5px; color: var(--faint); }

/* --- live task list ------------------------------------------------------- */

.pt-list { padding: 4px 0 10px; }

.pt {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 5px 16px;
}

.pt:hover { background: var(--hover); }

/* Wraps onto its own line rather than competing with the dates for the row's
   remaining width. The indent is the checkbox plus the gap, so the note starts
   under the title. A row without a note never wraps, so nothing changes for the
   rows that were already one line. */
.pt .note-peek {
  flex-basis: 100%;
  margin: -2px 0 2px 23px;
}

/* When it starts, as opposed to .pt-when, which is when it was finished. */
.pt-at {
  flex: none;
  font-size: 10.5px;
  color: var(--faint);
}

/* The row separating open work from finished work, and the control that folds
   the finished half away. */
.pt-donebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px 6px;
  margin-top: 2px;
  border-top: 1px solid var(--hair);
}

.pt.done .pt-title {
  color: var(--read);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}

.pt .tick {
  align-self: center;
  width: 13px;
  height: 13px;
  border-radius: 4px;
}

.pt-body {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  flex: 1;
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
}

/* The title takes the slack so every trailing mark sits right-aligned in the
   order it was appended, however many of them a row happens to have. */
.pt-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-due,
.pt-when {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--faint);
}

.pt-due.is-late { color: var(--danger); font-weight: 500; }

/* A flag rather than another date: on a row this dense the second date would
   read as a correction of the first. */

/* --- reference ------------------------------------------------------------ */

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px 4px;
}

.tool {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  color: var(--ink-2);
  background: var(--fill-2);
  border: 1px solid var(--hair);
}

@media (max-width: 980px) {
  .p-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}