/* Reachly UI system — composed parts used inside overlays: the wizard's step
   bar, the file drop zone, the summary tiles, the tag editor, the phone field,
   the date tile on a choice card, and list rows with hover actions.
   (Tokens and base components: /ui/rl-ui.css.) */

/* wizard steps */
.rlx .rl-wsteps{flex:none;display:flex;align-items:center;gap:8px;padding:0 20px 16px}
.rlx .rl-wsteps .s{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--rl-ink3);white-space:nowrap}
.rlx .rl-wsteps .s i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;background:var(--rl-surface3);color:var(--rl-ink3);transition:.2s}
.rlx .rl-wsteps .s.is-on{color:var(--rl-ink)}
.rlx .rl-wsteps .s.is-on i{background:var(--rl-ink);color:#fff}
.rlx .rl-wsteps .s.is-done{color:var(--rl-ink2)}
.rlx .rl-wsteps .s.is-done i{background:var(--rl-ok);color:#fff}
.rlx .rl-wsteps .ln{flex:1;min-width:12px;height:2px;border-radius:2px;background:var(--rl-surface3)}
.rlx .rl-wsteps .ln.is-done{background:var(--rl-ok)}

/* file drop zone and the chosen file */
.rlx .rl-drop{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:34px 20px;border-radius:var(--rl-r16);border:1.5px dashed #cdd2dd;background:linear-gradient(180deg,#fcfcfd,#f7f8fb);text-align:center;color:var(--rl-ink3);font-size:13px;transition:.15s}
.rlx .rl-drop:hover,.rlx .rl-drop.is-over{border-color:var(--rl-acc);background:var(--rl-acc-soft)}
.rlx .rl-drop b{color:var(--rl-ink);font-size:14.5px}
.rlx .rl-drop .rl-tile{margin-bottom:6px;width:48px;height:48px;border-radius:14px}
.rlx .rl-file{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--rl-r12);box-shadow:inset 0 0 0 1px var(--rl-line);background:#fff}
.rlx .rl-file .t{flex:1;min-width:0}
.rlx .rl-file b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-file span{font-size:12.5px;color:var(--rl-ink3)}

/* summary tiles */
.rlx .rl-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rlx .rl-sum>div{padding:14px;border-radius:var(--rl-r12);box-shadow:inset 0 0 0 1px var(--rl-line);background:#fff}
.rlx .rl-sum b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--c,var(--rl-ink));font-variant-numeric:tabular-nums}
.rlx .rl-sum span{font-size:12.5px;color:var(--rl-ink3)}

/* a plain table inside an overlay (column matching, logs, rejected rows) */
.rlx .rl-grid{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--rl-r12);box-shadow:inset 0 0 0 1px var(--rl-line);overflow:hidden;margin:0}
.rlx .rl-grid th{position:sticky;top:0;z-index:1;text-align:left;background:var(--rl-surface2);font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--rl-ink3);padding:9px 12px;border:0;white-space:nowrap}
.rlx .rl-grid td{padding:8px 12px;border:0;border-top:1px solid #f0f1f5;font-size:13px;vertical-align:middle;background:none}
.rlx .rl-grid .k{font-weight:700;color:var(--rl-ink)}
.rlx .rl-grid .ex{color:var(--rl-ink3);font-size:12.5px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-grid .err{color:var(--rl-danger)}

/* phone field */
.rlx .rl-phone{display:flex;align-items:center;border:1px solid var(--rl-line);border-radius:var(--rl-r10);background:#fff;box-shadow:var(--rl-sh-xs);overflow:hidden;transition:.15s}
.rlx .rl-phone:focus-within{border-color:var(--rl-acc);box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .rl-phone.is-bad{border-color:var(--rl-danger)}
.rlx .rl-phone .cc{display:grid;place-items:center;align-self:stretch;padding:0 12px;border-right:1px solid var(--rl-line);background:var(--rl-surface2);color:var(--rl-ink3)}
.rlx .rl-phone input.rl-bare{height:40px;padding:0 12px;font-size:14px!important}
.rlx .rl-phone .st{display:grid;place-items:center;padding:0 12px;color:var(--rl-ok)}
.rlx .rl-err{margin-top:6px;font-size:12.5px;color:var(--rl-danger);font-weight:500}
.rlx .rl-help{margin-top:6px;font-size:12px;color:var(--rl-ink3)}

.rlx [data-dup]:empty{display:none}

/* tag editor */
.rlx .rl-tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;padding:7px 8px;border:1px solid var(--rl-line);border-radius:var(--rl-r10);background:#fff;box-shadow:var(--rl-sh-xs);transition:.15s}
.rlx .rl-tagbox:focus-within{border-color:var(--rl-acc);box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .rl-tagbox input.rl-bare{flex:1;min-width:110px;height:26px}
.rlx .rl-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:12px;color:var(--rl-ink3);align-items:center}
.rlx .rl-sugg button{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:7px;border:1px dashed #cdd2dd;font-size:12px;font-weight:500;color:var(--rl-ink2);white-space:nowrap}
.rlx .rl-sugg button:hover{border-style:solid;border-color:var(--rl-acc);color:var(--rl-acc2)}

/* key / value rows (your own fields, lead statuses) */
.rlx .rl-kvrow{display:grid;grid-template-columns:1fr 1fr 36px;gap:8px;align-items:center}
.rlx .rl-kvrow.is-status{grid-template-columns:42px 1fr auto 36px}
.rlx .rl-kvrow+.rl-kvrow{margin-top:8px}
.rlx .rl-swatch{position:relative;width:42px;height:42px;border-radius:var(--rl-r10);box-shadow:inset 0 0 0 1px var(--rl-hair),var(--rl-sh-xs);background:var(--c);overflow:hidden;cursor:pointer}
.rlx .rl-swatch input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);min-height:0!important;padding:0;border:0!important;opacity:0;cursor:pointer}
.rlx .rl-iconbtn{width:36px;height:36px;border-radius:var(--rl-r8);display:grid;place-items:center;color:var(--rl-ink3)}
.rlx .rl-iconbtn:hover{background:var(--rl-surface3);color:var(--rl-ink)}
.rlx .rl-iconbtn.is-danger:hover{background:#fff1f3;color:var(--rl-danger)}

/* a date tile on a choice card */
.rlx .rl-choice .dt{flex:none;width:46px;height:50px;border-radius:var(--rl-r10);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.rlx .rl-choice .dt small{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--rl-acc2);margin-bottom:3px}
.rlx .rl-choice .rd{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #b9bfcc;display:grid;place-items:center}
.rlx .rl-choice.is-on .rd{border-color:var(--rl-acc)}
.rlx .rl-choice.is-on .rd::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--rl-acc)}

/* list rows with hover actions (tags) */
.rlx .rl-lrow{display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--rl-r10)}
.rlx .rl-lrow:hover{background:var(--rl-surface2)}
.rlx .rl-lrow>button:first-child{flex:1;min-width:0;display:flex;align-items:center;gap:11px}
.rlx .rl-lrow b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-lrow .n{flex:none;font-size:12.5px;color:var(--rl-ink3);font-variant-numeric:tabular-nums}
.rlx .rl-lrow .ra{display:flex;gap:2px;opacity:0}
.rlx .rl-lrow:hover .ra,.rlx .rl-lrow .ra:focus-within{opacity:1}
.rlx .rl-lrow .ra button{height:28px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:600;color:var(--rl-ink2);white-space:nowrap}
.rlx .rl-lrow .ra button:hover{background:#fff;color:var(--rl-ink);box-shadow:var(--rl-sh-xs)}
@media (max-width:760px){
  .rlx .rl-sum{grid-template-columns:1fr}
  .rlx .rl-wsteps .s span{display:none}
  .rlx .rl-grid .ex{display:none}
  .rlx .rl-lrow .ra{opacity:1}
}

/* THE COPILOT STRIP. One line of dark, on a page that is otherwise quiet:
   what the AI can answer here, and the one button that asks it. Campaigns,
   Workflows and Webinars all wear it, so it lives with the shared parts
   rather than in whichever page happened to need it first. */
.rlx .rl-cm-hero{flex:none;display:flex;align-items:center;gap:14px;margin:-2px 0 14px;padding:12px 14px 12px 16px;border-radius:var(--rl-r16);color:#e8ebf2;background:radial-gradient(120% 160% at 0% 0%,#2a2033 0%,#14161e 46%,#0f1116 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--rl-sh-sm)}
.rlx .rl-cm-hero .mark{position:relative;flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#f5674d,#d9452c)}
.rlx .rl-cm-hero .mark::after{content:"";position:absolute;inset:-6px;border-radius:18px;background:radial-gradient(circle at 50% 50%,rgba(241,91,65,.55),transparent 68%);opacity:.5;animation:rlHeroBreathe 5.5s ease-in-out infinite;pointer-events:none}
@keyframes rlHeroBreathe{0%,100%{opacity:.34;transform:scale(.94)}50%{opacity:.62;transform:scale(1.06)}}
.rlx .rl-cm-hero .t{flex:1;min-width:0}
.rlx .rl-cm-hero .t b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:#fff}
.rlx .rl-cm-hero .t b em{font-style:normal;font-weight:700;color:var(--rl-acc)}
.rlx .rl-cm-hero .t>span{display:block;font-size:12.5px;color:rgba(232,235,242,.6);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-cm-hero .rl-btn{flex:none;background:#fff!important;color:#12151c!important;border-color:transparent!important;box-shadow:0 1px 2px rgba(0,0,0,.28)!important}
.rlx .rl-cm-hero .rl-btn:hover{background:#f4f5f8!important}
@media (prefers-reduced-motion:reduce){.rlx .rl-cm-hero .mark::after{animation:none}}

/* The five rules below were indented as a phone block but had lost their
   @media opener, so every one of them applied at EVERY width. The costly
   one was the last: it hides the button's LABEL, and the label is the only
   thing that says what the button does. Measured 2026-09-22 at a 1280px
   window: the strip on Campaigns, Templates and Invoices rendered a bare
   white icon. Restored to the sheet's own 760px phone breakpoint.

   The sub-line stays hidden at every width on purpose — owner rule, keep
   the Copilot hero to one line — so it is lifted out of the block. The
   980px rule that used to do that job, and the same rule repeated in
   rl-workflows.css and rl-webinars.css, are now redundant rather than
   load-bearing; they are left alone because they cost nothing. */
.rlx .rl-cm-hero .t>span{display:none}
@media (max-width:760px){
  .rlx .rl-cm-hero{padding:9px 10px;gap:10px;margin-bottom:10px}
  .rlx .rl-cm-hero .mark{width:32px;height:32px;border-radius:10px}
  .rlx .rl-cm-hero .t b{font-size:13.5px}
  .rlx .rl-cm-hero .rl-btn .lbl{display:none}
}
@media (max-width:1180px){.rlx .rl-cm-hero .steps{display:none}}

/* THE AI WRITER. The one dialog behind Write with AI in the campaign builder,
   Copilot on Campaigns and Templates, and Draft on the Brand Brain
   (aiOpenModal in reachly-server-client.js). The ask is the house's dark AI
   card, as in Workflows' Create with Copilot; what comes back — the steps
   while it works, then the draft — sits on the light below it, and every
   action is in the footer. The textarea rules carry !important because the
   old sheet forces its own on every bare textarea. */
.rlx .rl-aw{flex:1;min-height:0;overflow:auto;padding:10px 10px 6px}
.rlx .rl-aw .aw-ask{padding:16px 16px 16px 18px}
.rlx .rl-aw .aw-hd{display:flex;align-items:flex-start;gap:13px}
.rlx .rl-aw .aw-mark{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#f5674d,#d9452c);box-shadow:0 0 0 4px rgba(241,91,65,.16),0 6px 16px -6px rgba(241,91,65,.7)}
.rlx .rl-aw .aw-t{flex:1;min-width:0;padding-top:1px}
.rlx .rl-aw .aw-t h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#fff;text-wrap:balance}
.rlx .rl-aw .aw-t p{margin:4px 0 0;max-width:62ch;font-size:13px;line-height:1.5;color:rgba(233,235,242,.7)}
.rlx .rl-aw .aw-x{flex:none;width:32px;height:32px;margin:-4px -6px 0 0;border:0;border-radius:var(--rl-r8);display:grid;place-items:center;background:transparent;color:rgba(233,235,242,.55);cursor:pointer}
.rlx .rl-aw .aw-x:hover{background:rgba(255,255,255,.1);color:#fff}
.rlx .rl-aw .aw-x:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(241,91,65,.45)}
.rlx .rl-aw textarea{display:block;width:100%;box-sizing:border-box;height:auto;min-height:96px!important;margin:14px 0 0;padding:12px 14px;resize:vertical;font:inherit;font-size:14px!important;font-weight:400!important;line-height:1.55;color:#fff!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--rl-r12)!important;box-shadow:none!important}
.rlx .rl-aw textarea::placeholder{color:rgba(233,235,242,.42)!important}
.rlx .rl-aw textarea:focus{outline:0!important;border-color:rgba(241,91,65,.7)!important;box-shadow:0 0 0 4px rgba(241,91,65,.18)!important}
/* the starting points */
.rlx .rl-aw .aw-chips{padding:14px 8px 2px}
.rlx .rl-aw .aw-lbl{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rl-ink3)}
.rlx .rl-aw .aw-chip{display:inline-flex;align-items:center;height:32px;margin:0 6px 7px 0;padding:0 13px;border:1px solid var(--rl-line);border-radius:99px;background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--rl-ink2);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.rlx .rl-aw .aw-chip:hover{border-color:color-mix(in srgb,var(--rl-acc) 40%,var(--rl-line));background:var(--rl-acc-soft);color:var(--rl-ink)}
.rlx .rl-aw .aw-chip:focus-visible{outline:0;border-color:var(--rl-acc);box-shadow:0 0 0 4px var(--rl-ring)}
/* while it works: startThinking() draws into .aw-think */
@keyframes rlAwBob{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
@keyframes rlAwRing{0%{transform:scale(.72);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes rlAwSpin{to{transform:rotate(360deg)}}
.rlx .rl-aw .aw-think{margin:12px 8px 4px;padding:16px 18px 14px;border-radius:var(--rl-r16);background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line),var(--rl-sh-xs)}
.rlx .rl-aw .rlk-h{display:flex;align-items:center;gap:13px;padding:0 0 12px}
.rlx .rl-aw .rlk-orb{position:relative;flex:none;width:40px;height:40px}
.rlx .rl-aw .rlk-orb .core{position:absolute;inset:4px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:0;background:linear-gradient(160deg,#f5674d,#d9452c);box-shadow:0 0 18px rgba(241,91,65,.45);animation:rlAwBob 2.4s ease-in-out infinite}
.rlx .rl-aw .rlk-orb .ring{position:absolute;inset:0;border-radius:14px;border:2px solid rgba(241,91,65,.4);animation:rlAwRing 1.8s ease-out infinite}
.rlx .rl-aw .rlk-hh .t{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--rl-ink)}
.rlx .rl-aw .rlk-hh .s{margin-top:2px;font-size:12px;color:var(--rl-ink3)}
.rlx .rl-aw .rlk-steps{padding:2px 0 10px}
.rlx .rl-aw .rlk-step{position:relative;display:flex;align-items:center;gap:12px;padding:6px 0}
.rlx .rl-aw .rlk-step::before{content:"";position:absolute;left:11px;top:30px;bottom:-6px;width:2px;background:var(--rl-line)}
.rlx .rl-aw .rlk-step:last-child::before{display:none}
.rlx .rl-aw .rlk-step.done::before{background:color-mix(in srgb,var(--rl-ok) 50%,#fff)}
.rlx .rl-aw .rlk-ic{position:relative;z-index:1;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--rl-surface2);color:var(--rl-ink3);transition:background .25s,color .25s,box-shadow .25s}
.rlx .rl-aw .rlk-step.done .rlk-ic{background:var(--rl-ok);color:#fff}
.rlx .rl-aw .rlk-step.active .rlk-ic{background:var(--rl-acc-soft);color:var(--rl-acc2);box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .rl-aw .rlk-step.land .rlk-ic{background:#fff;border:0;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rl-acc) 35%,#fff)}
.rlx .rl-aw .rlk-spin{width:12px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--rl-acc) 28%,#fff);border-top-color:var(--rl-acc);animation:rlAwSpin .7s linear infinite}
.rlx .rl-aw .rlk-lbl{padding:0;font-size:13px;font-weight:600;color:var(--rl-ink3);transition:color .25s}
.rlx .rl-aw .rlk-step.done .rlk-lbl{color:var(--rl-ink2)}
.rlx .rl-aw .rlk-step.active .rlk-lbl,.rlx .rl-aw .rlk-step.land .rlk-lbl{color:var(--rl-ink);font-weight:700}
.rlx .rl-aw .rlk-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--rl-line)}
.rlx .rl-aw .rlk-bar{flex:1;height:6px;border-radius:99px;background:var(--rl-surface3);overflow:hidden}
.rlx .rl-aw .rlk-bar i{display:block;height:100%;width:6%;border-radius:inherit;background:linear-gradient(90deg,#f15b41,#8b5cf6);transition:width .45s var(--rl-ease)}
.rlx .rl-aw .rlk-pct{width:38px;text-align:right;font:600 11.5px/1 "DM Mono",ui-monospace,monospace;color:var(--rl-ink3);font-variant-numeric:tabular-nums}
/* what came back */
.rlx .rl-aw .aw-draft{margin:12px 8px 0;padding:14px 16px 15px;max-height:min(46vh,400px);overflow:auto;border-radius:var(--rl-r16);background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line),var(--rl-sh-xs);font-size:13.5px;line-height:1.6;color:var(--rl-ink);white-space:pre-wrap;word-break:break-word}
.rlx .rl-aw .aw-hint{margin:10px 10px 2px;font-size:12px;line-height:1.5;color:var(--rl-ink3)}
.rlx .rl-aw .aw-hint .rl-ic{display:inline-block;vertical-align:-2px;margin-right:6px;color:var(--rl-acc)}
/* the footer: Write it, then Try again and Use this */
.rlx .rl-aw + .rl-ov-ft .aw-row{display:inline-flex;align-items:center;gap:8px}
.rlx .rl-aw + .rl-ov-ft .aw-cost{display:inline-grid;place-items:center;min-width:20px;height:18px;margin-left:2px;padding:0 6px;border-radius:99px;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.16);color:#fff;font-variant-numeric:tabular-nums}
.rlx .rl-aw + .rl-ov-ft .aw-kbd{gap:4px}
.rlx .rl-dlg:has(#aiGoalInput[style*="none"]) .aw-kbd{display:none}
/* the last draft's note is not about the one being written now */
.rlx .rl-aw:has(#aiThinking[style*="block"]) .aw-hint{display:none!important}
@media (prefers-reduced-motion:reduce){
  .rlx .rl-aw .rlk-orb .core,.rlx .rl-aw .rlk-orb .ring,.rlx .rl-aw .rlk-spin{animation:none}
}
@media (max-width:760px){
  .rlx .rl-aw{padding:8px 8px 4px}
  .rlx .rl-aw .aw-ask{padding:14px}
  .rlx .rl-aw .aw-t p{font-size:12.5px}
  .rlx .rl-aw textarea{min-height:128px!important}
  .rlx .rl-aw + .rl-ov-ft .aw-row{flex:1}
  .rlx .rl-aw + .rl-ov-ft .rl-btn.is-quiet{flex:none}
}

/* ── The media library picker (rl-media.js) ────────────────────────────────
   A grid of what this workspace has already uploaded. The tile IS the file:
   an image shows itself, a video shows a real frame with a play mark, a PDF
   shows its own first page. Owner, 2026-09-21: "preview should be actual". */
.rlx .rl-md-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.rlx .rl-md-find{flex:1;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:var(--rl-r10);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line);color:var(--rl-ink3)}
.rlx .rl-md-find .rl-bare{flex:1;min-width:0}
/* All | Videos | Photos | PDFs. The library is one place whatever screen
   opened it; a file the caller cannot attach is dimmed, still visible, and
   says why when it is clicked. */
.rlx .rl-md-tabs{margin-bottom:12px}
.rlx .rl-md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.rlx .rl-md-t{position:relative;display:flex;flex-direction:column;padding:8px;border-radius:var(--rl-r12);border:1px solid var(--rl-line);background:#fff;text-align:left;min-width:0;transition:.14s var(--rl-ease)}
.rlx .rl-md-t:hover{border-color:#d5d9e3;box-shadow:var(--rl-sh-sm)}
.rlx .rl-md-t.is-on{border-color:var(--rl-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--rl-acc) 16%,transparent)}
/* the tile picks; the bin in its corner deletes (two buttons, side by side) */
.rlx .rl-md-pick{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;text-align:left;cursor:pointer}
.rlx .rl-md-pick:focus-visible{outline:2px solid var(--rl-acc);outline-offset:4px;border-radius:var(--rl-r8)}
/* a file this header cannot take is dimmed — its content, not its bin */
.rlx .rl-md-t.is-off .rl-md-pick{opacity:.45}
.rlx .rl-md-t.is-off:hover{border-color:var(--rl-line);box-shadow:none}
.rlx .rl-md-del{position:absolute;top:12px;right:12px;z-index:1;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--rl-ink2);box-shadow:0 1px 2px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.06);opacity:0;transition:opacity .14s,background .14s,color .14s}
.rlx .rl-md-t:hover .rl-md-del,.rlx .rl-md-t.is-on .rl-md-del,.rlx .rl-md-del:focus-visible{opacity:1}
.rlx .rl-md-del:hover{background:#fff0f3;color:var(--rl-danger)}
.rlx .rl-md-del:focus-visible{outline:2px solid var(--rl-danger);outline-offset:2px}
@media (hover:none){.rlx .rl-md-del{opacity:1;width:34px;height:34px;top:10px;right:10px}}
.rlx .rl-md-t .th{position:relative;display:grid;place-items:center;height:84px;border-radius:var(--rl-r8);background:var(--rl-surface3);color:var(--rl-ink3);overflow:hidden}
/* One rule for every box that shows a real file — the library tile, the
   attached row and the phone. The file fills its box; a PDF page sits on white
   and never takes the click, because the box itself is the button. */
.rlx .rl-md-t .th img,.rlx .rl-md-t .th video{width:100%;height:100%;object-fit:cover;display:block}
.rlx .rl-md-t .th object{position:absolute;top:0;left:0;width:calc(100% + 17px);height:100%;border:0;background:#fff;pointer-events:none}
.rlx .rl-md-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(17,20,28,.62);color:#fff;pointer-events:none}
.rlx .rl-md-play .rl-ic path{fill:currentColor}
.rlx .rl-md-t b{font-size:12px;font-weight:600;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-md-t .m{font-size:11px;color:var(--rl-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rl-md-sk{height:126px;border-radius:var(--rl-r12);background:linear-gradient(90deg,var(--rl-surface2),var(--rl-surface3),var(--rl-surface2));background-size:200% 100%;animation:rlMdSk 1.2s linear infinite}
@keyframes rlMdSk{to{background-position:-200% 0}}
@media (max-width:520px){ .rlx .rl-md-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} }