/* C30: the six places; C32: built to the mockup (design/simple/simple.css). The "+ New" menu, the section heads, Home's
   question rows, Working now and the project cards, the Inbox's rows and requests, the Progress run cards and the
   Conversations groups. Colours come from the tokens of style.css, so both themes hold. Phone: every grid column is
   minmax(0, 1fr) so a long unbreakable word never stretches the page past a 390 px screen. */

/* ---------- "+ New" ---------- */
.new-menu { display: block; width: 100%; margin-bottom: 14px; }
.newmenu { position: relative; }
.newmenu > summary { list-style: none; width: 100%; justify-content: flex-start; gap: 8px; }
.newmenu > summary::-webkit-details-marker { display: none; }
.newmenu > summary .grow { flex: 1; }
.newmenu > summary svg.i:last-child { color: var(--muted); }
.newmenu-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.newmenu-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); font-weight: 550; }
.newmenu-item:hover { background: var(--hover); text-decoration: none; }
.newmenu-item svg.i { margin-top: 2px; color: var(--muted); }
.newmenu-item b { font-weight: 550; }
.newmenu-item small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

.tabbody { margin-top: 4px; }
.subtabs.minor { margin-top: -8px; }

/* ---------- generic bits of the mockup ---------- */
/* the user card in one row: avatar, name and role, the theme toggle, Sign out as an icon (its words for screen readers) */
.me { flex-wrap: nowrap; }
.me-actions { flex-basis: auto; }
.me-actions .theme-toggle { margin-left: 0; }
.me .signout { padding: 5px 7px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.late { color: var(--amber); font-weight: 600; }
.pc { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: var(--r-full); background: var(--amber-soft); color: var(--amber); font-size: 12px; font-weight: 650; line-height: 20px; text-align: center; }
.sechead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 10px; }
.sechead h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sechead a { font-size: 13px; font-weight: 550; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 13px; font-weight: 550; }
.link svg.i { width: 14px; height: 14px; transform: rotate(-90deg); }
.strip { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 11px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13.5px; }
.strip > svg.i { flex: none; width: 18px; height: 18px; }
.strip.red { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 28%, transparent); color: var(--text); }
.strip.red > svg.i, .strip.red b { color: var(--red); }
.note.overage { margin: 10px 0 0; }
.showall { display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 2px 0; border: 0; background: none; box-shadow: none; color: var(--text-2); font-size: 13px; font-weight: 450; cursor: pointer; }
.showall .track { position: relative; width: 30px; height: 18px; border-radius: var(--r-full); background: var(--border-strong); transition: background .15s; }
.showall .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-sm); transition: transform .15s; }
.showall[aria-pressed="true"] .track { background: var(--accent); }
.showall[aria-pressed="true"] .track::after { transform: translateX(12px); }

/* ---------- a question row (Home and the Inbox) ---------- */
.qlist { display: grid; gap: 8px; }
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.q .qmain { min-width: 0; }
.q .qtext { font-weight: 600; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.q .qtext .chip { margin-right: 8px; vertical-align: 1px; }
.q .age { margin-left: 8px; color: var(--faint); font-size: 12px; font-weight: 400; white-space: nowrap; }
.q .rec { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.q .rec svg.i { flex: none; width: 15px; height: 15px; color: var(--green); }
.q .rec .lbl { color: var(--muted); }
.q .qsub { margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.q .qsub a { color: inherit; }
.q .qstatus:empty { display: none; }
.q .qact { display: flex; align-items: center; gap: 6px; }
.opts { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 8px; }
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.opt .radio { width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); }
.opt .ol { font-weight: 550; overflow-wrap: anywhere; }
.opt .oc { grid-column: 2 / 4; color: var(--muted); font-size: 12.5px; }
.opt.best { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.opt.best .radio { border: 5px solid var(--accent); }
.decision.compact { display: flex; flex-direction: column; gap: 8px; }
.idbox { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2); color: var(--muted); font-size: 12.5px; }
.idbox[hidden], .opts[hidden] { display: none; }
.idbox .fulltext { grid-column: 1 / -1; max-height: 320px; overflow: auto; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.idbox .standing { grid-column: 1 / -1; }
.idbox code { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.idbox .copyrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.fulltext { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Home ---------- */
.home-needs, .home-working, .home-projects, .inbox-waiting, .inbox-requests { margin: 0 0 8px; }
.homegrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.homegrid > section:only-child { grid-column: 1 / -1; }
.work { padding: 6px 16px 14px; }
.work .wrow { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.work .wrow b { min-width: 24px; color: var(--text); font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.work .wnote { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; color: var(--muted); font-size: 12.5px; }
.projgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
a.proj { display: block; padding: 14px 16px; color: var(--text); }
a.proj:hover { text-decoration: none; border-color: var(--border-strong); }
.proj .ptop { display: flex; align-items: center; gap: 8px; }
.proj .ptop h3 { flex: 1; margin: 0; font-size: 15px; }
.proj .ptop .chip { margin: 0; }
.proj .pstatus { margin-top: 6px; color: var(--text-2); font-size: 13px; }
.proj .spend { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.proj .spend b { color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.proj .meter { margin-top: 7px; }
.proj .next { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; }
.proj .next b { flex: none; white-space: nowrap; } /* C36 Q12: "Nov 20" stays on one line */
.proj .next > span:first-child { min-width: 0; }
.portal-card { max-width: 520px; margin: 0 0 14px; }
.fold > summary { cursor: pointer; color: var(--text-2); font-weight: 550; }

/* ---------- the Inbox's requests ---------- */
.rlist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.rlist > .note { margin: 0; padding: 12px 14px; }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px 80px; gap: 14px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.rrow:last-child { border-bottom: 0; }
.rrow .rt { font-weight: 600; overflow-wrap: anywhere; }
.rrow .rs { color: var(--muted); font-size: 12.5px; }
.det { display: inline-flex; align-items: center; justify-self: end; gap: 3px; color: var(--muted); font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.det svg.i { width: 14px; height: 14px; transform: rotate(-90deg); }
.segs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--grey-soft); }
.segs .segbtn { height: auto; min-height: 26px; padding: 3px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 550; box-shadow: none; }
.segs .segbtn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- Progress ---------- */
.pagehead .stat { min-width: 220px; }
/* C34 P5: the project page's head as the mockup's .pagehead.ph: the title block and the spend card centred in one row, the
   card compact (project.html .minispend) and on every tab of the project */
.pagehead.ph { align-items: center; }
.minispend { min-width: 260px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--muted); font-size: 12.5px; }
.minispend b { color: var(--text); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.minispend .meter { margin-top: 6px; }
.progress-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.progress-card { display: flex; flex-direction: column; gap: 8px; }
.progress-card h3 { margin: 0; font-size: 15px; }
.progress-card h3 a { color: var(--text); }
.progress-card .stage-row { display: flex; flex-wrap: wrap; gap: 6px; }
.progress-card .foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.run-details > summary { cursor: pointer; color: var(--text-2); }
.run-details .kv { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r); overflow-wrap: anywhere; }
.run-details .row { display: flex; align-items: center; gap: 8px; }
.coming-next { margin: 20px 0 0; }
.coming-next ul { margin: 0 0 8px; padding-left: 18px; }

.conv-group { margin: 0 0 20px; }
.conv-group .sess-list { display: flex; flex-direction: column; }

@media (max-width: 900px) {
  .minispend { min-width: 0; width: 100%; }
  .homegrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .projgrid, .progress-grid { grid-template-columns: minmax(0, 1fr); }
  .q { grid-template-columns: minmax(0, 1fr); }
  .q .qact { flex-wrap: wrap; margin-top: 6px; }
  .q .rec { display: block; }
  .q .rec svg.i { margin-right: 4px; vertical-align: -3px; }
  .opt { grid-template-columns: 18px minmax(0, 1fr); }
  .opt .chip, .opt .oc { grid-column: 2; justify-self: start; }
  .rrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .rrow > div:first-child { grid-column: 1 / -1; }
  .rrow .rs.hp { display: none; }
  .strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .strip > .grow { display: none; }
  .strip > .btn { grid-column: 2; justify-self: start; }
  .sechead h2 { white-space: nowrap; }
  .newmenu-list { position: static; margin-top: 4px; box-shadow: none; }
}

/* ---------- Documents (C34): a quiet list: a title, when it changed, and Details for the path, type and size ---------- */
.doc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.doc-row .doc-open { min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.doc-row .doc-open:disabled { color: var(--muted); cursor: default; }
.doc-row .doc-open .title { font-weight: 600; overflow-wrap: anywhere; }
.doc-row .doc-open .meta { color: var(--muted); font-size: 12.5px; }
.doc-row .det-toggle { color: var(--muted); }
.doc-row .idbox { grid-column: 1 / -1; margin-top: 4px; }
.doc-body .doc-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.doc-body .idbox { margin: 0 0 12px; }

/* C34 P11: Next feature, one card per feature, its parts as short rows inside */
.launch-candidate .launch-parts { list-style: none; margin: 6px 0 2px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.launch-candidate .launch-part { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0 0; border-top: 1px solid var(--border); }
.launch-candidate .launch-part:first-child { border-top: 0; padding-top: 0; }
.launch-candidate .launch-part .launch-reason { color: var(--muted); font-size: 12.5px; }
.launch-candidate > .launch-reason { flex-basis: 100%; }
.doc-row .doc-open { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
.launch-pick, .launch-part-pick { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 10px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* C36 Q8: a button centres its content and carries a shadow by default; this header is a left-aligned title */
.launch-candidate > .launch-pick { flex-basis: 100%; gap: 2px 8px; }
.launch-pick:focus-visible, .launch-part-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }