/* One remark on many covers (feature 3). Tokens only, no new tokens; the literal rgba values are the ones the frames (frames/kit/feat.css) use. */
html{scroll-padding-bottom:96px}

/* the check on a cover: 24, hit area 32, top 8 left 8 */
.rk-ck{position:absolute;top:8px;left:8px;z-index:4;display:grid;opacity:0;pointer-events:none;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgb(var(--p-navy-rgb) / .64);box-shadow:inset 0 0 0 2px rgba(238,240,251,.72);color:var(--ink);cursor:pointer;transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.rk-ck::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.rk-ck .i{width:var(--icon-md);height:var(--icon-md);stroke-width:2.6;visibility:hidden}
.rk-ck .i + .i{display:none}
.card:hover .rk-ck,.card:is(:focus-visible,:has(:focus)) .rk-ck,.rk-mode .rk-ck{opacity:1;pointer-events:auto}   /* hidden by opacity, not display: a keyboard user can still Tab to it */
.rk-ck:hover{background:var(--on-image);box-shadow:inset 0 0 0 2px var(--text)}
.rk-ck:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--text),var(--ring-gap-bg),0 0 0 4px var(--accent)}
.rk-ck.on{background:var(--accent);box-shadow:0 0 0 2px rgb(var(--p-navy-rgb) / .64)}
.rk-ck.on .i{visibility:visible}
.rk-ck.off{background:rgb(var(--p-navy-rgb) / .64);box-shadow:inset 0 0 0 2px rgba(238,240,251,.24);cursor:not-allowed}
.rk-ck.off .i:first-of-type{display:none}
.rk-ck.off .i + .i{display:block;visibility:visible;color:var(--text-3)}
.card.rk-on{box-shadow:0 0 0 2px var(--accent);border-color:transparent}
.card:hover .pills,.card:is(:focus-visible,:has(:focus)) .pills,.rk-mode .card .pills{left:40px}
.rk-mode .card .media-hit{cursor:pointer}
.rk-sent .media img{opacity:.5;transition:opacity var(--dur-3) var(--ease)}
.rk-sent .foot > :not(.rk-st){display:none}
.rk-sent .foot{padding-top:var(--s-3)}
.rk-st{display:flex;align-items:center;gap:var(--s-2);height:40px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.rk-st .i{width:var(--icon-md);height:var(--icon-md)}
.rk-select[aria-pressed=true]{background:var(--active);border-color:var(--line-hover);color:var(--text)}
html.cm-mode .rk-ck,html.cm-mode .rk-bar,html.cm-mode .rk-select{display:none!important}   /* comment mode hides the checks and the bar; the selection stays */

/* the bar: fixed, bottom 24, centred on the main column */
.rk-bar{position:fixed;z-index:var(--z-actionbar);left:var(--rk-c,50%);bottom:var(--s-4);translate:-50% 0;display:flex;align-items:center;gap:var(--s-3);height:var(--ctl-m);padding:0 var(--s-1);border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--raised);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);white-space:nowrap}
.rk-bar[hidden]{display:none}
.rk-bar:not([hidden]),.fl-bar.fl-in{animation:rk-in var(--dur-2) var(--ease) both}   /* the bars arrive with the short rise (--m-rise is 0 under reduced motion); fl-in only on a new bar, not on each repaint */
@keyframes rk-in{from{opacity:0;translate:-50% var(--m-rise)}}
.rk-n{height:32px;padding:0 var(--s-2);margin:0 -8px;border:0;border-radius:var(--r-1);background:none;color:var(--text);font:600 var(--fs-3)/20px var(--font);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.rk-n:hover{background:var(--hover)}
.rk-n[aria-pressed=true]{background:var(--active)}
.rk-q{margin-left:var(--s-1);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.rk-q:empty{display:none}
.rk-gap{width:12px}
.rk-bar .btn{height:var(--ctl-s)}   /* FX-8b (UI-COVER-20): the bar on the S scale, built like .seg: 36 controls 4 px inside a 44 pill, 16 from the bottom like the rail; at 1280x800 the first row's buttons stay clear (bar top 740, their feet 737) */
.rk-bar .btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.rk-bar .link{margin-left:var(--s-1);font-size:var(--fs-2)}
.rk-bar .icon-btn{flex:none}
.toasts.rk-up{left:var(--rk-c,50%);bottom:68px}   /* with the bar up, toasts centre on it */
.rk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* the dialog's left column */
.rk-left{display:flex;flex-direction:column}
.rk-lab{margin:0 0 var(--s-2);color:var(--text);font:600 var(--fs-3)/20px var(--font)}
.rk-lab small{color:var(--text-3);font-size:var(--fs-2);font-weight:400}
.rk-ta{display:block;width:100%;min-height:124px;padding:10px var(--s-3);resize:vertical;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font-size:var(--fs-3);line-height:20px;outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.rk-ta:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.rk-help{margin:var(--s-2) 0 var(--s-5);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.rk-opts{display:flex;flex-wrap:wrap;gap:6px}
.rk-opt[aria-checked=true]{background:var(--active);border-color:var(--line-hover);color:var(--text)}
.rk-stylenote{display:flex;gap:var(--s-2);margin:var(--s-3) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.rk-stylenote[hidden]{display:none}
.rk-stylenote .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--text-3)}
.rk-stylenote .link{padding:0}
.rk-chg{display:inline-flex;align-items:center;gap:var(--s-1)}
.rk-chg .link{padding:0 0 0 var(--s-1)}

/* Change: only what a redraw can use, for this send only */
.fx-pop{position:fixed;z-index:var(--z-dialog-pop);width:280px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--r-4);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);box-shadow:var(--shadow-3)}
.fx-pop .ch-head{padding:var(--s-2) 10px 6px;font:600 var(--fs-1)/16px var(--font);color:var(--text-3)}
.fx-pop .ch-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto 16px;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;border:0;border-radius:var(--r-2);background:none;color:var(--text);font:500 var(--fs-2)/18px var(--font);text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.fx-pop .ch-row:hover,.fx-pop .ch-row[aria-checked=true]{background:var(--hover)}
.fx-pop .ch-row .ch-v{color:var(--text-2);font-variant-numeric:tabular-nums;font-weight:400}
.fx-pop .ch-row .ch-ck{color:var(--accent)}
.fx-pop .ch-row .i{width:var(--icon-md);height:var(--icon-md)}
.fx-pop .menu-note{margin:0;padding:6px 10px;color:var(--text-3);font-size:var(--fs-1);line-height:16px}