/* Taam — studio.css: the designer's screens around the reports: the project list, one project, an
   incoming result and the settings (docs/spec/ux.md 2.5 – 2.7 and 2.10). Builds on base.css and
   changes nothing shared outside these screens' own containers.

   .storage-note  .backup-nudge  .isheet__noname     a notice that is one row: text, then a link
   .setup  .setup__fields                             first-run panel on the project list
   .studio__search  .pcards  .pcard                   the list: project cards are title blocks that are links
   .np-members                                        the name rows of the new-project dialog
   .proj-top  .proj  .proj__members (--scroll)  .proj__members-in  .proj__compare
                                                      the project page: members beside the comparison on desk
   .mrows  .mrow  .mrow__text  .mrow__actions  .mrow__status  .mrow.is-flash
   .member-add  .paste  .paste__add                   inline "add a name", the result-link box
   .isheet__msg  .isheet__link  .isheet__actions  .isheet__here      the invite sheet (.invite is the client's screen)
   .compare-off                                      placeholder when the comparison cannot be shown
   .imp  .imp__preview  .imp__styles  .imp__strip  .imp__dest  .imp__choose  .imp__actions
   .set__head  .set__actions  .set__danger  .set__about
*/

/* ---------- notices that are one row ---------- */

.storage-note, .backup-nudge, .isheet__noname {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  font: 400 0.875rem/1.375rem var(--font-text);
}
.storage-note .icon { color: var(--c-redline); }
/* iPhone in a browser tab: "add the app to the Home Screen" (project list, shown once). */
.install-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); font: 400 0.875rem/1.375rem var(--font-text); }

/* ---------- project list (2.6) ---------- */

.setup { display: flex; flex-direction: column; gap: var(--s-4); }
.setup__fields { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 600px) {
  .setup__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  /* Level with the inputs: a label line (22px) and its 6px gap sit above them. */
  .setup__fields .btn { margin-block-start: 28px; min-height: 48px; }
}

.studio__search { max-width: 420px; }

.pcards { display: grid; gap: var(--s-4); }
@media (min-width: 1100px) {
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  /* Two cards share the row, and four equal cells would break the date in two. Each cell takes the
     width its value needs and the rest is shared. The name row spans them all and must not weigh in,
     so it reports no width of its own. */
  .pcard { grid-template-columns: repeat(var(--cells, 3), minmax(0, auto)); }
  .pcard .tblock__main { width: 0; min-width: 100%; }
}
/* Dates and "2 of 3" share the cell row with one figure: same line box, quieter weight. */
.pcard .tblock__val { display: flex; align-items: center; min-height: 24px; }
.pcard .tblock__val--text { font: 500 0.9375rem/1.5rem var(--font-text); }

/* New-project dialog: the list of names. */
.np-members { border: 0; margin: 0; padding: 0; min-width: 0; }
.np-members legend { padding: 0; margin-block-end: 6px; }
.np-members__more { margin-block-start: var(--s-1); }

/* ---------- project (2.7) ---------- */

.proj-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; }
.proj-top .crumb { margin: 0; }

.proj { display: grid; gap: var(--s-7) var(--s-6); align-items: start; }
.proj__members { padding: var(--s-4); min-width: 0; }
.proj__members-in { display: flex; flex-direction: column; gap: var(--s-4); }
.proj__compare { min-width: 0; }
@media (min-width: 1100px) {
  .proj { grid-template-columns: 360px minmax(0, 1fr); }
  /* Sticky beside a long comparison. */
  .proj__members { position: sticky; top: var(--s-4); }
  /* Only a household that outgrows the window scrolls inside the panel (project.js measures it):
     a scrolling box would clip the rows' overflow menus. There the last row's menu opens upward. */
  .proj__members--scroll { max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; overscroll-behavior: contain; }
  .proj__members--scroll .mrow:last-child:nth-child(n + 4) .menu__list { top: auto; bottom: calc(100% + 4px); }
  /* The margin column is on the far side of the members panel here, so section markers stay inline. */
  .proj__compare .sec-head .sec-marker { position: static; transform: none; }
}

.mrows { display: flex; flex-direction: column; }
.mrow {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--s-3); row-gap: var(--s-1);
  padding: var(--s-3) var(--s-2); margin-inline: calc(-1 * var(--s-2));
  border-block-start: 1px solid var(--c-rule);
}
.mrow:last-child { border-block-end: 1px solid var(--c-rule); }
.mrow.is-flash { background: var(--c-blue-wash); }
.mrow__text { min-width: 0; }
.mrow__actions { display: flex; align-items: center; gap: var(--s-1); }
.mrow__status { grid-column: 2 / -1; justify-self: start; white-space: normal; }

.member-add { display: flex; align-items: flex-start; gap: var(--s-2); margin-block-start: calc(-1 * var(--s-2)); }
.member-add .btn--secondary { min-height: 48px; }
.member-add .icon-btn { height: 48px; }

.paste { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: start; }
.paste__add { margin-block-start: 28px; min-height: 48px; }   /* level with the input, under the label */

/* Invite sheet. */
.isheet__msg {
  padding: var(--s-3) var(--s-4);
  font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-ink);
  overflow-wrap: anywhere;
}
.isheet__link { font: 400 0.8125rem/1.125rem var(--font-label); color: var(--c-graphite); }
.isheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.isheet__here { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.isheet__here p { color: var(--c-pencil); }
@media (max-width: 599.98px) {
  .isheet__actions { flex-direction: column; align-items: stretch; }
  .isheet__here { align-items: stretch; }
}

.compare-off { display: flex; align-items: center; gap: var(--s-3); }

/* ---------- incoming result (2.5) ---------- */

.imp__preview { display: flex; flex-direction: column; gap: var(--s-4); }
.imp__styles { display: grid; gap: var(--s-4); }
.imp__strip { --cols: 3; }
.imp__dest { display: flex; flex-direction: column; gap: var(--s-3); }
.imp__choose { display: grid; gap: var(--s-3); }
.imp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
@media (min-width: 600px) {
  .imp__styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .imp__strip { --cols: 6; }
  .imp__choose { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 599.98px) {
  .imp__actions { flex-direction: column; align-items: stretch; }
}

/* ---------- settings (2.10) ---------- */

/* The panel heading is the label of a dimension line. */
.set__head .dim__label { color: var(--c-graphite); }
.set__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.set__danger .btn { padding-inline: 0; }
.set__about { margin-block-start: var(--s-4); }
@media (max-width: 599.98px) {
  .set__actions { flex-direction: column; align-items: stretch; }
}