/* "Where it lands" (results.js). Three vendor windows, same values as the homepage perks:
   Clio Grow after Clio's published UI and clio.com tokens (mountain #04304c, Clio blue #0070e0,
   emerald #018b76, bone #f7f5f5, sand #eeedea; Poppins headings, Source Sans 3 text).
   Slack in its default light theme (Aubergine bar, white pane, #1d1c1d text, #1264a3 links).
   Outlook on the web after Fluent 2 webLightTheme (#0f6cbd brand, #eef7fb title bar, Segoe stack). */

.rs-win{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.08);text-align:left;min-width:0}
.rs-win img{display:block}

/* ── the flow: a rail on top, one window at a time underneath (results.js mountFlow) ── */
.flow{display:flex;flex-direction:column;gap:12px;min-width:0}
.fl-rail{flex:none;display:flex;align-items:center;gap:8px;font-family:'Geist',system-ui,sans-serif}
.fl-s{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border:0;border-radius:999px;background:transparent;
  font:400 13px/1 'Geist',system-ui,sans-serif;color:#9a9fa8;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.fl-s:not(:disabled){cursor:pointer}
.fl-s:not(:disabled):hover{color:#15181e}
.fl-s:focus-visible{outline:2px solid #2545a7;outline-offset:2px}
.fl-ic{height:14px;display:grid;place-items:center;opacity:.45;filter:grayscale(1);transition:opacity .3s,filter .3s}
.fl-ic img{height:14px}
.fl-s.on,.fl-s.done{color:#15181e}
.fl-s.on{background:#fff;box-shadow:inset 0 0 0 1px #d9dbdf}
.fl-s.on .fl-ic,.fl-s.done .fl-ic{opacity:1;filter:none}
.fl-s.skip{color:#9a9fa8;text-decoration:line-through;text-decoration-color:#d9dbdf}
.fl-line{flex:1;min-width:12px;height:1px;background:#e7e8eb;position:relative;overflow:hidden}
.fl-line::after{content:"";position:absolute;inset:0;background:#15181e;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.fl-line.done::after{transform:none}

.fl-stage{display:grid;flex:1;overflow:clip;overflow-clip-margin:8px}
.fl-w{grid-area:1/1;min-width:0;opacity:0;transform:translateX(28px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.fl-w.past{transform:translateX(-28px) scale(.98)}
.fl-w.on{opacity:1;transform:none;pointer-events:auto}
.fl-w{display:flex}
.fl-w > .rs-win{flex:1}
@media (prefers-reduced-motion:reduce){.fl-w,.fl-w.past{transform:none}.fl-line::after{transition:none}}

/* ── Clio Grow ── */
.rs-clio{display:flex;flex-direction:column;font-family:'Source Sans 3',sans-serif;color:#404040;background:#fff}
.rs-clio .cg-top{height:40px;flex:none;display:flex;align-items:center;gap:18px;padding:0 14px;background:#04304c;color:#fff}
.rs-clio .cg-logo{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif}
.rs-clio .cg-logo img{width:46px;height:16px;filter:brightness(0) invert(1)}
.rs-clio .cg-logo em{font-style:normal;font-weight:500;font-size:12px;opacity:.8}
.rs-clio .cg-nav{display:flex;gap:14px;font-size:12.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden}
.rs-clio .cg-nav .act{color:#fff;font-weight:600}
.rs-clio .cg-lh{flex:none;display:flex;gap:10px;align-items:center;padding:14px 16px 0}
.rs-clio .cg-av{width:38px;height:38px;border-radius:50%;background:#989898;color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;transition:background .3s}
.rs-clio .cg-av.none{background:#eeedea}
.rs-clio .cg-who{min-width:0}
.rs-clio .cg-who b{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;line-height:21px;color:#0070e0;overflow-wrap:anywhere}
.rs-clio .cg-who b.none{color:#9a9a9a}
.rs-clio .cg-who span{display:block;font-size:12.5px;line-height:17px;color:#6b6b6b}
.rs-clio .cg-tags{flex:none;display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.rs-clio .cg-stage,.rs-clio .cg-tag{padding:2px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:600}
.rs-clio .cg-stage{background:#ebf2f9;color:#04304c}
.rs-clio .cg-stage.no{background:#f4ebeb;color:#813119}
.rs-clio .cg-tag{animation:cgtag .5s cubic-bezier(.16,1,.3,1)}
.rs-clio .cg-tag.ok{background:#d3eee8;color:#018b76}
.rs-clio .cg-tag.urgent{background:#d74416;color:#fff}
.rs-clio .cg-tag.declined{background:#eeedea;color:#404040}
.rs-clio .cg-tag.live{background:#f7f5f5;color:#6b6b6b;animation:none}
.rs-clio .cg-tag.live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#018b76;vertical-align:1px;animation:cglive 1.6s ease-in-out infinite}
@keyframes cgtag{from{opacity:0;transform:scale(.92)}}
@keyframes cglive{50%{opacity:.35}}
.rs-clio .cg-tabs{flex:none;display:flex;align-items:center;gap:18px;margin-top:12px;padding:0 16px;border-bottom:1px solid #eeedea;font-size:13px;color:#6b6b6b}
.rs-clio .cg-tabs span{padding:8px 0}
.rs-clio .cg-tabs .act{color:#04304c;font-weight:600;box-shadow:inset 0 -2px 0 #0070e0}
.rs-clio .cg-count{margin-left:auto;font-size:12px;color:#8a8a8a;font-variant-numeric:tabular-nums}
.rs-clio .cg-list{flex:1;padding:4px 16px 14px}
.rs-clio .cg-r{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:baseline;padding:7px 6px;margin:0 -6px;border-bottom:1px solid #f3f1f1;border-radius:4px}
.rs-clio .cg-r dt{font-family:'Poppins',sans-serif;font-weight:500;font-size:11.5px;line-height:18px;color:#04304c}
.rs-clio .cg-r dd{font-size:13.5px;line-height:18px;color:#404040;min-height:18px;overflow-wrap:anywhere}
.rs-clio .cg-r.empty dd::after{content:"";display:inline-block;width:28px;height:1px;background:#dcdad8;vertical-align:middle}
.rs-clio .cg-r.fresh{animation:cgfresh 1.8s cubic-bezier(.16,1,.3,1)}
@keyframes cgfresh{0%{background:#ebf2f9}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.rs-clio .cg-r.fresh,.rs-clio .cg-tag{animation:none}.rs-clio .cg-tag.live::before{animation:none}}

/* ── Slack ── */
.rs-slack{display:flex;flex-direction:column;font-family:'Lato',sans-serif;color:#1d1c1d}
.rs-slack .sl-bar{height:40px;display:flex;align-items:center;padding:0 14px;background:linear-gradient(90deg,#3e0357,#5a1a6c)}
.rs-slack .sl-chan{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:14.5px;color:#fff}
.rs-slack .sl-chan img{width:14px;height:14px}
.rs-slack .sl-bar{flex:none}
.rs-slack .sl-feed{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}
.rs-slack .sl-intro{padding:0 16px 14px;font-size:14px;line-height:20px;color:#616061}
.rs-slack .sl-intro b{display:block;font-weight:900;font-size:18px;line-height:24px;color:#1d1c1d;margin-bottom:4px}
.rs-slack .sl-day{position:relative;text-align:center;margin:0 0 2px}
.rs-slack .sl-day::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e8e8e8}
.rs-slack .sl-day span{position:relative;display:inline-block;padding:3px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #e8e8e8;font-size:12px;font-weight:700;color:#1d1c1d}
.rs-slack .sl-msg{display:flex;gap:9px;padding:10px 16px 14px}
.rs-slack .sl-compose{flex:none;margin:0 14px 14px;height:40px;border-radius:8px;box-shadow:inset 0 0 0 1px #bbbabb;display:flex;align-items:center;padding:0 12px;font-size:14px;color:#868686}
.rs-slack .sl-bot{width:36px;height:36px;border-radius:8px;overflow:hidden;flex:none}
.rs-slack .sl-bot img{width:100%;height:100%}
.rs-slack .sl-body{flex:1;min-width:0;font-size:14.5px;line-height:21px}
.rs-slack .sl-who{display:flex;align-items:center;gap:6px}
.rs-slack .sl-who b{font-weight:900}
.rs-slack .sl-app{font-size:10px;font-weight:700;padding:1px 4px;border-radius:3px;background:rgba(29,28,29,.08);color:#5e5d60}
.rs-slack .sl-time{font-size:12px;color:#616061}
.rs-slack .sl-lead b{font-weight:700}
.rs-slack .sl-att{margin-top:8px;padding:2px 0 2px 12px;border-left:4px solid #e8e8e8}
.rs-slack .sl-att.urgent{border-left-color:#e01e5a}
.rs-slack .sl-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;font-size:13.5px;line-height:19px}
.rs-slack .sl-fields div{min-width:0;overflow-wrap:anywhere}
.rs-slack .sl-fields .k{display:block;font-weight:700}
.rs-slack .sl-fields .v{display:block}
.rs-slack .sl-links{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}
.rs-slack .sl-links a{color:#1264a3}
.rs-slack .sl-btns{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.rs-slack .sl-b{height:30px;padding:0 12px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(29,28,29,.3);display:inline-flex;align-items:center;font-size:13.5px;font-weight:700}
.rs-slack .sl-b.pri{background:#007a5a;color:#fff;box-shadow:none}

/* ── Outlook: the event, opened ── */
.rs-ol{--o-fg1:#242424;--o-fg2:#424242;--o-fg3:#616161;--o-brand:#0f6cbd;
  background:#eef7fb;font-family:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;font-size:13px;line-height:18px;color:var(--o-fg1)}
.rs-ol svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rs-ol .ol-t{height:40px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px}
.rs-ol .ol-a{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px}
.rs-ol .ol-s{flex:1;max-width:190px;margin-left:auto;height:28px;border-radius:999px;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);display:flex;align-items:center;gap:6px;padding:0 10px;color:var(--o-fg3);font-size:12.5px}
.rs-ol .ol-s svg{width:14px;height:14px}
.rs-ol .ol-me{width:26px;height:26px;flex:none;border-radius:50%;background:#8e562e;color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:600}
.rs-ol{display:flex;flex-direction:column}
.rs-ol .ol-t{flex:none}
.rs-ol .ol-b{flex:1;display:flex;padding:0 10px 10px}
.rs-ol .ol-ev{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:8px;border-top:4px solid #007cd5;box-shadow:0 0 2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);padding:14px 16px 0}
.rs-ol .ol-ev.urgent{border-top-color:#c50f1f}
.rs-ol .ol-eh{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.rs-ol .ol-sq{width:12px;height:12px;margin-top:6px;border-radius:3px;background:#0178d4;flex:none}
.rs-ol .ol-ev.urgent .ol-sq{background:#c50f1f}
.rs-ol .ol-eh div{min-width:0}
.rs-ol .ol-eh b{display:block;font-size:17px;line-height:23px;font-weight:600;color:#0178d4;overflow-wrap:anywhere}
.rs-ol .ol-ev.urgent .ol-eh b{color:#b10e1c}
.rs-ol .ol-eh span{font-size:12px;color:var(--o-fg3)}
.rs-ol .ol-r{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:12.5px;color:var(--o-fg2)}
.rs-ol .ol-r svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--o-fg3)}
.rs-ol .ol-r span{min-width:0;overflow-wrap:anywhere}
.rs-ol .ol-urg{color:#b10e1c}
.rs-ol .ol-urg svg{color:#b10e1c}
.rs-ol .ol-notes{margin-top:4px;padding-top:10px;border-top:1px solid #e0e0e0}
.rs-ol .ol-nl p{line-height:18px}
.rs-ol .ol-nl p+p{margin-top:3px}
.rs-ol .ol-nh{font-weight:600;color:var(--o-fg1);margin-bottom:4px}
.rs-ol .ol-nl span{color:var(--o-fg3)}
.rs-ol .ol-att{align-self:flex-start;margin:6px 0 4px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:4px;box-shadow:inset 0 0 0 1px #e0e0e0;color:var(--o-brand);font-size:12.5px}
.rs-ol .ol-att svg{width:15px;height:15px}
.rs-ol .ol-notes{flex:1;padding-bottom:16px}

/* ── the email channel: the copy on the left, the same flow on the right ── */
.rs-head{text-align:left;max-width:44ch}
.rs-k{font:400 12px/1.3 'Geist Mono',ui-monospace,monospace;color:#6b707a}
.rs-head h3{margin-top:10px;font:400 clamp(24px,2.4vw,32px)/1.15 'Geist',system-ui,sans-serif;letter-spacing:-.035em;color:#15181e}
.rs-sub{margin-top:10px;font:400 14.5px/1.55 'Geist',system-ui,sans-serif;color:#6b707a}
#mail-results:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:start}
.rs-flow{min-width:0}
@media (max-width:900px){
  #mail-results:not([hidden]){grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:640px){.rs-slack .sl-fields{grid-template-columns:1fr}}
/* phones: the window under the rail already shows which app it is, so the rail drops its logos */
@media (max-width:600px){
  .fl-rail{gap:4px}
  .fl-s{padding:0 10px;font-size:12.5px}
  .fl-ic{display:none}
  .fl-line{min-width:6px}
}
/* the Slack post and the Outlook event fill in once they are on screen (results.js write()) */
[data-fx]{transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),clip-path var(--fx-d,.5s) cubic-bezier(.45,.05,.35,1)}
[data-fx="write"]{clip-path:inset(0 0 0 0)}
.rs-ol .ol-r > span[data-fx="write"]{display:inline-block}
.fx-wait[data-fx="fade"]{opacity:0;transform:translateY(3px)}
.fx-wait[data-fx="write"]{clip-path:inset(0 100% 0 0)}
@media (prefers-reduced-motion:reduce){[data-fx]{transition:none}}