/* =====================================================================
   public/app/siteread.css: "Update from website" (siteread.js). The button beside a Receptionist heading, and the
   side sheet: reading, then what the website says that UNLOOK doesn't know yet, each one with its tick.
   ===================================================================== */
.su-h:has(.su-web){display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.su-h-t{min-width:0}
.su-web{flex:none;margin-top:4px}
@media (max-width:720px){.su-h:has(.su-web){flex-direction:column;align-items:stretch}.su-web{align-self:flex-start;margin-top:0}}

.sr-body{gap:16px}
.sr-help{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.sr-msg{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--ink);text-wrap:pretty}
.sr-busy,.sr-same{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-ctl)}
.sr-busy b,.sr-same b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.sr-busy small,.sr-same small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-3)}
.sr-pulse{flex:none;width:10px;height:10px;border-radius:50%;background:var(--lime)}
@media (prefers-reduced-motion:no-preference){.sr-pulse{animation:lights-turn calc(var(--pulse-dur)*1.4) var(--ease-in-out) infinite}}
.sr-same svg{flex:none;width:20px;height:20px;color:var(--ok-ink)}

.sr-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.sr-row{padding:12px 14px}
.sr-row+.sr-row{border-top:1px solid var(--line)}
.sr-pick{display:flex;align-items:flex-start;gap:12px;min-height:24px;cursor:pointer}
.sr-pick input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--lime)}
.sr-t{min-width:0}
.sr-t b{display:block;font-size:var(--fs-body);font-weight:600;line-height:1.35;color:var(--ink)}
.sr-t small{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-3)}
.sr-lines{display:flex;flex-direction:column;gap:4px;margin:8px 0 0 30px;padding:0;list-style:none;font-size:var(--fs-sm);line-height:1.45}
.sr-lines li{display:flex;gap:8px;min-width:0;overflow-wrap:anywhere}
.sr-sign{flex:none;width:10px;font-weight:600;text-align:center}
.sr-add{color:var(--ink)}
.sr-add .sr-sign{color:var(--ok-ink)}
.sr-rem{color:var(--ink-3)}
.sr-rem span:last-child{text-decoration:line-through;text-decoration-color:var(--line-strong)}
.sr-rem .sr-sign{color:var(--err-ink)}
.sr-more{color:var(--ink-3);padding-left:18px}