/* Records: the colorway record, the tap (chip) page, the owner's living page and the coming-soon destinations.
   Phone first. The tap stays one centred 520px column at every width; the colorway record and the owner's
   page open into two columns on wide screens. Shared tokens come from style.css. */

.record-back{margin:0 0 4px}
.record-back a{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;font-family:var(--label);font-size:11px;letter-spacing:var(--track);text-transform:uppercase;color:var(--grey);text-decoration:none}
.record-back a:hover{color:var(--ink);text-decoration:underline}
.record-head{margin:0 0 8px}
.record-head .t,.record-head .lbl{margin:0}
.tap-voice{font-size:18px;max-width:24ch;margin:8px auto 4px}
.pulled-note{margin:4px 0 0}
.record-body .record-note{margin:0 0 8px;color:var(--ink);text-align:center}
.record-body h1{overflow-wrap:anywhere}
.rec dd{color:var(--muted);font-family:Georgia,serif}
.links-inline{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 14px}
.links-inline a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
.room-line{text-align:center}
.sold-help{text-align:center}
.record-actions form{margin:0}
.pull-status:empty,.share-status:empty{display:none}
.pull-status,.share-status{margin:8px 0 0;text-align:center}
.pull-refresh{margin:0;text-align:center}
.pull-refresh a{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0}
.record .note{margin-top:12px}

/* owner: share its record */
.share{margin:22px 0 0;padding-top:4px;border-top:1px solid var(--line)}
.share .small{margin:0 0 6px}
.share-row{display:flex;gap:10px;align-items:flex-end}
.share-row input{flex:1 1 auto;min-width:0;font-size:14px!important;color:var(--muted)!important}
.share-row .button{flex:none}

/* what the living page does not have yet, said plainly */
.later{margin:32px 0 0}
.later .row{min-height:56px}

/* also in the room: real colorways of the same night */
.also{margin:36px 0 0}
.also-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.also-list a{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;height:100%;padding:10px 6px;border:1px solid var(--line);text-align:center;text-decoration:none;font-family:var(--label);font-size:11px;letter-spacing:.06em;line-height:1.4;color:var(--muted);text-transform:lowercase}
.also-list a:hover{border-color:var(--ink);color:var(--ink)}
.also-list img{display:block;width:72%;aspect-ratio:1/1;object-fit:contain}

/* coming-soon destinations */
main.destination{text-align:center;padding-top:clamp(28px,8vh,96px)}
.destination-mark{display:block;width:56px;height:56px;object-fit:contain;margin:0 auto 8px}
.destination-body{max-width:36ch;margin:0 auto;color:var(--muted)}
main.destination .record-actions{max-width:360px;margin:28px auto 0}
.destination-more{margin:36px 0 0;border-top:1px solid var(--line)}
.destination-more ul{display:flex;justify-content:center;flex-wrap:wrap;gap:0 24px}
.destination-more a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--label);font-size:11px;letter-spacing:var(--track);text-transform:uppercase;color:var(--grey);text-decoration:none}
.destination-more a:hover,.destination-more a[aria-current=page]{color:var(--ink)}
.destination-more a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}

@media(max-width:359px){
  .also-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .share-row{flex-wrap:wrap}
  .share-row .button{width:100%}
}
@media(min-width:700px){
  .also-list{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(min-width:900px){
  /* the tap is phone-first: a laptop just gets more white */
  main.record-shell.mode-unit:not(.is-owner){max-width:520px}
  main.record-shell.mode-unit:not(.is-owner) .record{display:block;margin-top:0}
  main.record-shell.mode-unit:not(.is-owner) .record-body h1{text-align:center;font-size:18px}
  main.record-shell.mode-unit:not(.is-owner) .product{width:66%;max-width:300px}
  main.record-shell.mode-unit:not(.is-owner) .record-body .small{text-align:center}
  .record-body .record-note,.room-line,.sold-help{text-align:left}
  .record-head{display:flex}
  .record-actions{flex-direction:row;flex-wrap:wrap}
  .record-actions>.button,.record-actions>form{flex:1 1 200px}
  .later .rows{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;border-top:0}
  .later .row{border-top:1px solid var(--line)}
}

.destination .record-actions{max-width:300px;margin-top:24px}.destination .destination-more{margin-top:28px}.destination h1.q{font-size:25px;margin-bottom:12px}

/* Destination navigation sits at the desktop page bottom without covering content. */
@media(min-width:900px){
 body:has(.destination-more){min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}
 body:has(.destination-more)>.site-head{flex-shrink:0}
 main:has(>.destination-more){flex:1;display:flex;flex-direction:column;padding-bottom:16px}
 main:has(>.destination-more)>*{flex-shrink:0}
 main:has(>.destination-more)>.destination-more{margin-top:auto;padding-top:28px;border-top:0}
 main:has(>.destination-more)>.destination-more ul{border-top:1px solid var(--line)}
 main:has(>.destination-more)>.record-actions{width:100%}
}


/* Compact owner actions; navigation stays a text link at all widths. */
.record-actions.owner-actions{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px 20px;flex-wrap:wrap;margin-top:20px}
.record-actions.owner-actions>.button{width:auto;flex:0 0 auto;min-height:44px;padding:8px 16px}
.owner-back{font-size:13px;display:inline-flex;align-items:center;min-height:44px;color:var(--grey);text-underline-offset:3px}
.owner-actions .share-status{flex-basis:100%;text-align:left;margin:0}