/* The agency's own screens — bringing a site in, asking a reviewer to look, and where their link
   lands — are one screen in three files. The pieces live here once, in PACE's names (house.css),
   so the three cannot drift apart again the way they had. */
*{box-sizing:border-box}
/* .screen and .line are flex, and flex wins over the hidden attribute unless this says otherwise */
[hidden]{display:none!important}
body{font:15px/1.45 var(--pace-font);color:var(--pace-ink);letter-spacing:-.003em;margin:0;padding:28px;
  -webkit-font-smoothing:antialiased;background:var(--pace-canvas)}
main{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1{font-size:22px;letter-spacing:-.02em;margin:0;font-weight:600}
h2{font-size:18px;letter-spacing:-.015em;margin:0 0 4px;font-weight:600}
p{margin:0}
.eyebrow{font:var(--pace-tiny)/1 var(--pace-font);font-weight:600;letter-spacing:.095em;
  text-transform:uppercase;color:var(--pace-ink-3);margin:0 0 10px}
.lede{color:var(--pace-ink-2);margin:0 0 14px}
.card{background:var(--pace-glass);-webkit-backdrop-filter:var(--pace-blur);backdrop-filter:var(--pace-blur);
  border:var(--pace-edge);border-radius:var(--pace-r-lg);box-shadow:var(--pace-lift);padding:16px 18px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a.pill,.pill{height:38px;padding:0 18px;border-radius:var(--pace-pill);display:inline-flex;align-items:center;
  gap:8px;background:var(--pace-ink);color:var(--pace-on-ink);font-size:14px;font-weight:600;text-decoration:none}
.pill.ghost{background:var(--pace-solid);color:var(--pace-ink);border:var(--pace-line) solid var(--pace-hair);font-weight:500}
.pill.small{height:28px;padding:0 12px;font-size:var(--pace-tiny)}
.pill:disabled{opacity:.4;cursor:default}
.tag{font-size:var(--pace-tiny);padding:2px 9px;border-radius:var(--pace-pill);background:var(--pace-hair-2);
  color:var(--pace-ink-2);font-weight:600}
.dot{width:11px;height:11px;border-radius:var(--pace-round);background:var(--mark,var(--pace-hair-2));flex:none}
.s-in{--mark:var(--pace-live)}.s-hers{--mark:var(--pace-warn)}.s-later{--mark:var(--pace-hair-2)}.s-bad{--mark:var(--pace-bad)}
.line{display:flex;gap:10px;padding:10px 0;border-bottom:var(--pace-line) solid var(--pace-hair);align-items:center;
  width:100%;text-align:left}
.line:last-child{border-bottom:0}
.line b{font-size:13.5px;font-weight:600}
/* the dot is a span too, so this has to be the LAST one or both take the free space and
   the whole row drifts into the middle */
.line>span:last-child{font-size:var(--pace-tiny);color:var(--pace-ink-2);margin-left:auto}
/* the one number she is looking for down the list: how many notes wait on her here */
.line>span.waits{color:var(--pace-ink);font-weight:600}
button.line{cursor:pointer}
button.line:hover b{text-decoration:underline}
.say{display:flex;align-items:center;gap:8px;min-height:54px;padding:7px 7px 7px 20px;
  border-radius:var(--pace-pill);background:var(--pace-glass-2);border:var(--pace-line) solid var(--pace-hair);
  box-shadow:var(--pace-lift),inset 0 var(--pace-line) 0 var(--pace-rim)}
.say input{flex:1;align-self:stretch;border:0;background:none;outline:none;font:inherit;min-width:0}
.code{font:13px/1.5 var(--pace-mono);background:var(--pace-sunk);
  border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-sm);padding:12px 14px;overflow-x:auto;
  white-space:nowrap;user-select:all;margin:0 0 12px}
.muted{font-size:12.5px;color:var(--pace-ink-2)}
.warn{font-size:12.5px;color:var(--pace-bad);margin-top:10px}
.dropping{outline:2px dashed var(--pace-accent);outline-offset:4px;border-radius:var(--pace-r-sm)}
label.pill{cursor:pointer}
.screen{display:flex;flex-direction:column;gap:18px}
.top{display:flex;align-items:center;gap:10px}
.top h1{margin-right:auto}
.empty{text-align:center;padding:18px 0 22px}
.empty h2{margin-bottom:6px}
/* A note in the inbox: the picture your client was looking at, beside the number on their pin
   and the words they wrote. A kept page is a whole page, so it is shrunk rather than cropped. */
.note{display:flex;gap:14px;padding:14px 0;border-bottom:var(--pace-line) solid var(--pace-hair);align-items:flex-start;cursor:pointer}
.note:last-child{border-bottom:0}
.note.is-done{opacity:.72}
.said{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.who .at{font-size:13.5px;font-weight:600;font-family:var(--pace-mono);color:var(--pace-ink);text-decoration:none}
.note:hover .at,.who .at:hover{text-decoration:underline;text-underline-offset:3px}
.who>span:last-child{font-size:var(--pace-tiny);color:var(--pace-ink-3);margin-left:auto;white-space:nowrap}
/* the same number, in the same colour, as the pin your client is looking at (review.css .rv-pin) */
.num{width:20px;height:20px;border-radius:var(--pace-round);background:var(--pace-ink);color:var(--pace-on-ink);
  font:700 12px/20px var(--pace-font);text-align:center;flex:none}
.note.is-done .num{background:var(--pace-good);font-size:13px}
.words{font-size:14.5px;letter-spacing:-.006em}
.changed{font-size:13.5px;color:var(--pace-accent)}
.shot{width:136px;height:96px;flex:none;border-radius:var(--pace-r-sm);overflow:hidden;position:relative;
  background:var(--pace-sunk);border:var(--pace-line) solid var(--pace-hair);display:block}
.shot iframe{position:absolute;top:0;left:0;width:1120px;height:790px;border:0;transform:scale(.1215);
  transform-origin:0 0;pointer-events:none;background:var(--pace-solid)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.say.small{min-height:38px;padding:4px 4px 4px 14px;box-shadow:none;margin-top:2px}
.say.small input{font-size:13.5px}
.note .warn{margin-top:0}

/* Last, so it has the say on everything above it. A row is a thing you press with a thumb; and a
   phone is too narrow to sit a picture beside the words, so the picture goes up beside the line
   that names the page, and the note and the box you answer it in get the whole width. */
@media (max-width:700px){body{padding:16px}.pill,a.pill,.pill.small{height:44px}
  .line{padding:14px 0}
  .note{display:grid;grid-template-columns:96px 1fr;column-gap:10px;row-gap:6px}
  .shot{grid-column:1;grid-row:1;width:96px;height:68px}
  .shot iframe{transform:scale(.0857)}
  .said{display:contents}
  .who{grid-column:2;grid-row:1;flex-wrap:wrap}
  .who>span:last-child{margin-left:0;flex-basis:100%;white-space:normal}
  .said>:not(.who){grid-column:1/-1}
  .say.small{min-height:44px}
}
/* an agency's own address: the record to add, one field to a row */
.step{margin-top:16px}.step h3{font-size:15px;margin:0 0 2px;font-weight:600}.step .muted{margin-top:6px}
/* an agency's own address: the one record, a part to a line with its own copy button, and where it stands */
.parts{margin-top:10px;border-radius:var(--pace-r-sm);background:var(--pace-sunk);padding:4px 14px}
.part{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--pace-line) solid var(--pace-hair)}
.part:last-child{border-bottom:0}
.part span{font-size:var(--pace-tiny);color:var(--pace-ink-3);text-transform:uppercase;letter-spacing:.04em}
.part code{font-family:var(--pace-mono);font-size:14px;word-break:break-all}
.copy{min-width:74px}
.path{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:13.5px}
.path i{font-style:normal;background:var(--pace-solid);border:var(--pace-line) solid var(--pace-hair);border-radius:var(--pace-r-xs);padding:3px 8px}
.path em{font-style:normal;color:var(--pace-ink-3)}
.steps3{display:flex;margin:14px 0 4px}
.steps3 div{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--pace-ink-3)}
.steps3 div.on{color:var(--pace-ink);font-weight:600}.steps3 div.done{color:var(--pace-ink-2)}.steps3 div.later .dot{opacity:.4}
.fixbox{margin-top:14px;border-radius:var(--pace-r-sm);background:var(--pace-bad-soft);padding:12px 14px;font-size:13.5px}
.fixbox b{display:block;margin-bottom:4px}
.liveurl{font-size:20px;font-weight:600;color:var(--pace-accent);text-decoration:none;word-break:break-all}
@media (max-width:480px){.part{grid-template-columns:1fr auto;gap:2px 12px}.part span{grid-column:1/-1}}
/* Signed out, the sign-in card is all there is: narrow and in the middle of the window, as the
   review layer's own sign-in card is (review.css .rv-si-card), on a computer and on a phone. */
body:has(#signin:not([hidden])){min-height:100dvh;display:grid;place-items:center}
body:has(#signin:not([hidden])) main{width:min(410px,100%)}
#signin{padding:32px 28px 24px;overflow:hidden}
/* A button held down, whether or not anything moves: the house's own pressed colours */
.pill:active:not(:disabled){background:var(--pace-ink-hard)}.pill.ghost:active:not(:disabled){background:var(--pace-sunk-2)}
/* How these screens move: the review layer's movement, in its numbers, on the house's one easing. A card
   or a row arrives the way a review panel does, a button gives under a press, and a change of state
   fades rather than flips. None of it is here for anyone whose computer asks for less motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(6px) scale(.97)}}
  @keyframes fade{from{opacity:0}}
  @keyframes mark{from{outline-color:transparent;outline-offset:12px}}
  .card,.line,.note{animation:rise .3s var(--pace-ease)}
  #signin>*,.warn,.muted[aria-live],#sites-says{animation:fade .2s var(--pace-ease)}
  .dropping{animation:rise .3s var(--pace-ease),mark .2s var(--pace-ease)}
  .pill,.line,.note{transition:background .2s,color .2s,opacity .2s,transform .15s;transition-timing-function:var(--pace-ease)}
  .pill:active:not(:disabled){transform:scale(.97)}
  button.line:active,.note:active{transform:scale(.99)}
  .pulse{animation:pulse 1.4s var(--pace-ease) infinite}
  @keyframes pulse{50%{opacity:.35}}
}