/* Taam: studio.css. The designer's work screens around the reports: the project list, one project, an
   incoming result and the settings (docs/look/system.md 4.6, 4.7, 4.10). Builds on base.css: tiles, soft
   rows, pills and capsules come from there; this file only composes them on the page grid.

   .studio  .studio__notes  .studio__start  .studio__visual  .studio__head  .studio__counts  .studio__search  .studio__none
   .studio__body (--few)  .pfew  .ppanel  .studio__aside  .snext  .srecent  .show  .snext__row
                                                   a short list: panels with their people beside what comes next
   .studio__backup  .studio__foot                  the line that closes the list: the backup, the trash
   .storage-note  .backup-nudge  .install-note     notices on the list
   .setup  .setup__text  .setup__fields            the first-run tile (dark)
   .pcards  .pcard                                 a long list: project cards (summary tiles 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: people beside the comparison on desk
   .mrows  .mrow  .mrow__text  .mrow__name  .mrow__actions  .mrow__status  .mrow.is-flash
   .member-add  .paste  .paste__add                "add a name" (a capsule), the result box (a stone block)
   .isheet__msg  .isheet__link  .isheet__actions  .isheet__here  .isheet__noname      the invite sheet
   .compare-off                                    what stands in the comparison's place when it cannot be drawn
   .set  .set-grid  .set__tile  .set__fields  .set__deck  .set__row  .set__rowtext  .set__actions  .set__lines  .set__about
*/

/* ---------- the project list (4.6) ---------- */

.studio, .proj-page, .set, .trash { display: flex; flex-direction: column; gap: var(--gap-tiles); }

/* Notices above the list: one row each; two share a row on desk. */
.studio__notes { display: grid; gap: var(--gap-tiles); }
.studio__notes:not(:has(> *)) { display: none; }
@media (min-width: 1100px) {
  .studio__notes:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.storage-note, .backup-nudge, .isheet__noname { font: 400 15px/1.45 var(--font); }
.storage-note .icon { color: var(--danger); }
.storage-note .link, .backup-nudge .link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
.install-note, .upload-offer { align-items: flex-start; font: 400 15px/1.45 var(--font); }
.install-note > .grow, .upload-offer > .grow { flex-basis: 280px; }

/* First run: the studio's name and number, on the one dark tile of the page. */
.setup { display: grid; gap: var(--s-5); align-items: center; }
.setup__text { display: grid; gap: var(--s-2); }
.setup__text p { color: var(--ivory-2); max-width: 46ch; text-wrap: pretty; }
.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 (21px) and its 6px gap sit above them; the input is 4px taller. */
  .setup__fields .btn { margin-block-start: 29px; }
}
@media (min-width: 1100px) {
  .setup { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); }
}

/* Nothing yet: the empty state in seven columns and, beside it on desk, one dark tile: the first-run form,
   or (once the studio has its name) the still cards the invite page shows. Never a lone strip on a wide page. */
.studio__start { display: grid; gap: var(--gap-tiles); }
.studio__start .empty { max-width: none; margin: 0; }
.studio__visual { display: none; }
/* A step number in the glyph's circle: the step to take now in the accent, the one after it quiet. */
.ph--step { font: 700 20px/1 var(--font); color: var(--ink-2); }
.ph--step.is-now { background: var(--accent); color: var(--on-accent); }
.setup__text .ph--step { margin-block-end: var(--s-2); }
@media (min-width: 1100px) {
  .studio__start { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .studio__start > * { grid-column: 1 / -1; }
  .studio__start--pair > .empty { grid-column: span 7; justify-content: center; }
  .studio__start--pair > .setup { grid-column: span 5; grid-template-columns: minmax(0, 1fr); align-content: center; }
  .studio__start--pair .setup__fields { grid-template-columns: minmax(0, 1fr); }
  .studio__start--pair .setup__fields .btn { margin-block-start: var(--s-1); justify-self: start; }
  .studio__start--pair > .studio__visual {
    grid-column: span 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
    --card-w: 180px;
  }
}

.studio__head { margin-block: var(--s-3) 0; }
.studio__head .page-head__actions { flex: 1 1 auto; justify-content: flex-end; }
/* The studio's three counts stand right after the title; the search and the button close the row. */
.studio__head .sec-head__text { flex: 0 1 auto; }
.studio__counts { margin-inline-end: auto; padding-block: 8px; }
.studio__search { flex: 0 1 360px; min-width: 200px; }
.studio__search .field__input { min-height: var(--btn-h); }
@media (max-width: 599.98px) {
  .studio__head .page-head__actions { flex: 1 1 100%; justify-content: flex-start; }
  .studio__search, .studio__counts { flex: 1 1 100%; }
}
.studio__none { color: var(--ink-2); padding: var(--s-6) var(--pad-tile); border-radius: var(--r-lg); background: var(--stone); }

/* A short list (under four projects): each household is a panel that lists its people; beside the panels
   on desk, what to do next (the page's dark tile) and the answers that arrived last. Nothing is stretched
   to its neighbour: every tile is as tall as what it holds. */
.studio__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-tiles); align-items: start; }
.pfew, .studio__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-tiles); min-width: 0; }
.studio__aside:not(:has(> *)) { display: none; }
@media (min-width: 1100px) {
  .studio__body--few { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pfew { grid-column: span 8; }
  .studio__aside { grid-column: span 4; position: sticky; top: calc(var(--hdr-h) + var(--s-4)); }
  .studio__body--few:not(:has(.studio__aside > *)) .pfew { grid-column: 1 / -1; }
}
.ppanel { display: flex; flex-direction: column; gap: var(--s-5); }
.ppanel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.ppanel__title { display: grid; gap: var(--s-3); min-width: 0; flex: 1 1 260px; }
.ppanel__name { overflow-wrap: anywhere; }
.ppanel__name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
.ppanel__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* From tablet a person is a block of their own (who, where they stand, what to do), side by side: no row
   runs the width of the panel with its name at one end and its button at the other. */
@media (min-width: 600px) {
  .ppanel .mrows { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-3); }
  .ppanel .mrow {
    grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: start;
    row-gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md);
  }
  .ppanel .mrow__bubble { margin-block-start: -2px; }
  .ppanel .mrow__status { grid-column: 1 / -1; grid-row: 2; }
  .ppanel .mrow__actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
}
/* How a project runs, while the studio has no answer yet: the three steps, one under the other. */
.show { display: flex; flex-direction: column; gap: var(--s-4); }
.show .rp-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.show .rp-steps__item { align-items: center; }

/* Rows that are links: the line, a caption under it, the chevron at the end. */
.snext, .srecent { display: flex; flex-direction: column; gap: var(--s-4); }
.snext__rows { display: grid; gap: var(--s-2); }
.snext__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 64px; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ground); color: var(--ink); text-decoration: none;
  transition: background .3s var(--ease);
}
.snext__text { display: grid; gap: 2px; min-width: 0; }
.snext__text b { font: 600 16px/1.35 var(--font); overflow-wrap: anywhere; }
.snext__row .icon { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform .3s var(--ease); }
.tile--stone .snext__row { background: var(--tile); }
.on-dark .snext__row, .on-dark a.snext__row:not(.btn) { background: var(--espresso-2); color: var(--ivory); }
.on-dark .snext__row .icon { color: var(--ivory-3); }
@media (hover: hover) and (pointer: fine) {
  .snext__row:hover { background: var(--stone); }
  .tile--stone .snext__row:hover { background: var(--ground); }
  .on-dark .snext__row:hover { background: var(--wash-dark-2); }
  .snext__row:hover .icon { transform: translateX(-4px); }
}

/* A long list: cards across the page (three at 1440), the studio's counts as chips in the head. */
.pcards { display: grid; gap: var(--gap-tiles); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.pcard { align-content: space-between; row-gap: var(--s-5); }
/* Phone: the three figures share one row, so twenty projects are not a seven-screen page. */
@media (max-width: 599.98px) {
  .pcard { row-gap: var(--s-4); }
  .pcard .sum__stats:not(:has(> :nth-child(4))) { flex-wrap: nowrap; gap: 6px; }
  .pcard .sum__stats:not(:has(> :nth-child(4))) .stat { min-width: 0; padding: 10px 8px; }
  .pcard .sum__stats:not(:has(> :nth-child(4))) .stat__val { font-size: 15px; }
  .pcard .sum__stats:not(:has(> :nth-child(4))) .stat__cap { white-space: nowrap; }
}
.pcard .sum__main { gap: 6px; }
.pcard__marks { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-1); }
/* Dates and "2 of 3" share the row with one figure: the same line box for all of them. */
.pcard .stat__val { display: flex; align-items: center; min-height: 26px; }
/* A date stays on one line: each cell takes the width its value needs and the rest is shared. */
.pcard .stat { flex: 1 1 auto; padding-inline: 14px; }
.pcard .stat__val--text { white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 1100px) {
  .studio__start--pair { min-height: 440px; min-height: max(440px, min(540px, calc(100dvh - 340px))); }
}

.studio__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4);
  min-height: 44px;
}
.studio__foot .link { display: inline-flex; align-items: center; min-height: 44px; }
.studio__backup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); color: var(--ink-2); font: 400 15px/1.45 var(--font); }

/* 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); }

/* ---------- one project (4.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-top + .sum { margin-block-start: calc(var(--s-2) - var(--gap-tiles)); }
.proj-closed { font: 400 15px/1.45 var(--font); }
.proj-page > .sum .t-h1.truncate { white-space: normal; overflow-wrap: anywhere; }   /* the page's own title wraps */

.proj { display: grid; gap: var(--gap-tiles); align-items: start; }
.proj__members { min-width: 0; }
.proj__members-in { display: flex; flex-direction: column; gap: var(--s-4); }
/* The comparison: a column of tiles, each as tall as what it holds. Its title stands inside its first
   tile, so the two columns start on one line. */
.proj__compare { min-width: 0; display: grid; align-content: start; }
@media (min-width: 1100px) {
  /* People in four of the twelve columns, the comparison in eight. */
  .proj { grid-template-columns: minmax(380px, 1fr) minmax(0, 2fr); }
  .proj__members { position: sticky; top: calc(var(--hdr-h) + var(--s-4)); }
  /* Only a household that outgrows the window scrolls inside the tile (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 - var(--hdr-h) - 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); }

  /* No comparison yet (its place holds the "not yet" tile): the people are the work, so they take the
     eight columns, with the result box beside the rows, and the way to a comparison stands in four as
     three steps one under the other. Both tiles end level: the steps share the height. */
  .proj:has(.rp-compare__off, .compare-off) { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); align-items: stretch; }
  .proj:has(.rp-compare__off, .compare-off) .proj__members { position: static; max-height: none; overflow: visible; }
  .proj:has(.rp-compare__off, .compare-off) .proj__members-in {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); column-gap: var(--s-5); row-gap: var(--s-4);
    align-items: start; align-content: start;
  }
  .proj:has(.rp-compare__off, .compare-off) .proj__members-in > * { grid-column: 1; }
  .proj:has(.rp-compare__off, .compare-off) .proj__members-in > .tile__title { grid-column: 1 / -1; }
  .proj:has(.rp-compare__off, .compare-off) .proj__members-in > .paste { grid-column: 2; grid-row: 2 / span 3; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); }
  .proj:has(.rp-compare__off, .compare-off) .paste__add { margin-block-start: 0; justify-self: start; }
  .proj:has(.rp-compare__off, .compare-off) .proj__compare { align-content: stretch; }
  .proj:has(.rp-compare__off) .rp-compare { grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; }
  .proj:has(.rp-compare__off) .rp-steps { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(56px, 1fr); }
  .proj:has(.rp-compare__off) .rp-steps__item { align-items: center; }
}

.mrows { display: grid; gap: var(--s-2); }
.mrow {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--s-3); row-gap: var(--s-2);
  min-height: 56px; padding: var(--s-3); padding-inline-start: var(--s-4);
  border-radius: var(--r-sm); background: var(--ground);
  transition: background 1s var(--ease);
}
.mrow.is-flash { background: var(--accent-wash); transition-duration: 0s; }
.mrow__text { min-width: 0; display: grid; gap: 2px; }
.mrow__name { font: 600 17px/1.3 var(--font); }
.mrow__text p { color: var(--ink-2); }
.mrow__actions { display: flex; align-items: center; gap: var(--s-1); }
.mrow__name.truncate { white-space: normal; overflow-wrap: anywhere; }   /* a name wraps; it is never cut */
.mrow__status { grid-column: 2 / -1; justify-self: start; }
.mrow__status.pill, .mrow__status .pill { white-space: normal; }
@media (max-width: 599.98px) { .mrow__status { grid-column: 1 / -1; } }
.proj__members .t-cap { color: var(--ink-2); }

/* "Add to the household": a quiet button that opens into a capsule (the field and its button in one pill). */
.member-add { display: flex; align-items: center; min-height: 44px; }
.member-add--open { min-height: 60px; }
.member-add--open .btn { min-height: 44px; }

/* The result box: a stone block inside the people tile; the tone sets it apart, not a line. */
.paste { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: start; }
.paste__add { margin-block-start: 29px; }   /* level with the input, under the label */

/* Invite sheet. */
.isheet__msg {
  border-radius: var(--r-md); padding: var(--s-4) 20px;
  font: 400 15px/1.5 var(--font); color: var(--ink);
  overflow-wrap: anywhere;
}
/* The link inside the message preview: one line, cut with an ellipsis (the message that is sent has it whole). */
.isheet__link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 13px/1.4 var(--font-code); color: var(--ink-2); }
.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); }
@media (max-width: 599.98px) {
  .isheet__actions { flex-direction: column; align-items: stretch; }
  .isheet__here { align-items: stretch; }
}

/* In the comparison's place: one stone tile, as tall as what it says. */
.compare-off { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.compare-off p { color: var(--ink-2); }

/* ---------- incoming result (4.5) ---------- */

/* The page itself (.incoming ...) is dressed in css/client.css. */

/* ---------- settings (4.10) ---------- */

.set__head { margin-block: var(--s-3) 0; }
.set-grid { display: grid; gap: var(--gap-tiles); }
.set-grid > * { min-width: 0; }
@media (min-width: 1100px) {
  /* Seven and five, row after row, paired by how much each holds (details beside backup, the passphrase
     beside the devices); a row tile (.set__row) runs the width. */
  .set-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .set-grid > * { grid-column: span 7; }
  .set-grid > :nth-child(even) { grid-column: span 5; }
  .set-grid > .set__row { grid-column: 1 / -1; }
}
.set__tile { display: flex; flex-direction: column; gap: var(--s-5); }
/* The studio's details: name and number side by side on desk, the deck size under them. */
.set__fields { display: grid; gap: var(--s-4); align-items: start; }
.set__fields > * { min-width: 0; }
@media (min-width: 1100px) {
  .set__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: var(--s-5); }
  .set__deck { grid-column: 1 / -1; }
}
/* A notice that is one row of the grid: what it is at the start, its buttons at the end. */
.set__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.set__rowtext { display: grid; gap: var(--s-2); flex: 1 1 320px; min-width: 0; }
.set__tile > .tile__title:focus { outline: none; }
.set__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
/* Changing the passphrase: the current one, then the new one and its repeat side by side on desk. */
.set__pass { display: grid; gap: var(--s-4); align-items: start; }
.set__pass > * { min-width: 0; }
@media (min-width: 1100px) {
  .set__pass { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .set__pass > * { grid-column: 1 / -1; }
  .set__pass > div.field:nth-of-type(2), .set__pass > div.field:nth-of-type(3) { grid-column: auto; }
}
.set__lines { display: grid; gap: var(--s-1); }
.set__lines p { color: var(--ink-2); }
.tile--danger .set__lines p, .tile--danger .tile__body { color: var(--ink); }
.set__about { margin-block-start: var(--s-2); }
@media (max-width: 599.98px) {
  .set__actions { flex-direction: column; align-items: stretch; }
}