/* A phrase, wherever it is shown.

   It appears on its own page, built once at deploy time, and in the dialog the wall opens, built
   in the browser (src/lib/record-view.mjs builds both). These are the rules they share, in a
   sheet of their own because styles.css was full and because they belong together. */

.shared-swap{margin:16px auto 0;font-size:15px;color:var(--ink-soft)}
.shared-swap span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--muted);margin-bottom:4px}
.shared-swap b{font-size:19px;font-weight:600;color:var(--tofu-ink)}
.shared-ask{margin:24px auto 12px;font-weight:600;font-size:16px;color:var(--ink)}
/* Look closer: one line until somebody asks for more. */
.closer{margin-top:clamp(28px,4vh,40px);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface)}
.closer summary{display:grid;grid-template-columns:1fr auto;gap:2px 16px;cursor:pointer;
  padding:16px 20px;list-style:none;border-radius:var(--r-sm)}
.closer summary::-webkit-details-marker{display:none}
.closer summary::after{content:"";grid-column:2;grid-row:1 / span 2;align-self:center;
  width:9px;height:9px;margin-right:3px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:translateY(-3px) rotate(45deg);
  transition:transform .2s ease}
.closer[open] summary::after{transform:translateY(2px) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.closer summary::after{transition:none}}
.closer summary:hover{background:var(--sunk)}
.closer summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.closer-say{grid-column:1;font-weight:600;font-size:16px;color:var(--ink)}
.closer-what{grid-column:1;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.closer-body{padding:4px 20px 22px;border-top:1px solid var(--line);margin-top:-1px}
.closer-body .facts{padding-top:18px}
@media(max-width:560px){.closer summary{padding:14px 16px}.closer-body{padding:4px 16px 18px}}
.two-looks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,18px);margin:22px 0 4px}
.two-looks figure{margin:0}
.two-looks img{display:block;width:100%;height:auto;border-radius:var(--r-sm);background:var(--sunk)}
.two-looks figcaption{margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-align:center}
@media(max-width:420px){.two-looks figcaption{font-size:10.5px;letter-spacing:.04em}}

.look-title{font-family:var(--serif);font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.025em;font-weight:600;margin:14px 0 10px}
/* The phrase, as a card, the way the home page shows one. */
.shared-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow);text-align:center}
.shared-card .tag-row{justify-content:center}
.shared-card .look-title{margin:14px 0 10px;text-align:center}
.shared-card .hook{font-size:17px;color:var(--ink-soft);line-height:1.5;margin:0 auto;max-width:44ch}
.shared-react{max-width:420px;margin:0 auto;text-align:left}
.shared-react .vote{grid-template-columns:1fr 1fr}

/* Inside the dialog the panel is already the card: a white card on a white panel draws a second
   box around the same thing. The order, the alignment and the spacing stay identical to the
   page's; only the box goes. */
.dlg .shared-card{background:transparent;border:0;box-shadow:none;padding:0}
.dlg .shared-card .look-title{font-size:clamp(28px,4.2vw,40px)}
.centered-row{justify-content:center}