/* The /worth result page (prompt R1).

   One page's stylesheet: the share card, the column of actions beside it, the
   row under it and the table of listed builders this size. Loaded by the three
   result renderers in views/worth.js through area: 'worth', and by nothing
   else. The form and the index block are base.css's, where they have always
   been; the working is here, because only a result page opens one.

   No border-radius and no box-shadow are written here. The card is a `.panel`
   and takes the site's one box - the radius, the hairline and the lift - from
   base.css; the only thing this file's dark variant changes is the ground and
   the ink on it, and that modifier is written in base.css beside the panel it
   belongs to. Every colour below is a token: there is no new hex on this page.

   Two sizes on the price, because it is the page: 40px on a phone, where
   "$315 a month" still lands on one line inside a 390px screen, and 56px from
   560px up. Those are the two figures the design asked for and they are
   deliberately off the seven-size scale, which tops out at 28px for a heading
   in a column of text. A number that is the whole answer is not a heading. */

/* ------------------------------------------------------- the lines and the
   working

   Four lines that only a result carries, and the disclosure under them. The
   headline and the share button beside them are base.css's, because /compare,
   /pin and /write draw those with base.css alone. */

/* The refinement, when the live half is on: the moved price and the sentence
   behind it, on one line under the suggestion. */
.worthrefined { margin-top: 6px; }

/* The audience the profile was read as, on a line of its own. Inside the
   sentence the chip broke the line it sat in; under it, it reads as the label
   it is. */
.worthniche { margin: 6px 0 0; }

/* The three numbers the estimate is made of, under the buttons: size, rate,
   and the middle of the index. One line of figures, quiet, because they are
   there to be checked rather than read. */
.worthstats {
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 10px;
}

/* The comparables table is on the page in the open, not inside the
   disclosure, so its heading carries a size and the space above it rather
   than taking both from a summary. */
.worthnearh2 { font-size: 19px; margin: 22px 0 0; }

/* The working, closed. The summary is a plain line of type rather than a
   button, because opening it is optional. */
details.worthhow {
  margin: 28px 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

details.worthhow > summary {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

details.worthhow > summary::-webkit-details-marker { display: none; }

details.worthhow > summary::before {
  content: "+ ";
  font-weight: 700;
}

details.worthhow[open] > summary::before { content: "- "; }

details.worthhow > summary:hover { color: var(--accent); }

/* The first block inside carries the space, so the disclosure does not jump
   open onto its own border. */
.worthhowbody { margin-top: 4px; }

.worthhowbody .facts { margin-top: 12px; }

.worthhowbody h2 { font-size: 19px; margin-top: 24px; }

/* The result is a card beside a column of buttons, which does not fit the
   640px reading column the form is in. It reads in the site's wider public
   column instead, the one the exploration was drawn at, selected off the
   block itself exactly the way base.css widens a prose page. */
main:has(> .wblock) { max-width: 940px; }

/* ------------------------------------------------------------- the block */

/* The card, and beside it what to do about it. One column on a phone, and
   from 900px the actions take a fixed column at the right so the card keeps
   the room its number needs. */
.wblock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin: 8px 0 20px;
}

@media (min-width: 900px) {
  .wblock { grid-template-columns: 1fr 260px; }
}

/* ------------------------------------------------------------ the card */

.wcard {
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 240px;
}

@media (min-width: 560px) {
  .wcard { padding: 32px 32px 24px; }
}

.wcardwho {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wcard .avatar.wcardav {
  width: 48px;
  height: 48px;
  border-color: var(--ink);
}

.wcardnames {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wcardhandle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ground);
}

.wcardsize {
  font-size: 12px;
  color: var(--ground);
  opacity: 0.62;
}

/* The middle is the answer. margin-top: auto pushes it off the head so the
   card reads head, answer, mark however tall the reasoning line runs. */
.wcardmid { margin-top: auto; }

.wcardprice {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--row-new);
}

@media (min-width: 560px) {
  .wcardprice { font-size: 56px; }
}

/* The unit at the size of a line of type, so the figure is the thing that is
   read and "a month" is only what it is a figure of. Same line, so the card
   says one price rather than a number and a caption. */
.wcardunit {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.72;
}

.wcardday {
  font-size: 15px;
  margin: 8px 0 0;
  color: var(--ground);
  opacity: 0.72;
}

.wcardreason {
  font-size: 14px;
  line-height: 1.45;
  margin: 16px 0 0;
  max-width: 480px;
  color: var(--ground);
  opacity: 0.82;
}

/* The mark at the left and the range at the right, on the card's own bottom
   edge. They wrap to two lines on a narrow screen rather than shrinking. */
.wcardfoot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--muted);
  font-size: 12px;
  color: var(--ground);
  opacity: 0.62;
}

/* --------------------------------------------------------- the actions */

.wcardact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.wcardact .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.wcardact .rule { margin: 0; }
.wcardnote { margin-top: 4px; }

/* The word that stands in for the share sheet when the link went to the
   clipboard instead. public/worth.js unhides it for two seconds. */
.worthcopied {
  font-size: 12px;
  color: var(--saved);
  text-align: center;
}

/* ------------------------------------------------------- the row under */

/* Three items on one line on a wide screen: the live half, the working, and
   the way out. On a phone they wrap to three lines, which is the order they
   are read in anyway. */
.wunder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 24px;
  margin: 0 0 24px;
  font-size: 13px;
}

.wunder > a { color: var(--accent); }

/* The disclosure is one of the three items while it is closed and takes the
   whole row once it is open, so the working reads across the column rather
   than down a third of it. */
.wunder details.worthhow { margin: 0; flex: 0 0 auto; }
.wunder details.worthhow[open] { flex: 1 1 100%; }

/* ------------------------------------------------------ the neighbours */

.wnearrule { margin: 4px 0 12px; }

.wnearwho {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wnear .avatar.wnearav {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.wnear tr.wnearyou { background: var(--row-new); }

.wnearme { font-weight: 700; }

.wneartag { margin-left: 8px; }

/* The figures (paint7). Followers, Price / month and Per 1k are numbers read
   down the column, so on a wide screen they sit on the right edge with their
   headings, and every digit takes the same width so the columns line up. The
   phone line below already puts them on the right. */
table.worthnear td:not(:first-child) { font-variant-numeric: tabular-nums; }

@media (min-width: 701px) {
  table.worthnear th:not(:first-child),
  table.worthnear td:not(:first-child) { text-align: right; }
}

/* On a phone a row is one line or it is not there (owner rule): face, handle,
   followers, price. base.css stacks every .stack table below 700 into a
   label-and-value line per cell, which made each builder four lines here, so
   that is undone for this table the way .dirlist undoes it for the
   directory. The per-1k figure is the column that goes. The smaller table
   (Listed builders near this size, three columns, no faces) takes the same
   line. Both classes on the selectors so they beat base.css's table.stack
   rules at every width the two overlap. */
@media (max-width: 700px) {
  table.stack.worthnear tr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
  }

  table.stack.worthnear td {
    display: block;
    width: auto;
    flex: none;
    padding: 0;
  }

  table.stack.worthnear td::before { content: none; display: none; }

  table.stack.worthnear td:first-child { flex: 1 1 auto; min-width: 0; }

  table.stack.worthnear td:nth-child(4) { display: none; }

  .wnearwho .cellval {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wneartag { flex: none; }
}

@media (max-width: 640px) {
  .wnear .avatar.wnearav { width: 24px; height: 24px; }
  .wneartag { margin-left: 4px; }
}

/* ------------------------------------------------- the roast (/roast)

   The roast result reuses the worth card whole: the same dark panel, the
   same head, the same big figure (the score here), the same foot, and the
   same column of buttons beside it. What is new is inside the middle: four
   short rows, each one part of the profile with what that spot rents for
   under it, and the one fix under a hairline. Tokens only, no radius. */

.rcard .wcardmid { margin-top: 0; }

.rrows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0 0;
}

.rrow { max-width: 560px; }

.rkick {
  font-size: 12px;
  margin: 0 0 4px;
  color: var(--ground);
  opacity: 0.62;
}

.rline {
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  color: var(--ground);
}

.rtag {
  font-size: 13px;
  margin: 4px 0 0;
  color: var(--row-new);
}

.rfix {
  font-size: 15px;
  line-height: 1.45;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--muted);
  color: var(--ground);
  max-width: 560px;
}

.rfix .rkick { display: block; }

/* The three prices on their own, only when the lines did not come back as
   the four parts and so cannot carry them. */
.rrent {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 15px;
}

.rrent li { padding: 4px 0; }

/* --------------------------------------------- who charges more (/game)

   One round: the streak, the media buyer's bubble, two builder cards side by
   side (at every width: the comparison is the game), and after the pick
   either Next pair or the end card. Cards and the bubble are .panel and take
   the site's one box from base.css; the bubble's tail is two borders, no
   radius. Tokens only. */

.gstreak {
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 12px;
}

.gbubble {
  position: relative;
  padding: 12px 16px;
  margin: 0 0 24px;
  max-width: 560px;
}

/* The tail, pointing down at the cards. */
.gbubble::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -12px;
  border-width: 12px 12px 0 0;
  border-style: solid;
  border-color: var(--hairline) transparent transparent transparent;
}

.gwho {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 4px;
}

.gsay {
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.gpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 24px;
}

@media (min-width: 560px) {
  .gpair { gap: 24px; }
}

.gcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px;
  min-width: 0;
}

@media (min-width: 560px) {
  .gcard { padding: 24px 20px; }
}

.gcard .avatar.gav {
  width: 64px;
  height: 64px;
  margin: 0 0 12px;
}

.ghandle {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gstat {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.gcard .btn.gpick {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

.gprice {
  font-size: 28px;
  font-weight: 700;
  margin: 16px 0 0;
  line-height: 1.1;
}

.gunit {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.gtag {
  font-size: 12px;
  margin: 4px 0 0;
  color: var(--accent);
}

.gprice + .gtag { margin-top: 8px; }

.gsee {
  font-size: 13px;
  margin-top: 12px;
}

/* The one that charges more gets the accent edge; the other steps back. */
.gcard.ghigh { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gcard.glow .gprice { color: var(--muted); }

.gnext { margin: 0 0 24px; }

.gend {
  padding: 24px;
  margin: 0 0 24px;
  max-width: 560px;
}

.gendbig {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--surface);
}

.gendact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gend .gagain { margin: 16px 0 0; }
.gend .gagain a { color: var(--surface); }