/* The dashboard's own parts, on top of earl.css: the conversation with Earl,
   the composer, the site list, and the small pieces around them. Anything
   general belongs in earl.css so the trial and the dashboard stay one look. */

main{align-items:flex-start}
.panel{margin-top:0}
body[data-stage="full"] .panel{--panel-w:min(980px,100%)}
.nav-note{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:7px 11px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Earl speaking, large, at the top of a screen. */
.hello{display:grid;grid-template-columns:56px minmax(0,1fr);gap:15px;align-items:start}
.hello .avatar{width:56px;height:56px}
.said-text{font:clamp(19px,2.1vw,25px)/1.4 var(--body);color:var(--ink);max-width:44ch;text-wrap:pretty}
.answer{display:grid;gap:9px;padding-left:71px}
@media (max-width:620px){.answer{padding-left:0}}
.field-text.grow{flex:1 1 15rem;width:auto;min-height:52px}
.btn-go{min-width:56px;padding:0 16px}
/* An icon beside a button's words. Without a size an svg fills whatever holds it. */
.btn svg{width:20px;height:20px;flex:none}
.btn-go svg{width:22px;height:22px}
/* A lone button under Earl's words is as wide as its own words, not the panel. */
.answer > .btn{justify-self:start}

/* The site list */
.sites{list-style:none;padding:0;display:grid}
.site-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.site-row:first-child{border-top:0}
.site-row .name{font:700 17px/1.2 var(--display);color:var(--ink);text-decoration:none}
.site-row .name:hover{text-decoration:underline;text-underline-offset:3px}
.site-row .row{justify-content:flex-end}
.empty{color:var(--ink-2);padding:12px 0}

/* A site's header */
.site-head{display:grid;gap:12px}
.site-head .row-between{align-items:flex-start}
.live{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:13px;background:var(--good-soft);color:var(--good)}
.live .where{display:grid;gap:2px;min-width:0}
.live b{font:700 16px/1.25 var(--display)}
.live .where a{font:14px var(--mono);overflow-wrap:anywhere;color:inherit}
.live .btn{color:var(--accent-ink)}

/* The conversation */
.thread{list-style:none;padding:0;display:flex;flex-direction:column;gap:18px}
/* Where a long conversation's earlier turns fold away (siteView.ts). */
.earlier{align-self:center}
.msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.msg .avatar{width:40px;height:40px}
.msg-body{display:grid;gap:10px;min-width:0}
.msg-body > p{max-width:62ch}
.you{align-self:flex-end;max-width:min(80%,460px);background:var(--accent-soft);color:var(--ink);padding:10px 14px;border-radius:14px 14px 4px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
.card h3{font:700 17px/1.25 var(--display)}
.card > p{max-width:62ch}
.card-good{background:var(--good-soft);border-color:transparent}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--ink-2)}
.diff{font-size:14px}
.diff summary{cursor:pointer;color:var(--accent);font-weight:700;width:fit-content}
.diff .steps{margin-top:4px}

/* Steps, as in earl.css, plus the two states a check can end in. */
.steps li[data-state="failed"]{color:var(--warn);font-weight:700}
.steps li[data-state="failed"] .mark{color:var(--warn)}
.steps .detail{grid-column:2 / -1;font:12px/1.5 var(--mono);color:var(--ink-2);font-weight:400;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:-6px;padding-bottom:6px}
.steps li.has-detail{grid-template-rows:auto auto}

/* The composer */
.composer{display:grid;gap:10px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);padding-top:20px}
.composer label{font:700 17px/1.2 var(--display)}
.composer textarea{width:100%;min-height:72px;resize:vertical;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);line-height:1.45}
.composer textarea:focus-visible{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.composer textarea:disabled,.chip:disabled{opacity:.55;cursor:not-allowed}
/* Images picked for the next ask (siteView.ts, ADR 0019). */
.attach{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.attach .btn{cursor:pointer}
.attach .btn:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 30%,transparent)}
.attach .btn.is-disabled{opacity:.55;cursor:not-allowed}
.attachments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:8px}
.attachments[hidden]{display:none}
.attachment{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.attachment img{width:52px;height:52px;object-fit:cover;border-radius:7px;background:var(--surface-2)}
.attachment-what{display:grid;gap:2px;min-width:0;font-size:13px;color:var(--ink-2)}
.attachment-what b{color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment[data-state="uploading"] img,.attachment[data-state="waiting"] img{opacity:.5}
.attachment[data-state="failed"]{border-color:var(--warn);background:var(--warn-soft)}
.attachment[data-state="failed"] .attachment-what span{color:var(--warn)}
.attachment-remove{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer}
.attachment-remove:hover{background:var(--surface-2);color:var(--ink)}
.you.you-with-images{display:grid;gap:6px}
.you-images{font:12px/1.4 var(--mono);color:var(--ink-2);white-space:normal;overflow-wrap:anywhere}
.suggest{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.chip:hover:not(:disabled){color:var(--ink);border-color:var(--ink-2)}
.composer-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.hint{font-size:13px;color:var(--ink-2);max-width:52ch}

/* Statuses, in the pills earl.css defines. */
.pill-plain{background:var(--surface-2);color:var(--ink-2)}

/* Who is signed in, and signing out (ADR 0010) */
.identity{display:flex;align-items:center;gap:8px;padding-left:6px}
.identity .face{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent);font:700 12px/1 var(--display);object-fit:cover}
.who-name{font-size:14px;font-weight:700;color:var(--ink);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-link.as-button{border:0;background:none;cursor:pointer;font:700 15px/1 var(--display)}
@media (max-width:620px){.who-name{display:none}}

/* Signing in: Google's button sits where an answer would */
.signin-button{min-height:44px;display:flex}
.signin-button > div{color-scheme:light}

/* Starting a new site: the looks to pick from, then the questions. */
.new-site{display:grid;gap:26px}
.question{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.question > label,.question > legend{display:grid;gap:4px;padding:0;font:700 19px/1.2 var(--display)}
.question .field-text{line-height:1.45;resize:vertical}
.question .hint{max-width:70ch}
.looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;margin-top:4px}
.look{display:grid;gap:8px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.look label{display:grid;gap:8px;cursor:pointer}
.look:hover{border-color:var(--ink-2)}
.look:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--surface)}
.look:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent),0 0 0 5px color-mix(in srgb,var(--focus) 30%,transparent)}
.look-name{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:700 18px/1.2 var(--display)}
.look:has(input:checked) .look-name .pill{background:var(--accent-soft);color:var(--accent)}
.look-open{color:var(--accent);font-weight:700;width:fit-content}
/* The look, drawn at desktop width and scaled to the card (newSiteView.ts sets the scale). */
.look-shot{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-radius:8px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);background:var(--surface-2)}
.look-shot iframe{position:absolute;inset:0 auto auto 0;width:1280px;height:800px;border:0;transform-origin:0 0;transform:scale(var(--shot-scale,.2));pointer-events:none}
/* A speed check (ADR 0016): the box is the site list's own, the result is a card. */
.checks{list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.check h3{min-width:0;overflow-wrap:anywhere}
.check h3 a{color:inherit;text-decoration:none}
.check h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.pill-poor{background:var(--warn);color:var(--surface)}
.measures{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin:0}
.measure{display:grid;gap:3px;align-content:start;padding:10px 11px;border-radius:10px;background:var(--surface-2);border-left:3px solid var(--line)}
.measure[data-rating="good"]{border-left-color:var(--good)}
.measure[data-rating="fair"]{border-left-color:var(--brass)}
.measure[data-rating="poor"]{border-left-color:var(--warn);background:var(--warn-soft)}
.measure dt{display:grid;gap:1px;font-size:13px;color:var(--ink-2)}
.measure .known{font:500 9.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.measure dd{margin:0;font:700 21px/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.filmstrip{list-style:none;padding:0 0 4px;margin:0;display:flex;gap:6px;overflow-x:auto}
.filmstrip li{display:grid;gap:3px;flex:none;justify-items:center;font:11px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.filmstrip img{display:block;width:64px;height:auto;border:1px solid var(--line);border-radius:5px;background:#fff}
.loads-scroll{overflow-x:auto;margin-top:6px}
.loads{border-collapse:collapse;font:12px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.loads th,.loads td{padding:4px 12px 4px 0;text-align:right;font-weight:400;color:var(--ink-2)}
.loads thead th{font-size:11px}
.loads tbody td{color:var(--ink)}
.check .meta{justify-content:space-between}
.check .meta span{max-width:60ch}
.check .meta a{color:var(--accent);font-weight:700;white-space:nowrap}