/* public/assets/css/rd-components.css — shared Redaily components (IMPLEMENTATION-PLAN.md §3.2). Requires /assets/css/rd-tokens.css.
   Classes .rd-*, .lalo-icon, .lucide-icon only (descendant element parts like .rd-empty__frame>svg are fine).
   No bare element, body or legacy-class selectors. No hex or rgba literals. */

/* ---- Icons (C §4): Lalo glyphs are filled, lucide glyphs are stroked ---- */
.lalo-icon{display:inline-block;flex:none;overflow:visible;color:inherit;fill:currentColor;stroke:none;vertical-align:-.125em;pointer-events:none}
.lucide-icon{display:inline-block;flex:none;overflow:visible;color:inherit;fill:none;stroke:currentColor;vertical-align:-.125em;pointer-events:none}
.lalo-icon--r90{transform:rotate(90deg)} .lalo-icon--r180{transform:rotate(180deg)} .lalo-icon--r270{transform:rotate(270deg)}
.rd-spinner{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;color:var(--rd-icon);animation:rd-spin .8s linear infinite}
.rd-spinner>svg{display:block;width:18px;height:18px;fill:none}   /* progress-18 is a stroked glyph: keep .lalo-icon fill off its circles */
@keyframes rd-spin{to{transform:rotate(360deg)}}

/* ---- Buttons (public, standalone and viewer pages; the private app paints legacy .btn with the same values) ---- */
.rd-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  min-height:var(--rd-h-control);padding:0 16px;border:0;border-radius:var(--rd-r-control);
  background:var(--rd-bg-control);color:var(--rd-text);font:var(--rd-type-button);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--rd-dur-fast) var(--rd-ease),color var(--rd-dur-fast) var(--rd-ease)}
.rd-btn>svg,.rd-btn>.lalo-icon,.rd-btn>.lucide-icon{width:16px;height:16px}
.rd-btn:hover{background:var(--rd-bg-control-hover)}
.rd-btn:active,.rd-btn[aria-expanded=true],.rd-btn[aria-pressed=true]{background:var(--rd-bg-expanded)}
.rd-btn:disabled,.rd-btn[aria-disabled=true]{opacity:.5;cursor:default}
.rd-btn--primary{background:var(--rd-accent);color:var(--rd-on-accent)}
.rd-btn--primary:hover{background:var(--rd-accent-hover)}
.rd-btn--primary:active{background:var(--rd-accent-pressed)}
.rd-btn--ghost{background:transparent;color:var(--rd-text-secondary)}
.rd-btn--ghost:hover{background:var(--rd-hover);color:var(--rd-text)}
.rd-btn--quiet{background:transparent;color:var(--rd-text);box-shadow:inset 0 0 0 1px var(--rd-border-strong)}
.rd-btn--quiet:hover{background:var(--rd-bg-control);box-shadow:none}
.rd-btn--danger{background:var(--rd-danger);color:var(--rd-on-accent)}
.rd-btn--danger:hover{background:var(--rd-danger-hover)}
.rd-btn--sm{min-height:var(--rd-h-compact);padding:0 12px;border-radius:var(--rd-r-button)}
.rd-btn--lg{min-height:var(--rd-h-control-lg);border-radius:var(--rd-r-control-lg)}
.rd-btn__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rd-cta{appearance:none;display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;
  min-height:var(--rd-h-cta);padding:10px 18px;border:0;border-radius:var(--rd-r-control-lg);
  background:var(--rd-accent);color:var(--rd-on-accent);font:var(--rd-type-cta);text-decoration:none;cursor:pointer;
  transition:background-color var(--rd-dur-fast) var(--rd-ease)}
.rd-cta:hover{background:var(--rd-accent-hover)}
.rd-cta:active{background:var(--rd-accent-pressed)}
.rd-cta:disabled{opacity:.5;cursor:default}
.rd-icon-btn{appearance:none;display:inline-grid;place-items:center;flex:none;box-sizing:border-box;
  width:var(--rd-h-control);height:var(--rd-h-control);padding:0;border:0;border-radius:var(--rd-r-control);
  background:transparent;color:var(--rd-icon);cursor:pointer;
  transition:background-color var(--rd-dur-fast) var(--rd-ease),color var(--rd-dur-fast) var(--rd-ease)}
.rd-icon-btn>svg{width:24px;height:24px}
.rd-icon-btn>svg[data-g="16"]{width:16px;height:16px}
.rd-icon-btn:hover,.rd-icon-btn[aria-expanded=true],.rd-icon-btn[aria-pressed=true]{background:var(--rd-hover);color:var(--rd-text)}
.rd-icon-btn:disabled{opacity:.5;cursor:default;background:transparent}
.rd-icon-btn--inline{width:var(--rd-h-inline);height:var(--rd-h-inline);border-radius:var(--rd-r-button)}
.rd-icon-btn--inline>svg,.rd-icon-btn--inline>svg[data-g="16"]{width:16px;height:16px}

/* ---- Fields (B §3.3: translucent field, white .5 focus border, no halo) ---- */
.rd-input{display:block;box-sizing:border-box;width:100%;min-width:0;height:var(--rd-h-control);padding:0 12px;
  border:1px solid var(--rd-border-strong);border-radius:var(--rd-r-control);background:var(--rd-field-bg);color:var(--rd-text);
  font:var(--rd-type-body);transition:border-color var(--rd-dur-fast) var(--rd-ease)}
.rd-input::placeholder{color:var(--rd-text-tertiary)}
.rd-input:hover{border-color:var(--rd-border-hover)}
.rd-input:focus{outline:none;border-color:var(--rd-field-focus-border)}
.rd-input[aria-invalid=true]{border-color:var(--rd-error)}
.rd-input:disabled{opacity:.5;cursor:default}
.rd-input--xl{height:var(--rd-h-field-xl);padding:0 16px;border-radius:var(--rd-r-control-lg);font:var(--rd-type-lead)}
.rd-field-label{display:block;margin:0 0 8px;font:var(--rd-type-field-label);color:var(--rd-text)}
.rd-field-error{margin:8px 0 0;font:var(--rd-type-meta);color:var(--rd-error)}
.rd-field-error:empty{display:none}

/* ---- Names, rules, counters (D D1-D3) ---- */
.rd-name__ext{color:var(--rd-text-secondary)}
.rd-oneline{min-width:0}
.rd-oneline .rd-name{display:flex;min-width:0;max-width:100%}
.rd-oneline .rd-name__base{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-oneline .rd-name__ext{flex:none;white-space:nowrap}
.rd-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rd-rule{grid-column:1/-1;display:flex;align-items:center;gap:8px;height:32px;margin:8px 0 0;
  font:var(--rd-type-badge);color:var(--rd-text-secondary);font-variant-numeric:tabular-nums}
.rd-rule:first-child{margin-top:0}
.rd-rule__n{font-weight:var(--rd-fw-body);color:var(--rd-text-tertiary)}
.rd-rule::after{content:"";flex:1;height:1px;background:var(--rd-border-mid)}

/* ---- Monogram (D D13; CL-40) ---- */
.rd-avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--rd-bg-expanded);color:var(--rd-text-strong);font:600 12px/16px var(--rd-font);letter-spacing:0;user-select:none}
.rd-avatar--40{width:40px;height:40px;font:600 14px/20px var(--rd-font)}

/* ---- Corner marks (D D5): four 12px corners, colour from --c ---- */
:where(.rd-marks){position:relative}   /* zero specificity: a host that positions itself (e.g. the fixed .drag-overlay) keeps its own value */
.rd-marks{--c:var(--rd-mark);--a:var(--rd-mark-arm);--w:var(--rd-mark-w)}
.rd-marks::before{content:"";position:absolute;inset:0;pointer-events:none;border:var(--w) solid var(--c);--b:calc(100% - var(--a));
  clip-path:polygon(0 0,var(--a) 0,var(--a) calc(var(--a) - 1px),var(--b) calc(var(--a) - 1px),var(--b) 0,100% 0,100% var(--a),
    calc(var(--b) + 1px) var(--a),calc(var(--b) + 1px) var(--b),100% var(--b),100% 100%,var(--b) 100%,var(--b) calc(var(--b) + 1px),
    var(--a) calc(var(--b) + 1px),var(--a) 100%,0 100%,0 var(--b),var(--b) var(--b),var(--b) var(--a),0 var(--a))}

/* ---- Empty states (D §5 anatomy, B colours, C glyphs) ---- */
.rd-empty{display:flex;align-items:flex-start;gap:24px;max-width:560px;margin:24px 0 0;text-align:left}
.rd-empty[hidden]{display:none}
.rd-empty__frame{display:grid;place-items:center;flex:none;width:96px;height:96px;color:var(--rd-icon)}
.rd-empty__frame>.ico,.rd-empty__frame>svg{width:32px;height:32px}
.rd-empty__body{min-width:0;padding-top:12px}
.rd-empty__title{margin:0;font:var(--rd-type-subtitle);color:var(--rd-text);text-wrap:balance}
.rd-empty__text{margin:4px 0 0;max-width:380px;font:var(--rd-type-body-long);color:var(--rd-text-secondary);text-wrap:pretty}   /* no one-word last line */
.rd-empty__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rd-empty--error .rd-empty__frame{color:var(--rd-error)}
.rd-empty--compact{align-items:center;gap:12px;margin:12px 0 0}
.rd-empty--compact .rd-empty__frame{width:auto;height:auto}
.rd-empty--compact .rd-empty__frame>.ico,.rd-empty--compact .rd-empty__frame>svg{width:24px;height:24px}
.rd-empty--compact .rd-empty__body{padding-top:0}
.rd-empty--compact .rd-empty__title{font:var(--rd-type-small-strong)}
.rd-empty--compact .rd-empty__actions{margin-top:8px}
/* with a «Повторить» row the 24 glyph sits on the 20 px title line, not on the title + button block */
.rd-empty--compact:has(.rd-empty__actions){align-items:flex-start}
.rd-empty--compact:has(.rd-empty__actions) .rd-empty__frame{margin-top:-2px}
@media (max-width:760px){.rd-empty{flex-direction:column;gap:16px}.rd-empty__body{padding-top:0}.rd-empty--compact{flex-direction:row;gap:12px}}

/* ---- Full-page state: gates, viewer errors, HTML error pages (E §3.16.4, D10, CL-54) ---- */
.rd-state{box-sizing:border-box;max-width:440px;margin:72px auto;padding:36px 32px 32px;color:var(--rd-text)}
.rd-state--card{background:var(--rd-bg-card);border:1px solid var(--rd-border);border-radius:var(--rd-r-card)}
.rd-state__symbol{display:grid;place-items:center;width:56px;height:56px;margin-bottom:24px;border-radius:var(--rd-r-card);
  background:var(--rd-bg-control);color:var(--rd-icon)}
.rd-state__symbol>svg{width:24px;height:24px}
.rd-state__symbol--accent{background:var(--rd-accent-soft);color:var(--rd-accent-ink)}
.rd-state__symbol--error{background:var(--rd-error-soft);color:var(--rd-error)}
.rd-state__eyebrow{display:block;font:var(--rd-type-small);color:var(--rd-text-secondary)}
.rd-state__title{margin:6px 0 12px;font:var(--rd-type-state);letter-spacing:var(--rd-track-28);color:var(--rd-text-strong)}
.rd-state__body{margin:0 0 24px;max-width:46ch;font:var(--rd-type-body-long);color:var(--rd-text-secondary)}
@media (max-width:700px){.rd-state{max-width:min(440px,calc(100% - 32px));margin:16px auto;padding:28px 20px 24px}.rd-state__title{font-size:24px;line-height:30px}}

/* ---- Brand, public header, public footer (D §6.11, E §3.28, D4) ---- */
/* «Redaily» and the product share one baseline (private sidebar lockup, rd-shell.css); the logo is centred */
.rd-brand{display:inline-flex;align-items:baseline;gap:9px;color:var(--rd-text-strong);text-decoration:none;
  font:var(--rd-type-wordmark);letter-spacing:var(--rd-track-wordmark);border-radius:var(--rd-r-row)}
.rd-brand>img{display:block;flex:none;align-self:center;width:28px;height:28px}
.rd-brand__product{color:var(--rd-text-secondary);font:var(--rd-type-meta);letter-spacing:0}
.rd-public-header{display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;background:transparent}
.rd-public-header__spacer{flex:1}
@media (max-width:700px){.rd-public-header{padding:0 16px}}
@media (max-width:520px){.rd-brand{font-size:17px;gap:8px}.rd-brand>img{width:24px;height:24px}}
.rd-footer{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 0;font:var(--rd-type-meta);color:var(--rd-text-tertiary)}
.rd-footer a{color:var(--rd-text-secondary);text-decoration:none;border-radius:var(--rd-r-4)}
.rd-footer a:hover{color:var(--rd-text);text-decoration:underline;text-underline-offset:3px}

/* ---- Containers ---- */
.rd-panel{min-width:0;padding:16px 18px 18px;background:var(--rd-bg-card);border:1px solid var(--rd-border);border-radius:var(--rd-r-panel)}

/* ---- Focus (B §3.3: keyboard only, white .5, offset 0) ---- */
.rd-btn:focus-visible,.rd-cta:focus-visible,.rd-icon-btn:focus-visible,.rd-brand:focus-visible,.rd-footer a:focus-visible{
  outline:var(--rd-focus-ring);outline-offset:var(--rd-focus-offset)}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  :where([class^="rd-"],[class*=" rd-"]),:where([class^="rd-"],[class*=" rd-"])::before,:where([class^="rd-"],[class*=" rd-"])::after{
    animation:none!important;transition:none!important}
  /* M17: busy stays legible without rotation — a slow opacity pulse (literal 1.2s: the duration tokens are 0 here) */
  .rd-spinner{animation:rd-busy 1.2s var(--rd-ease-in-out) infinite alternate!important}
}
@keyframes rd-busy{to{opacity:.45}}