/* =====================================================================================================
mintz-dm admin UI: "פופ של יוצרת" (design/DESIGN-C.md + design/DESKTOP-C.md). One stylesheet, no build.
CLASS API (server markup comes from src/web/layout.js helpers; browser twins in public/app.js)
---------------------------------------------------------------------------------------------------
Tokens :root custom properties below (colors, type, space --s-*, radii --r-*, shadows --e-*).
Rule color data-color="1".."6" on ANY element sets --rc-fill, --rc-ink, --rc-tint, --rc-shadow,
--rc-mark (creation order: 1 lilac, 2 butter, 3 sky, 4 bubblegum, 5 pistachio, 6 peach).
Type .title (Fredoka H1) .t-display-xl .t-display-l .t-number-l .t-number-m .t-action
.section-title (H2 Rubik 600 18) .t-body-l .t-body .t-label .t-meta .t-caption .num (tabular)
.muted .visually-hidden
Shell body.app.has-shell[.has-bar|.no-bar] > .sidebar (>= 1024px: ink slab, .wordmark, .side-nav
> .side-nav__item[aria-current], .sidebar__foot > .conn-status--ok|--problem|--warning|--unknown)
> main.stage (the content) > .anchor-bar (< 1024px: .anchor-bar__new + .tab[aria-current])
> .floating-action (phone-only floating save when .no-bar) > #toasts.toasts
.page-head (> .page-head__title > .title, .page-head__sub; > .page-head__actions,
.page-head__primary is hidden on phones where the bar carries "חוק חדש")
Layout grids: .grid-a (main + 352 panel) .grid-b (form + 440 preview) .grid-c (list + 400
detail) .grid-d (single 720 column) — DESKTOP-C §3; all stack on phones.
Buttons .btn + .btn--primary (tangerine, Fredoka) with sizes .btn--inline(44) .btn--head(48)
.btn--bar(52) .btn--xl(60 floating) ; .btn--ink .btn--secondary .btn--quiet .btn--danger
.btn--icon (44 circle) .btn--block ; states: :disabled / [aria-disabled=true] / [aria-busy=true]
(put first). .link-quiet (underlined text link, 44 hit).
.pause-btn > .pause-btn__face (the discreet "השהי הכל").
Switch button.switch[role=switch][aria-checked][aria-disabled] > .switch__track > .switch__knob
Sticker article.sticker[data-color][data-state=on|off] (+ .sticker--new tile with .sticker__tag,
.sticker--pair = half-width tile on phones) > .sticker__top > .sticker__id > .sticker__kw >
a.stretch (whole card is the link; the switch sits above it) ; .sticker__url ;
.sticker__line[data-line=on|off|paused] ; .sticker__waiting[data-line=blocked] ;
.sticker__stats > .stat > .stat__num + .stat__label. Which line shows is pure CSS:
data-state + body[data-paused] + body[data-blocked].
Compact article.rule-row[data-color][data-state] > h4.rule-row__kw > a.stretch ; .rule-row__text >
.rule-row__meta[data-line] + .rule-row__sub ; switch. .rule-grid .compact-list
details.off-group > summary.off-group__toggle (+ .off-group__list)
Stat trio section.week > .week__title + .week__steps > .week__step(.week__step--hot) > .week__num +
.week__label ; .week__chev
Fields .field > .field__label (+ .tag-optional) ; .input ; .input--keyword[data-color] (72, Fredoka,
the sticker preview) ; .link-input > .link-input__icon + input + .link-input__open
("פתחי לבדיקה") ; textarea.textarea ; .field__foot > .field__help + .counter(.counter--over) ;
.field__error (with an alert icon) ; [aria-invalid=true] turns any control red.
Chips button.chip[aria-pressed] > .chip__dot[data-color] + label + .chip__count ; .chip-row ;
.rule-chip[data-color] ; .platform-tag
Pills .pill.pill--success|--sent|--skipped|--neutral|--danger|--warning|--paused (status of a
comment, DESIGN-C §5.7)
Banners section.banner.banner--suggestion[data-color] | --paused | --problem | --warning
> .banner__icon + .banner__body > .banner__title + .banner__text + .banner__actions
Avatar .avatar[data-color] | .avatar--none | .avatar--tal ; sizes .avatar--sm(36) --xs(32) --xxs(28)
Activity ul.act-list > li.act-row > .avatar + .act-row__body > .act-row__top (> p.act-row__text with
mark.kw-mark[data-color] + .pill) + .act-row__meta (> .act-row__who + .act-row__time)
Panels .panel (surface card, r-xl, e1) > .panel__head > .panel__title + .panel__note ; .card
DM preview .dm > .avatar--tal.avatar--sm + .dm__bubble > .dm__text + .dm__button[data-color] ;
.dm__public (the small public reply line)
Test box section.test-panel (dark ink) > .test-panel__head ; .test-panel__row > .avatar + input.test-panel__input ;
.test-result.test-result--match|--none|--empty (role=status)
Toast #toasts > .toast > .toast__icon + .toast__text + .toast__action (app.js toast())
Dialog dialog.sheet > .sheet__title + .sheet__text + .sheet__actions (app.js confirmDialog())
Empty .empty > .collage ... + section.how > ol.steps ; .kw-inline[data-color]
Motion .pop (the one sticker pop, DESIGN-C §4) ; .confetti > i ; all movement is dropped under
prefers-reduced-motion.
===================================================================================================== */
:root {
/* neutrals (DESIGN-C §1.1) */
--ground: #F4F1FA;
--surface: #FDFCFF;
--sunk: #ECE7F6;
--hairline: #EEEAF6;
--border: #DDD5EC;
--border-strong: #BDB4D6;
--ink: #1E1636;
--ink-2: #3F3660;
--muted: #5F577D;
--off-ink: #6E6690;
--faint: #8C84A8;
--on-ink: #FDFCFF;
--on-ink-muted: #CFC7EA;
--focus: #4B2FC9;
--focus-ring-soft: #D9CCFF;
/* brand (§1.2) */
--primary: #FF7438;
--primary-pressed: #F0662C;
--marker: #FFD95A;
/* status (§1.3) */
--success: #84E2B4;
--success-icon: #0B6B45;
--danger-fill: #FFE1D9;
--danger-text: #A8231B;
--danger-border: #C8483A;
--warning-fill: #FFEBC0;
--warning-text: #6E4300;
--sent-border: #CFC6E4;
--divider-on-fill: rgba(30, 22, 54, 0.16);
--row-sep: rgba(30, 22, 54, 0.08);
--secondary-border: rgba(30, 22, 54, 0.28);
/* type (§3) */
--font-display: 'Fredoka', 'Rubik', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Rubik', 'Segoe UI', system-ui, -apple-system, 'Noto Sans Hebrew', 'Arial Hebrew', sans-serif;
/* space (§4) */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--gutter: 16px;
/* radii (§4, concentric) */
--r-xs: 8px;
--r-s: 13px;
--r-m: 18px;
--r-l: 22px;
--r-xl: 28px;
--r-2xl: 34px;
--r-pill: 999px;
/* elevation (§4) */
--e1: 0 12px 26px -20px rgba(46, 22, 110, 0.55);
--e3: 0 20px 30px -16px rgba(30, 22, 54, 0.75);
--e-primary: 0 16px 26px -14px rgba(200, 70, 10, 0.75);
--e-primary-sm: 0 12px 20px -12px rgba(200, 70, 10, 0.8);
--e-primary-head: 0 14px 22px -14px rgba(200, 70, 10, 0.8);
--e-lift: 0 2px 5px rgba(20, 10, 50, 0.35);
--e-icon-btn: 0 8px 18px -12px rgba(46, 22, 110, 0.6);
/* motion (§4) */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--spring: cubic-bezier(0.34, 1.36, 0.64, 1);
/* rule color defaults (lilac) so a component without data-color still renders */
--rc-fill: #B39EFF;
--rc-ink: #412C75;
--rc-tint: #F0EDFF;
--rc-shadow: rgba(76, 55, 129, 0.65);
--rc-mark: rgba(179, 158, 255, 0.62);
--bar-h: 68px;
--bar-reserve: 112px;
--sidebar-w: 248px;
}
/* the 6 rule colors (DESIGN-C §2), assigned in creation order */
[data-color='1'] { --rc-fill: #B39EFF; --rc-ink: #412C75; --rc-tint: #F0EDFF; --rc-shadow: rgba(76, 55, 129, 0.65); --rc-mark: rgba(179, 158, 255, 0.62); }
[data-color='2'] { --rc-fill: #F7D35E; --rc-ink: #543800; --rc-tint: #F7F0DA; --rc-shadow: rgba(95, 67, 0, 0.55); --rc-mark: rgba(247, 211, 94, 0.78); }
[data-color='3'] { --rc-fill: #78C6FF; --rc-ink: #004076; --rc-tint: #E0F3FF; --rc-shadow: rgba(0, 76, 130, 0.6); --rc-mark: rgba(120, 198, 255, 0.6); }
[data-color='4'] { --rc-fill: #F896BB; --rc-ink: #6A183F; --rc-tint: #FFE8F1; --rc-shadow: rgba(118, 37, 74, 0.6); --rc-mark: rgba(248, 150, 187, 0.58); }
[data-color='5'] { --rc-fill: #B0D77C; --rc-ink: #2A4700; --rc-tint: #EAF4DF; --rc-shadow: rgba(52, 83, 0, 0.55); --rc-mark: rgba(176, 215, 124, 0.7); }
[data-color='6'] { --rc-fill: #F7AC72; --rc-ink: #682600; --rc-tint: #FFECDD; --rc-shadow: rgba(117, 50, 0, 0.55); --rc-mark: rgba(247, 172, 114, 0.62); }
/* ---------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--ground);
color: var(--ink);
font-family: var(--font-body);
font-size: 15px;
line-height: normal;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
::selection { background: var(--marker); color: var(--ink); }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ink); }
a:hover { color: var(--focus); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
.icon { flex: none; }
.icon--flip { transform: scaleX(-1); }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
[dir='ltr'] { unicode-bidi: isolate; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sidebar :focus-visible, .anchor-bar :focus-visible, .banner--paused :focus-visible, .test-panel :focus-visible, .toast :focus-visible {
outline-color: var(--marker);
}
.only-desk { display: none !important; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: 8px; right: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--r-m);
background: var(--ink); color: var(--on-ink); text-decoration: none; transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--marker); }
/* ---------------------------------------------------------------------------------------------- type */
.title, .t-title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; }
.t-display-xl { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1.02; letter-spacing: -0.015em; }
.t-display-l { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; }
.t-number-l { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.t-number-m { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.t-action { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1; }
.section-title, .t-heading { font-size: 18px; font-weight: 600; line-height: 1.3; }
.t-body-l { font-size: 16px; line-height: 1.5; }
.t-body { font-size: 15px; line-height: 1.45; }
.t-label { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.t-meta { font-size: 13px; line-height: 1.35; }
.t-caption { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
/* ---------------------------------------------------------------------------------------------- shell */
.stage {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 16px var(--gutter) calc(var(--bar-reserve) + env(safe-area-inset-bottom, 0px));
}
.stage:focus { outline: none; }
.no-bar .stage { padding-bottom: 40px; }
.no-bar:has(.floating-action) .stage { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.no-shell .stage { max-width: none; padding: 0; }
/* WCAG 2.4.11: Tab never lands a field under the fixed anchor bar or the floating save (phones; reset >= 1024) */
html:has(> body.has-bar) { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
html:has(> body > .floating-action) { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
html:has(> body[data-screen='texts'].has-bar) { scroll-padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); } /* + the floating save */
.sidebar { display: none; }
/* the phone anchor bar (DESIGN-C §5.9) */
.bar-fade {
position: fixed; inset: auto 0 0 0; height: 120px; pointer-events: none; z-index: 20;
background: linear-gradient(to top, var(--ground) 55%, rgba(244, 241, 250, 0));
}
.anchor-bar {
position: fixed; z-index: 30;
right: 14px; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
max-width: 732px; margin: 0 auto;
height: var(--bar-h); padding: 8px; border-radius: var(--r-2xl);
background: var(--ink); box-shadow: var(--e3);
display: flex; align-items: center; gap: 6px;
}
.anchor-bar__new { flex: none; }
.anchor-bar__tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.tab {
height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
border-radius: 20px; color: var(--on-ink-muted); text-decoration: none; font-size: 12px; font-weight: 500;
transition: background-color 150ms ease-out, color 150ms ease-out;
}
.tab:hover { color: var(--on-ink); background: rgba(253, 252, 255, 0.07); }
.tab[aria-current='page'] { color: var(--marker); background: rgba(255, 217, 90, 0.14); font-weight: 600; }
.floating-action {
position: fixed; z-index: 30; right: 16px; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
max-width: 728px; margin: 0 auto; display: flex;
}
.floating-action > * { flex: 1; }
/* header row of every shell screen */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-head__title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
.page-head__sub { font-size: 13px; color: var(--muted); }
.page-head__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.has-bar .page-head__primary { display: none; }
/* layout patterns (DESKTOP-C §3) stack on phones */
.grid-a, .grid-b, .grid-c { display: flex; flex-direction: column; gap: 18px; }
.grid-d { display: flex; flex-direction: column; gap: 20px; }
/* ---------------------------------------------------------------------------------------------- buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 44px; padding: 0 18px; border: 0; border-radius: 22px;
background: transparent; color: var(--ink);
font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap;
text-decoration: none; cursor: pointer; user-select: none;
transition: transform 160ms var(--ease-out), background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:active { transform: scale(0.97); transition-duration: 120ms; }
.btn:hover { color: var(--ink); }
.btn--primary {
background: var(--primary); color: var(--ink);
font-family: var(--font-display); font-weight: 600; font-size: 17px;
padding: 0 16px 0 20px;
box-shadow: var(--e-primary-sm);
}
.btn--primary:hover { background: var(--primary-pressed); color: var(--ink); }
.btn--inline { height: 44px; border-radius: 22px; font-size: 17px; }
.btn--head { height: 48px; border-radius: 24px; padding: 0 18px 0 24px; gap: 8px; font-size: 19px; box-shadow: var(--e-primary-head); }
.btn--bar { height: 52px; border-radius: 26px; padding: 0 14px 0 20px; font-size: 19px; box-shadow: none; }
.btn--xl { height: 60px; border-radius: 30px; padding: 0 24px; gap: 8px; font-size: 21px; box-shadow: var(--e-primary); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { color: var(--on-ink); background: #2c2250; }
.btn--secondary { border: 2px solid var(--secondary-border); padding: 0 16px; }
.btn--secondary:hover { border-color: var(--ink); }
.btn--quiet {
padding: 0 6px; color: var(--ink-2); font-size: 14.5px;
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.btn--danger { background: var(--danger-fill); color: var(--danger-text); border: 2px solid var(--danger-border); }
.btn--danger:hover { color: var(--danger-text); background: #ffd3c7; }
.btn--icon {
flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
background: var(--surface); border: 1.5px solid var(--hairline); box-shadow: var(--e-icon-btn);
}
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] {
background: var(--sunk); color: var(--muted); box-shadow: none; border-color: transparent; cursor: not-allowed; transform: none;
}
.btn[aria-busy='true'] { cursor: progress; }
.spinner {
flex: none; width: 16px; height: 16px; border-radius: 50%;
border: 2.5px solid rgba(30, 22, 54, 0.25); border-top-color: var(--ink);
animation: spin 0.8s linear infinite;
}
.btn--ink .spinner, .toast .spinner { border-color: rgba(253, 252, 255, 0.3); border-top-color: var(--on-ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.link-quiet {
align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 4px;
color: var(--ink); font-size: 14.5px; font-weight: 500;
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
/* "השהי הכל": a 44px hit area around a small surface pill (C2-Home / D2-Home) */
.pause-btn {
flex: none; height: 44px; padding: 0; border: 0; background: transparent;
display: flex; align-items: center; color: var(--ink-2);
}
.pause-btn__face {
display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 11px;
border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--surface);
font-size: 13px; font-weight: 500; transition: border-color 150ms ease-out, transform 160ms var(--ease-out);
}
.pause-btn:hover .pause-btn__face { border-color: var(--ink-2); }
.pause-btn:active .pause-btn__face { transform: scale(0.97); }
/* ---------------------------------------------------------------------------------------------- switch */
.switch {
position: relative; z-index: 2; flex: none; width: 60px; height: 44px; padding: 0; border: 0;
background: transparent; display: flex; align-items: center; justify-content: center;
}
.switch:focus-visible { outline-offset: 0; border-radius: var(--r-pill); }
.switch__track {
position: relative; width: 56px; height: 34px; border-radius: var(--r-pill);
background: var(--surface); border: 2px solid var(--faint);
transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.switch__knob {
position: absolute; top: 50%; right: 4px; width: 22px; height: 22px; border-radius: 50%;
background: var(--faint); color: var(--ink); transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
transition: right 350ms var(--spring), width 200ms var(--ease-out), height 200ms var(--ease-out), background-color 150ms ease-out;
}
.switch__knob .icon { opacity: 0; transition: opacity 120ms ease-out; }
.switch[aria-checked='true'] .switch__track { background: var(--ink); border-color: var(--ink); }
.switch[aria-checked='true'] .switch__knob { right: 24px; width: 26px; height: 26px; background: var(--surface); box-shadow: var(--e-lift); }
.switch[aria-checked='true'] .switch__knob .icon { opacity: 1; }
.switch[aria-disabled='true'] { cursor: not-allowed; }
.switch[aria-disabled='true'] .switch__track { background: var(--sunk); border-color: var(--sunk); }
.switch[aria-disabled='true'][aria-checked='false'] .switch__track { border-color: var(--border-strong); }
.switch[aria-disabled='true'] .switch__knob { background: var(--border-strong); box-shadow: none; }
.switch[aria-disabled='true'] .switch__knob .icon { opacity: 0; }
/* press feedback on the remaining pressables (DESIGN-C §4: scale 0.97 in 120ms, release 160ms) */
.tab, .side-nav__item, .switch__track, .off-group__toggle, .more__toggle, .variants__add, .link-input__open {
transition-property: transform, background-color, color, border-color; transition-duration: 160ms; transition-timing-function: ease-out;
}
.tab:active, .side-nav__item:active, .switch:not([aria-disabled='true']):active .switch__track, .off-group__toggle:active,
.more__toggle:active, .variants__add:active, .link-input__open:active { transform: scale(0.97); transition-duration: 120ms; }
/* ---------------------------------------------------------------------------------------------- pills, chips, tags */
.pill {
flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 10px;
border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
border: 1.5px solid transparent;
}
.pill--success { background: var(--success); color: var(--ink); }
.pill--sent { background: var(--surface); border-color: var(--sent-border); color: var(--ink); }
.pill--skipped { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--muted); }
.pill--neutral { background: var(--sunk); color: var(--ink-2); }
.pill--danger { background: var(--danger-fill); border-color: var(--danger-border); color: var(--danger-text); }
.pill--warning { background: var(--warning-fill); color: var(--warning-text); }
.pill--paused { background: var(--ink); color: var(--on-ink); }
.pill--paused .icon { color: var(--marker); }
.chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chip {
height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px 0 15px; flex: none;
border: 2px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rc-fill); border: 1.5px solid var(--ink); }
.chip[aria-pressed='true'] .chip__dot { border-color: var(--surface); }
.chip__count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed='true'] .chip__count { color: var(--on-ink-muted); }
.rule-chip {
display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 9px;
border-radius: var(--r-pill); background: var(--rc-tint); color: var(--rc-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.rule-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc-fill); }
.platform-tag {
flex: none; display: inline-block; padding: 0 7px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
font-size: 12px; line-height: 17px; color: var(--ink-2); white-space: nowrap;
}
.tag-optional {
display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); background: var(--sunk);
color: var(--ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.3;
}
/* ---------------------------------------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__row { display: flex; align-items: center; gap: 8px; }
.field__label { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.field__help { font-size: 13px; line-height: 1.35; color: var(--muted); }
.field__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__error { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.35; color: var(--danger-text); }
.counter { font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.counter--over { color: var(--danger-text); }
.input, .textarea {
display: block; width: 100%; height: 56px; padding: 0 16px;
border: 2px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--ink);
font-family: var(--font-body); font-size: 16px; transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.textarea { height: auto; min-height: 96px; padding: 12px 16px; font-size: 15px; line-height: 1.5; resize: none; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-ring-soft); }
.input[aria-invalid='true'], .textarea[aria-invalid='true'], .link-input:has([aria-invalid='true']) { border-color: var(--danger-border); }
.input--keyword {
height: 72px; padding: 0 20px; border: 3px solid var(--surface); border-radius: var(--r-l);
background: var(--rc-fill); color: var(--ink);
font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.01em;
box-shadow: 0 16px 26px -18px var(--rc-shadow);
}
.input--keyword::placeholder { color: var(--rc-ink); opacity: 0.85; }
.input--keyword:focus-visible { border-color: var(--surface); box-shadow: 0 16px 26px -18px var(--rc-shadow), 0 0 0 3px var(--focus); }
.link-input {
display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px 0 4px;
border: 2px solid var(--border); border-radius: var(--r-m); background: var(--surface);
transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.link-input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-ring-soft); }
.link-input__icon { flex: none; display: flex; color: var(--muted); }
.link-input input {
flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink);
font-size: 16px; font-weight: 500; text-align: right;
}
.link-input input:focus-visible { outline: none; }
.link-input__open {
flex: none; height: 44px; display: flex; align-items: center; gap: 5px; padding: 0 12px;
border-radius: var(--r-s); background: var(--sunk); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
}
.link-input__open:hover { color: var(--ink); background: #e2dcf0; }
/* ---------------------------------------------------------------------------------------------- stickers */
.stretch { color: inherit; text-decoration: none; }
.stretch:hover { color: inherit; }
.stretch::after { content: ''; position: absolute; inset: -3px; z-index: 1; border-radius: inherit; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xl); }
.sticker {
position: relative; display: flex; flex-direction: column; gap: 8px;
padding: 12px 18px 12px 12px;
background: var(--rc-fill); border: 3px solid var(--surface); border-radius: var(--r-xl);
box-shadow: 0 16px 26px -18px var(--rc-shadow); color: var(--ink);
transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.sticker__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sticker__id { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.sticker__kw {
font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1.02; letter-spacing: -0.015em;
color: var(--ink); overflow-wrap: anywhere;
}
.sticker__url { display: flex; align-items: center; gap: 5px; max-width: 100%; font-size: 13px; color: var(--rc-ink); }
.sticker__url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker__line { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.sticker__line bdi { font-weight: 500; }
.sticker__waiting {
align-self: flex-start; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 12px;
border-radius: var(--r-pill); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink);
}
.sticker__waiting-n { color: var(--muted); }
.sticker__stats {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
padding-top: 8px; border-top: 1.5px solid var(--divider-on-fill); color: var(--ink);
}
.stat { display: flex; align-items: baseline; gap: 5px; }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12.5px; }
/* which status line shows (data-state, paused, blocked) */
[data-line] { display: none; }
[data-state='on'] > [data-line='on'], [data-state='on'] [data-line='on'] { display: flex; }
[data-state='off'] > [data-line='off'], [data-state='off'] [data-line='off'] { display: flex; }
body[data-blocked] .sticker[data-state='on'] > [data-line='on'] { display: none; }
body[data-blocked] .sticker[data-state='on'] > [data-line='blocked'] { display: flex; }
body[data-paused] .sticker[data-state='on'] > [data-line='on'],
body[data-paused] .sticker[data-state='on'] > [data-line='blocked'] { display: none; }
body[data-paused] .sticker[data-state='on'] > [data-line='paused'] { display: flex; }
/* OFF: one treatment for every color (DESIGN-C §2) */
.sticker[data-state='off'] {
background: var(--surface); border: 2px dashed var(--border-strong); box-shadow: none;
padding: 13px 19px 13px 13px;
}
.sticker[data-state='off'] .sticker__kw { color: var(--off-ink); }
.sticker[data-state='off'] .sticker__url, .sticker[data-state='off'] .sticker__line { color: var(--muted); }
.sticker[data-state='off'] .sticker__stats { color: var(--muted); border-top-color: var(--hairline); }
/* new-rule tile */
.sticker--new { margin-top: 6px; gap: 6px; padding: 18px 18px 14px 12px; }
.sticker--new .sticker__top { align-items: center; }
.sticker--new .sticker__kw { font-size: 36px; letter-spacing: -0.01em; }
.sticker--new .sticker__url { font-size: 12.5px; }
.sticker--new[data-state='off'] { padding: 19px 19px 15px 13px; }
.sticker__tag {
position: absolute; top: -13px; right: 16px; z-index: 3; display: flex; align-items: center; height: 28px; padding: 0 11px;
border-radius: var(--r-pill); background: var(--ink); border: 2.5px solid var(--surface); color: var(--marker);
font-family: var(--font-display); font-weight: 600; font-size: 14px; transform: rotate(-7deg);
box-shadow: 0 6px 12px -6px rgba(20, 10, 50, 0.6); pointer-events: none;
}
.sticker--new[data-state='off'] .sticker__tag { display: none; }
@media (hover: hover) and (pointer: fine) {
.sticker[data-state='on']:hover { transform: translateY(-2px); box-shadow: 0 20px 30px -18px var(--rc-shadow); }
}
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.rule-grid > * { grid-column: 1 / -1; min-width: 0; }
.rule-grid > .sticker--pair { grid-column: auto; }
/* half-width tile (two new rules side by side on a phone, C2-System) */
@media (max-width: 699px) {
.sticker--pair { padding: 6px 14px 12px 8px; gap: 4px; }
.sticker--pair[data-state='off'] { padding: 7px 15px 13px 9px; }
.sticker--pair .sticker__top { flex-direction: column-reverse; align-items: stretch; gap: 0; }
.sticker--pair .switch { align-self: flex-end; }
.sticker--pair .sticker__kw { font-size: 32px; }
.sticker--pair .sticker__line { font-size: 13px; line-height: 1.35; align-items: flex-start; }
.sticker--pair .sticker__tag { right: 14px; }
}
/* compact row (DESIGN-C §5.1 "Compact") */
.rule-row {
position: relative; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 4px;
background: var(--surface); border: 2px solid transparent; border-radius: var(--r-l); box-shadow: var(--e1);
}
.rule-row__kw {
flex: none; height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-s);
background: var(--rc-fill); border: 1.5px solid transparent;
font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1; color: var(--ink);
max-width: 45%;
}
.rule-row__kw .stretch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-row__kw .stretch::after { inset: -2px; border-radius: var(--r-l); }
.rule-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rule-row__meta {
align-items: center; gap: 5px; min-width: 0; font-size: 13px; color: var(--muted);
white-space: nowrap; overflow: hidden;
}
.rule-row__meta span { overflow: hidden; text-overflow: ellipsis; }
.rule-row__sub { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-row__nums { display: inline-flex; gap: 10px; font-variant-numeric: tabular-nums; }
.rule-row[data-state='off'] { border: 2px dashed var(--border-strong); box-shadow: none; }
.rule-row[data-state='off'] .rule-row__kw { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--off-ink); }
.rule-row[data-state='off'] .rule-row__sub { color: var(--muted); }
.rule-row[data-state='on'] .rule-row__meta:has(.icon) { color: var(--ink-2); }
.compact-list { display: flex; flex-direction: column; gap: 8px; }
.rule-search { position: relative; display: flex; flex-direction: column; gap: 6px; }
.rule-search .input { padding-right: 44px; }
.rule-search__icon { position: absolute; top: 19px; right: 16px; color: var(--muted); pointer-events: none; }
/* "כבויים (N)" */
.off-group { display: flex; flex-direction: column; padding-top: 4px; }
.off-group__toggle {
height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 14px;
border: 2px dashed var(--border-strong); border-radius: var(--r-l); color: var(--ink-2); cursor: pointer; list-style: none;
transition: border-color 150ms ease-out;
}
.off-group__toggle::-webkit-details-marker { display: none; }
.off-group__toggle::marker { content: ''; }
.off-group__toggle:hover { border-color: var(--faint); }
.off-group__label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.off-group__count { font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.off-group__names { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.off-group__chev { transition: transform 220ms ease-out; }
.off-group[open] .off-group__chev { transform: rotate(180deg); }
.off-group__list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.off-group[open] .off-group__list { animation: expand 220ms ease-out; }
@keyframes expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ---------------------------------------------------------------------------------------------- home */
.home-head .page-head__title { flex-direction: column; align-items: flex-start; gap: 8px; }
.home-head__paused { height: 32px; margin-top: 6px; padding: 0 12px 0 11px; gap: 6px; font-size: 13px; }
body:not([data-paused]) [data-show='paused'] { display: none; }
body[data-paused] [data-show='running'] { display: none; }
.home-grid { display: flex; flex-direction: column; gap: 18px; }
.home-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.home-banners { display: contents; } /* its banners are direct flex items of .home-main: hidden ones leave no gap */
.offers { display: flex; flex-direction: column; gap: 12px; }
.offers:empty { display: none; }
.home-main > .week { margin-top: -4px; }
body[data-paused] .home-main > .week, body[data-blocked] .home-main > .week { display: none; }
.rules { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-note { font-size: 13px; color: var(--muted); }
.home-grid > .now-panel { display: none; }
/* stat trio (DESIGN-C §5.2) */
.week {
display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px;
background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e1);
}
.week__title { flex: none; font-size: 18px; font-weight: 600; line-height: 1.2; }
.week__steps { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.week__step { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 6px; }
.week__num { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.week__label { font-size: 12.5px; color: var(--muted); }
.week__step--hot { padding: 4px 12px; border-radius: 16px; background: var(--marker); transform: rotate(-3deg); }
.week__step--hot .week__label { font-weight: 500; color: var(--ink-2); }
.week__chev { display: flex; color: var(--faint); }
/* ---------------------------------------------------------------------------------------------- banners */
.banner {
display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: start;
padding: 14px 16px 14px 14px; border-radius: var(--r-xl);
}
.banner__icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.banner__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 1px; }
.banner__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.banner__text { font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }
.banner__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.banner__body .banner__actions { margin-top: 8px; }
.banner--suggestion { background: var(--rc-fill); border: 3px solid var(--surface); box-shadow: 0 16px 26px -18px var(--rc-shadow); color: var(--ink); }
.banner--suggestion .banner__icon { background: var(--ink); color: var(--rc-fill); }
.banner--suggestion .banner__title { font-size: inherit; }
.banner--problem { background: var(--danger-fill); border: 2px solid var(--danger-border); color: var(--ink); padding-bottom: 8px; }
.banner--problem .banner__icon { background: var(--surface); color: var(--danger-text); }
.banner--problem .banner__title { color: var(--danger-text); }
.banner--warning { background: var(--warning-fill); color: var(--warning-text); padding-bottom: 8px; }
.banner--warning .banner__icon { background: var(--surface); color: var(--warning-text); }
.banner--warning .link-quiet { color: var(--warning-text); }
/* paused (C2-Paused on phones; one row on desktop, D2-Home) */
.banner--paused {
grid-template-areas: 'icon text' 'queue queue' 'actions actions';
padding: 16px; row-gap: 14px; background: var(--ink); color: var(--on-ink); box-shadow: var(--e3);
}
.banner--paused .banner__icon { grid-area: icon; background: rgba(255, 217, 90, 0.16); color: var(--marker); }
.banner--paused .banner__text { grid-area: text; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; color: var(--on-ink-muted); }
.banner--paused .banner__title { color: var(--on-ink); }
.banner--paused .banner__sep { display: none; }
.banner--paused .banner__actions { grid-area: actions; }
.queue-box {
grid-area: queue; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px;
border-radius: 16px; background: rgba(253, 252, 255, 0.08);
}
.faces { flex: none; display: flex; }
.faces > .avatar { border: 2px solid var(--ink); }
.faces > .avatar + .avatar { margin-right: -9px; }
.queue-box__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.queue-box__n { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--on-ink); }
.queue-box__hint { font-size: 13px; line-height: 1.35; color: var(--on-ink-muted); }
/* ---------------------------------------------------------------------------------------------- avatars, activity rows */
.avatar {
flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--rc-tint); box-shadow: inset 0 0 0 2px var(--rc-fill); color: var(--rc-ink);
font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1;
}
.avatar--none { background: var(--sunk); box-shadow: inset 0 0 0 2px var(--border); color: var(--ink-2); }
.avatar--tal { background: var(--primary); box-shadow: none; color: var(--ink); }
.avatar--sm { width: 36px; height: 36px; font-size: 17px; }
.avatar--xs { width: 32px; height: 32px; font-size: 15px; }
.avatar--xxs { width: 28px; height: 28px; font-size: 14px; }
.kw-mark {
background: linear-gradient(180deg, transparent 58%, var(--rc-mark) 58%); color: inherit; padding: 0 1px; border-radius: 2px;
}
.kw-mark:not([data-color]) { --rc-mark: rgba(255, 217, 90, 0.7); }
.act-list { display: flex; flex-direction: column; }
.act-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.act-row + .act-row { border-top: 1px solid var(--row-sep); }
.act-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.act-row__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.act-row__text {
padding-top: 2px; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink); text-wrap: pretty;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.act-row__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.act-row__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.act-row__who-text { min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-row__time { flex: none; font-size: 13px; color: var(--muted); }
/* ---------------------------------------------------------------------------------------------- panels, cards */
.panel, .card { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e1); }
.card { gap: 16px; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.panel__title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.panel__note { font-size: 13px; color: var(--muted); }
.panel__empty { padding: 16px 0; font-size: 14px; color: var(--muted); }
.panel > .btn--block { margin-top: 8px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success-icon); box-shadow: 0 0 0 3px rgba(132, 226, 180, 0.6); }
.card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card__actions form { margin: 0; }
.kv-list { display: flex; flex-direction: column; }
.kv { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.kv:last-child { border-bottom: 0; }
.kv__k { font-size: 13px; color: var(--muted); }
.kv__v { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
/* ---------------------------------------------------------------------------------------------- DM preview, test panel */
.dm { display: flex; align-items: flex-end; gap: 8px; }
.dm__bubble {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 10px 10px;
border-radius: 22px 22px 6px 22px; background: var(--surface); color: var(--ink);
}
.dm__text { font-size: 15px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-line; }
.dm__button {
display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: var(--r-pill);
background: var(--rc-fill); color: var(--ink); font-size: 15px; font-weight: 600;
}
.dm__public { display: flex; align-items: center; gap: 6px; padding-right: 44px; font-size: 13px; line-height: 1.35; color: var(--muted); text-wrap: pretty; }
.test-panel .dm__public { color: var(--on-ink-muted); }
.test-panel {
display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-xl);
background: var(--ink); color: var(--on-ink); box-shadow: var(--e3);
}
.test-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.test-panel__head h2 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--on-ink); }
.test-panel__note { font-size: 12.5px; color: var(--on-ink-muted); }
.test-panel__label { font-size: 13px; font-weight: 500; color: var(--on-ink-muted); }
.test-panel__row { display: flex; align-items: center; gap: 8px; }
.test-panel__input {
flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
background: var(--surface); color: var(--ink); font-size: 16px;
}
.test-panel__input:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
.test-panel__status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.test-result {
display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px; border-radius: var(--r-pill);
font-size: 13.5px; font-weight: 500; background: var(--sunk); color: var(--ink-2);
}
.test-result--match { background: var(--success); color: var(--ink); }
.test-result strong { font-weight: 600; }
.test-panel__divider { height: 1px; background: rgba(253, 252, 255, 0.12); }
.test-panel__preview { display: flex; flex-direction: column; gap: 10px; transition: opacity 180ms ease-out; }
.test-panel__preview[data-dim] { opacity: 0.45; }
/* ---------------------------------------------------------------------------------------------- toast, dialog */
.toasts {
position: fixed; z-index: 40; right: 14px; left: 14px; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
max-width: 732px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none;
}
.no-bar .toasts { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.no-bar:has(.floating-action) .toasts { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.toast {
pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 16px 6px 8px;
border-radius: var(--r-l); background: var(--ink); color: var(--on-ink); box-shadow: var(--e3);
animation: toast-in 220ms var(--ease-out);
}
.toast--out { animation: toast-out 150ms ease-in forwards; }
.toast__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.toast--error .toast__icon { background: var(--danger-fill); color: var(--danger-text); }
.toast__text { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
.toast__action {
flex: none; height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--marker);
font-size: 14.5px; font-weight: 500;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.sheet {
width: min(420px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: var(--r-xl);
background: var(--surface); color: var(--ink); box-shadow: var(--e3);
}
.sheet::backdrop { background: rgba(30, 22, 54, 0.45); }
.sheet[open] { animation: sheet-in 220ms var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.sheet__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.sheet__text { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sheet__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
/* ---------------------------------------------------------------------------------------------- empty state (C2-Empty) */
.empty-head .page-head__title { flex-direction: column; align-items: flex-start; gap: 10px; }
.empty-head .title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.title__hi { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: 0; color: var(--ink-2); }
body[data-empty] .stage { gap: 20px; padding-top: 20px; }
.empty { display: flex; flex-direction: column; gap: 20px; }
.collage { position: relative; flex: none; height: 244px; width: 100%; max-width: 358px; margin: 0 auto; }
.collage__sticker {
position: absolute; top: 30px; left: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 12px 18px 12px 16px; background: var(--rc-fill); border: 3px solid var(--surface); border-radius: var(--r-xl);
box-shadow: 0 16px 26px -18px var(--rc-shadow); transform: rotate(8deg);
}
.collage__kw { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.02; letter-spacing: -0.01em; }
.collage__url { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--rc-ink); }
.collage__ghost {
position: absolute; top: 80px; right: 14px; width: 236px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
padding: 14px 18px; background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--r-xl);
transform: rotate(-3deg); box-shadow: var(--e1);
}
.collage__ghost-kw { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.02; letter-spacing: -0.01em; color: var(--off-ink); }
.collage__ghost-url { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.collage__comment {
position: absolute; top: 14px; right: 30px; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 6px 0 14px;
background: var(--surface); border-radius: 19px 19px 6px 19px; box-shadow: 0 12px 24px -14px rgba(46, 22, 110, 0.5);
transform: rotate(2deg); font-size: 14px; font-weight: 500;
}
.collage__reply {
position: absolute; bottom: 8px; left: 30px; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px;
background: var(--surface); border-radius: 17px 17px 17px 6px; box-shadow: 0 12px 24px -14px rgba(46, 22, 110, 0.5);
transform: rotate(-2deg); font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.how { display: flex; flex-direction: column; gap: 10px; }
.steps { padding: 6px 16px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e1); }
.steps li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.steps li:last-child { border-bottom: 0; }
.steps__n {
flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--marker);
display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.steps__text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.kw-inline { display: inline-block; padding: 0 6px; border-radius: var(--r-xs); background: var(--rc-tint); color: var(--rc-ink); font-weight: 600; }
/* ---------------------------------------------------------------------------------------------- login (C2-Login / D2-Login) */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column-reverse; }
.login__art { position: relative; flex: 1; min-height: 360px; overflow: hidden; }
.login__dots {
position: absolute; inset: 0;
background-image: radial-gradient(var(--border) 1.3px, transparent 1.6px); background-size: 20px 20px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 96%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 96%);
}
.login-collage { position: absolute; top: 50%; left: 50%; width: 390px; height: 340px; margin: -166px 0 0 -195px; }
.lc {
position: absolute; display: flex; align-items: center; background: var(--rc-fill); border: 3px solid var(--surface);
box-shadow: 0 16px 26px -18px var(--rc-shadow); color: var(--ink);
font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em;
}
.lc--webinar { top: 14px; left: 36px; padding: 8px 16px; border-radius: 20px; transform: rotate(9deg); font-size: 26px; line-height: 1.05; letter-spacing: 0; }
.lc--guide { top: 44px; right: 26px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 22px 14px 18px; border-radius: var(--r-xl); transform: rotate(-6deg); }
.lc__kw { font-size: 54px; letter-spacing: -0.015em; }
.lc__url { display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0; color: var(--rc-ink); }
.lc--recipe { top: 162px; left: 44px; padding: 10px 20px; border-radius: 24px; transform: rotate(5deg); font-size: 40px; }
.lc--workshop { top: 262px; left: 150px; padding: 8px 18px; border-radius: 22px; transform: rotate(-3deg); font-size: 34px; }
.lc-reply {
position: absolute; top: 214px; right: 22px; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px;
background: var(--surface); border-radius: 17px 17px 17px 6px; box-shadow: var(--e1); transform: rotate(-2deg);
font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.login__form-col { flex: none; padding: 0 24px calc(36px + env(safe-area-inset-bottom, 0px)); }
.login__inner { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 400px; margin: 0 auto; }
.login__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.login__title {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
font-family: var(--font-display); font-weight: 600; font-size: 42px; line-height: 1.05; letter-spacing: -0.015em;
}
.login__chip {
display: inline-flex; align-items: center; padding: 0 14px 2px; background: var(--ink); color: var(--on-ink);
border: 3px solid var(--surface); border-radius: var(--r-m); transform: rotate(-4deg); box-shadow: 0 12px 20px -12px rgba(30, 22, 54, 0.7);
}
.login__tagline { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.login__form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.pw-field { position: relative; display: flex; align-items: center; }
.pw-field .input { padding-left: 56px; }
.pw-toggle {
position: absolute; left: 6px; top: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-s);
background: transparent; color: var(--ink-2); display: flex; align-items: center; justify-content: center;
}
.pw-toggle:hover { background: var(--sunk); }
.pw-toggle__hide { display: none; }
.pw-toggle[aria-pressed='true'] .pw-toggle__show { display: none; }
.pw-toggle[aria-pressed='true'] .pw-toggle__hide { display: block; }
.login__actions { display: flex; flex-direction: column; gap: 14px; }
.login__note { display: flex; justify-content: center; font-size: 13px; line-height: 1.35; color: var(--muted); }
.login__note > span { display: flex; align-items: center; gap: 6px; }
.login__note--desk { display: none !important; }
/* ---------------------------------------------------------------------------------------------- the one delight (DESIGN-C §4) */
.pop { animation: pop 560ms var(--ease-out) 80ms both; }
@keyframes pop {
0% { opacity: 0; transform: scale(0.92) rotate(-4deg); }
60% { opacity: 1; transform: scale(1.03) rotate(-1.5deg); }
100% { opacity: 1; transform: scale(1) rotate(-2deg); }
}
.rise { animation: rise 420ms var(--ease-out) 320ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti > i {
position: absolute; display: block; width: 8px; height: 18px; border-radius: 3px; background: var(--rc-fill);
animation: burst 760ms var(--ease-out) var(--delay, 250ms) both;
}
@keyframes burst {
0% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(0.3); }
60% { opacity: 1; }
100% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
}
/* ---------------------------------------------------------------------------------------------- tablet (phone shell, wider) */
@media (min-width: 700px) {
.stage { padding-top: 24px; }
.rule-grid { gap: 20px 16px; }
.rule-grid > *, .rule-grid > .sticker--pair { grid-column: auto; }
.compact-list, .off-group__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
/* a new tile is one grid cell here: its hourglass line sits on the bottom divider like its neighbours' stats */
.sticker--new > [data-line] { margin-top: auto; }
.sticker--new > .sticker__line {
min-height: 40px; padding-top: 10px; border-top: 1.5px solid var(--divider-on-fill); align-items: center;
}
.sticker--new[data-state='off'] > .sticker__line { border-top-color: var(--hairline); }
.sticker--new > .sticker__waiting { margin-top: auto; }
/* the anchor bar spans the 760 column: tabs read icon + label side by side, as in the desktop sidebar */
.tab { flex-direction: row; gap: 8px; font-size: 14.5px; }
}
/* ---------------------------------------------------------------------------------------------- desktop shell (DESKTOP-C) */
@media (min-width: 1024px) {
:root { --gutter: 32px; }
.only-desk { display: revert !important; }
.only-phone { display: none !important; }
.has-shell .stage { max-width: none; margin: 0; margin-right: calc(var(--sidebar-w) + 16px); width: auto; padding: 32px; gap: 28px; }
.has-shell.no-bar .stage { padding-bottom: 32px; }
.has-bar .page-head__primary { display: inline-flex; }
.bar-fade, .anchor-bar, .floating-action { display: none; }
html:has(> body.has-bar), html:has(> body > .floating-action), html:has(> body[data-screen='texts'].has-bar) { scroll-padding-bottom: 0; }
.sidebar {
position: fixed; z-index: 30; top: 16px; right: 16px; bottom: 16px; width: var(--sidebar-w);
display: flex; flex-direction: column; gap: 28px; padding: 16px; border-radius: var(--r-2xl);
background: var(--ink); color: var(--on-ink); box-shadow: var(--e3); overflow: hidden;
}
.wordmark {
padding: 14px 10px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.05; letter-spacing: -0.01em; color: var(--on-ink);
}
.wordmark__chip {
display: inline-flex; align-items: center; padding: 0 10px 2px; background: var(--surface); color: var(--ink);
border-radius: var(--r-s); transform: rotate(-4deg); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.6);
}
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav__item {
height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: var(--r-m);
color: var(--on-ink-muted); text-decoration: none; font-size: 15px; font-weight: 500;
transition: background-color 150ms ease-out, color 150ms ease-out;
}
.side-nav__item:hover { color: var(--on-ink); background: rgba(253, 252, 255, 0.07); }
.side-nav__item[aria-current='page'] { color: var(--marker); background: rgba(255, 217, 90, 0.14); font-weight: 600; }
.side-nav__item--quiet { height: 44px; gap: 10px; font-size: 14.5px; }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.conn-status {
margin-bottom: 4px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-m);
background: rgba(253, 252, 255, 0.07); font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--on-ink);
}
.conn-status--ok .icon { color: var(--success); }
.conn-status--unknown .icon { color: var(--on-ink-muted); }
.conn-status--problem { background: var(--danger-fill); color: var(--danger-text); }
.conn-status--warning { background: var(--warning-fill); color: var(--warning-text); }
.page-head { flex: none; min-height: 48px; align-items: center; gap: 24px; }
.page-head__title { align-items: baseline; gap: 14px; }
.page-head__title:has(.btn--icon) { align-items: center; }
.title, .t-title { font-size: 36px; }
.btn--icon { box-shadow: var(--e1); }
.grid-a { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 32px; align-items: start; }
.grid-b { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; align-items: start; }
.grid-c { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.grid-d { max-width: 720px; }
.grid-b > :last-child, .grid-c > :last-child { position: sticky; top: 32px; }
.test-panel { gap: 16px; padding: 20px; }
.toasts { right: calc(var(--sidebar-w) + 48px); left: 32px; bottom: 32px; max-width: none; align-items: center; }
.has-shell .toasts { bottom: 32px; }
.toast { padding-right: 16px; }
/* home, D2-Home */
.home-head .page-head__title { flex-direction: row; align-items: center; }
.home-head__conn, .home-head__paused { display: none !important; }
.pause-btn__face { height: 36px; gap: 6px; padding: 0 14px 0 13px; font-size: 14px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.home-main { gap: 32px; }
.home-main > .week { margin-top: 0; }
body[data-paused] .home-main > .week, body[data-blocked] .home-main > .week { display: flex; }
.rules { gap: 16px; }
.home-grid > .now-panel { display: flex; }
.rule-grid { gap: 24px; }
.rule-grid > *, .rule-grid > .sticker--pair { grid-column: auto; }
.week { height: 84px; gap: 28px; padding: 0 28px 0 24px; }
.week__steps { gap: 12px; }
.week__step { flex-direction: row; align-items: baseline; gap: 8px; padding: 0; }
.week__num { font-size: 30px; line-height: 1; }
.week__label { font-size: 14px; }
.week__step--hot { padding: 8px 16px; }
.week__chev .icon { width: 18px; height: 18px; }
.sticker { min-height: 184px; gap: 10px; padding: 16px 22px 16px 16px; }
.sticker[data-state='off'] { padding: 17px 23px 17px 17px; }
.sticker__id { gap: 4px; }
.sticker__line { font-size: 14px; }
.sticker__stats { margin-top: auto; padding-top: 10px; }
.stat { gap: 6px; }
.stat__num { font-size: 24px; }
.stat__label { font-size: 13px; }
.sticker--new, .sticker--pair { margin-top: 0; gap: 10px; padding: 20px 22px 16px 16px; }
.sticker--new[data-state='off'], .sticker--pair[data-state='off'] { padding: 21px 23px 17px 17px; }
.sticker--new .sticker__top, .sticker--pair .sticker__top { flex-direction: row; align-items: flex-start; gap: 12px; }
.sticker--new .sticker__url { font-size: 13px; }
.sticker__tag, .sticker--pair .sticker__tag { right: 18px; }
.sticker--new > [data-line], .sticker--pair > [data-line] { margin: auto 0 0; }
.sticker--new > .sticker__line {
min-height: 40px; padding-top: 10px; border-top: 1.5px solid var(--divider-on-fill); font-size: 14px; line-height: 1.45; align-items: center;
}
.sticker--new[data-state='off'] > .sticker__line { border-top-color: var(--hairline); }
.sticker--new > .sticker__waiting { margin-top: auto; }
.rule-row { gap: 10px; }
.compact-list, .off-group__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.off-group__list { margin-top: 12px; }
.off-group__toggle { padding: 0 18px 0 16px; }
.banner { padding: 14px 16px 14px 14px; }
.banner--paused {
grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: 'icon text actions' '. queue queue';
align-items: center; padding: 16px 16px 16px 20px; column-gap: 14px;
}
.banner--paused .banner__text { display: block; color: var(--on-ink); }
.banner--paused .banner__title { display: inline; font-size: inherit; }
.banner--paused .banner__sep { display: inline; }
.banner--paused .banner__sub { color: var(--on-ink); }
.banner--suggestion:has(> .banner__body > .banner__actions) { align-items: center; }
body[data-empty] .stage { gap: 28px; padding-top: 32px; }
/* 1024 to 1279: one 560 column (collage on top, as on the phone); from 1280 the collage moves beside it */
.empty { max-width: 560px; }
.empty > .collage { margin: 0 auto; }
.empty-head .page-head__title { flex-direction: row; align-items: center; }
.empty-head .title { flex-direction: row; align-items: baseline; gap: 12px; }
.empty-head .title__hi { font-size: 22px; }
.empty-head .pill { display: none; }
/* login, D2-Login: form on the right half, collage on the left half */
.login { flex-direction: row; min-height: 100vh; }
.login__form-col { width: 50%; display: flex; align-items: center; justify-content: center; padding: 32px; }
.login__inner { gap: 36px; }
.login__head { gap: 12px; }
.login__title { font-size: 56px; gap: 12px; }
.login__chip { padding: 0 16px 3px; border-radius: 20px; }
.login__tagline { font-size: 18px; }
.login__art { width: 50%; min-height: 0; }
.login__dots {
-webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 100%);
mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 100%);
}
.login-collage { transform: scale(1.25); margin: -170px 0 0 -195px; }
.login__note--phone { display: none !important; }
.login__note--desk { display: flex !important; }
}
@media (min-width: 1280px) {
.empty {
display: grid; grid-template-columns: minmax(0, 560px) minmax(380px, 1fr); grid-template-areas: 'how art' 'cta art';
column-gap: 48px; row-gap: 24px; align-items: start; max-width: 1112px;
}
.empty > .collage { grid-area: art; align-self: center; transform: scale(1.15); transform-origin: 50% 40%; }
.empty > .how { grid-area: how; }
.empty > .btn--xl { grid-area: cta; }
}
@media (min-width: 1280px) {
.home-grid { grid-template-columns: minmax(0, 1fr) 352px; }
}
/* phones only: the paused stickers turn to their tint (C2-Paused); desktop keeps the colors (D2-Home) */
@media (max-width: 1023px) {
body[data-paused] .sticker[data-state='on'] {
background: var(--rc-tint); box-shadow: inset 0 0 0 2px var(--rc-fill);
}
body[data-paused] .sticker[data-state='on'] .sticker__kw,
body[data-paused] .sticker[data-state='on'] .sticker__url,
body[data-paused] .sticker[data-state='on'] .sticker__line,
body[data-paused] .sticker[data-state='on'] .sticker__stats { color: var(--rc-ink); }
body[data-paused] .sticker[data-state='on'] .sticker__stats { border-top-color: color-mix(in srgb, var(--rc-ink) 16%, transparent); }
}
@media (max-width: 380px) {
.sticker__kw { font-size: 40px; }
.anchor-bar__new { padding: 0 12px 0 14px; }
}
/* ---------------------------------------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
.btn:active, .chip:active, .pause-btn:active .pause-btn__face, .tab:active, .side-nav__item:active, .switch:active .switch__track,
.off-group__toggle:active, .more__toggle:active, .variants__add:active, .link-input__open:active { transform: none; }
.switch__knob { transition: background-color 150ms ease-out; }
.sticker, .sticker[data-state='on']:hover { transition: none; transform: none; }
.pop { animation: fade-in 200ms ease-out both; transform: rotate(-2deg); }
.rise, .off-group[open] .off-group__list, .sheet[open] { animation: fade-in 200ms ease-out both; }
.toast { animation: fade-in 150ms ease-out; }
.toast--out { animation: fade-out 150ms ease-in forwards; }
.confetti { display: none; }
.off-group__chev { transition: none; }
.spinner { animation-duration: 1.6s; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
/* =====================================================================================================
RULE + SAVED SCREENS (/admin/rules/new, /admin/rules/:id, /admin/rules/:id/saved)
C2-Rule / D2-Rule / C2-Saved / D2-Saved. Markup: src/web/pages/rule.js. JS: public/rule.js, public/saved.js.
Reuses the foundation (fields, .input--keyword, .link-input, .test-panel, .dm, .banner--suggestion,
.switch, .btn--*); only what those screens add lives here.
===================================================================================================== */
/* ---- rule: shell (phone: back + H1, the floating save over a fade; desktop: ביטול + save in the header) */
body[data-screen='rule'] .stage { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
body[data-screen='rule'] .floating-action::before {
content: ''; position: fixed; right: 0; left: 0; bottom: 0; height: 110px; z-index: -1; pointer-events: none;
background: linear-gradient(to top, var(--ground) 58%, rgba(244, 241, 250, 0));
}
.rule-head .page-head__actions { display: none; }
.rule-head__cancel { padding: 0 20px; }
.rule-note {
display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-m);
background: var(--ink); color: var(--on-ink); font-size: 14.5px; line-height: 1.4;
}
.rule-note .icon { color: var(--marker); }
.rule-col, .rule-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0; }
.rule-summary {
display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-m);
background: var(--danger-fill); border: 1.5px solid var(--danger-border); color: var(--danger-text); font-size: 14.5px; font-weight: 500;
}
/* keyword: the big sticker input + what it also catches */
.rule-kw { display: flex; flex-direction: column; gap: 6px; }
.rule-kw .input--keyword { min-width: 0; }
.rule-kw__help { display: flex; align-items: flex-start; gap: 8px; text-wrap: pretty; }
.rule-kw__help-icon { display: none; margin-top: 1px; }
/* inline errors and warnings under a field (errors: DESIGN-C §5.5; warnings: warning ink) */
.field__msgs { display: flex; flex-direction: column; gap: 6px; }
.field__msgs:empty { display: none; }
.field__msg { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; text-wrap: pretty; }
.field__msg .icon { margin-top: 1px; }
.field__msg--error { color: var(--danger-text); }
.field__msg--warn { color: var(--warning-text); }
.field__msg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.field__fix { margin-top: 2px; }
.field__fix.btn--secondary { font-size: 14.5px; color: var(--ink); }
.field__fix.btn--quiet { min-height: 44px; height: auto; padding: 0 2px; color: var(--ink); }
.link-input__open[aria-disabled='true'] { color: var(--muted); cursor: not-allowed; }
/* "עוד אפשרויות" (a , so it opens without JavaScript too) */
.more { display: flex; flex-direction: column; }
.more__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 16px;
border: 2px dashed var(--border-strong); border-radius: var(--r-m); color: var(--ink); cursor: pointer; list-style: none;
transition: border-color 150ms ease-out;
}
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle::marker { content: ''; }
.more__toggle:hover { border-color: var(--faint); }
.more__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.more__title { font-size: 15px; font-weight: 500; }
.more__hint { font-size: 13px; color: var(--muted); }
.more__chev { transition: transform 220ms ease-out; }
.more[open] .more__chev { transform: rotate(180deg); }
.more__body { display: flex; flex-direction: column; gap: 16px; padding: 18px 0 2px; }
.more[open] .more__body { animation: expand 220ms ease-out; }
/* public reply on/off: a field-sized row with the switch at the end */
.toggle-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 0 16px 0 2px;
border: 2px solid var(--border); border-radius: var(--r-m); background: var(--surface);
}
.toggle-row__text { min-width: 0; font-size: 15px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.toggle-row[data-state='off'] .toggle-row__text { color: var(--muted); }
.field__help a { color: var(--ink-2); text-underline-offset: 3px; }
/* edit: on/off + this week's numbers */
.rule-state {
display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 2px solid transparent;
border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e1);
}
.rule-state[data-state='off'] { border: 2px dashed var(--border-strong); box-shadow: none; }
.rule-state__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rule-state__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rule-state__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.rule-state__sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.rule-state__stats {
display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: -6px;
padding-top: 4px; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none;
}
.rule-state__stats:hover { color: var(--ink); }
.rule-state__stats:hover .rule-state__chev { color: var(--ink); }
.rule-state__nums { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--ink-2); }
.rule-state__nums b { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); }
.rule-state__period { color: var(--muted); }
.rule-state__chev { color: var(--muted); }
.rule-danger { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.rule-delete { padding: 0 2px; color: var(--danger-text); }
.rule-delete:hover { color: var(--danger-text); }
/* the dark "בדיקת תגובה" panel: the label is for screen readers on phones, visible on desktop */
.rule-test__field { display: flex; flex-direction: column; gap: 8px; }
.rule-test__label {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rule-test__divider { display: none; }
.test-result__gets { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--on-ink-muted); }
.rule-test .dm__public { padding-right: 44px; }
/* ---- saved: the one delight moment (DESIGN-C §4 "Sticker pop on save") */
body[data-screen='saved'] .stage { gap: 24px; padding-top: 32px; }
.saved-head { display: none; }
.saved { display: flex; flex-direction: column; gap: 24px; overflow-x: hidden; overflow-x: clip; }
.saved-art { position: relative; flex: none; width: 100%; max-width: 358px; height: 290px; margin: 0 auto; }
.saved-confetti { position: absolute; inset: 0; pointer-events: none; }
.saved-confetti--desk { display: none; }
.saved-confetti__p { position: absolute; transform: rotate(var(--r, 0deg)); }
.saved-confetti__p > i { display: block; border-radius: 3px; animation: saved-burst 760ms var(--ease-out) var(--d, 250ms) both; }
@keyframes saved-burst {
0% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); }
60% { opacity: 1; }
100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.saved-ghost {
position: absolute; left: 44px; right: 44px; top: 66px; height: 158px;
border: 2px dashed var(--border-strong); border-radius: var(--r-xl); transform: rotate(4deg);
animation: fade-in 400ms ease-out 450ms both;
}
.saved-pop { position: absolute; left: 36px; right: 36px; top: 62px; animation: pop 560ms var(--ease-out) 80ms both; }
.saved-sticker {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 24px 20px 20px;
background: var(--rc-fill); border: 3px solid var(--surface); border-radius: var(--r-xl);
box-shadow: 0 22px 34px -20px var(--rc-shadow); color: var(--ink);
}
.saved-sticker__tag {
position: absolute; top: -14px; right: 20px; display: flex; align-items: center; height: 30px; padding: 0 12px;
border-radius: var(--r-pill); background: var(--ink); border: 2.5px solid var(--surface); color: var(--marker);
font-family: var(--font-display); font-weight: 600; font-size: 15px; transform: rotate(-7deg);
box-shadow: 0 6px 12px -6px rgba(20, 10, 50, 0.6);
}
.saved-sticker__kw {
max-width: 100%; font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.015em;
overflow-wrap: anywhere;
}
.saved-sticker__kw--m { font-size: 46px; line-height: 1.02; }
.saved-sticker__kw--s { font-size: 32px; line-height: 1.1; }
.saved-sticker__url {
display: flex; align-items: center; gap: 6px; max-width: calc(100% - 52px); font-size: 14px; font-weight: 500; color: var(--rc-ink);
}
.saved-sticker__url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-sticker__check {
position: absolute; left: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%;
background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--e-lift);
}
.saved-sticker--off { background: var(--surface); border: 2px dashed var(--border-strong); box-shadow: none; }
.saved-sticker--off .saved-sticker__kw { color: var(--off-ink); }
.saved-sticker--off .saved-sticker__url { color: var(--muted); }
.saved-text {
display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
animation: rise 420ms var(--ease-out) 320ms both;
}
.saved-text .title:focus { outline: none; }
.saved-text__sub { font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.saved-more { display: flex; flex-direction: column; gap: 16px; animation: rise 420ms var(--ease-out) 440ms both; }
/* the backfill offer: the rule-colored suggestion banner, actions under the text (C2-Saved) */
.saved-offer { grid-template-columns: 38px minmax(0, 1fr); row-gap: 14px; column-gap: 12px; padding: 16px; }
.saved-offer .banner__body { gap: 2px; padding-top: 0; }
.saved-offer .saved-offer__title, .saved-offer .banner__text { font-size: 15.5px; line-height: 1.45; }
.saved-offer__title { font-weight: 600; text-wrap: pretty; }
.saved-offer__actions { grid-column: 2; gap: 8px; }
.saved-offer__actions .btn--primary { padding: 0 16px 0 18px; }
.saved-sent {
display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px;
border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e1);
}
.saved-sent__disc {
flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--success); color: var(--ink);
display: flex; align-items: center; justify-content: center;
}
.saved-sent__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.saved-sent__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.saved-sent__sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.saved-sent__link {
flex: none; height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 14px; border-radius: 22px;
background: var(--sunk); color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.saved-sent__link:hover { color: var(--ink); background: #e2dcf0; }
.saved-tip { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.saved-tip strong { font-weight: 600; color: var(--ink); }
.saved-tip__disc {
flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--marker); color: var(--ink);
display: flex; align-items: center; justify-content: center; transform: rotate(-6deg);
}
.saved-back { gap: 8px; }
.saved-back--float { height: 56px; border-radius: 28px; font-size: 16px; box-shadow: var(--e3); }
.saved-disc {
flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: var(--ink);
display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) {
/* rule: D2-Rule, pattern B */
.rule-head .page-head__actions { display: flex; }
.rule-col { gap: 26px; }
.rule-form { gap: 26px; }
.rule-form .field { gap: 8px; }
.rule-kw { display: grid; grid-template-columns: minmax(0, 360px) minmax(160px, 1fr); gap: 20px; align-items: center; }
.rule-kw__help { line-height: 1.45; }
.rule-kw__help-icon { display: block; }
.rule-message { min-height: 120px; padding: 14px 16px; resize: vertical; }
.more__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; padding-top: 16px; }
.more__body > .field { min-width: 0; }
.more__body .field__row { min-height: 25px; }
.rule-test__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.rule-test .test-panel__row { gap: 10px; }
.rule-test__divider { display: block; }
.rule-test .test-panel__preview { gap: 12px; }
.rule-test .dm__bubble { padding: 14px 16px 10px 10px; }
.rule-state { padding: 16px 20px; }
/* the delete row sits under the form; the preview stays sticky in column 2 across both rows */
.rule-layout > .rule-side { grid-column: 2; grid-row: 1 / span 2; }
.rule-layout > .rule-danger { grid-column: 1; grid-row: 2; position: static; margin-top: -8px; }
/* saved: D2-Saved, one centered column */
body[data-screen='saved'] .stage { min-height: 100vh; min-height: 100dvh; padding-top: 32px; gap: 28px; }
.saved-head { display: flex; }
.saved-head__note { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.saved-back--head { height: 48px; border-radius: 24px; padding: 0 18px 0 22px; font-size: 16px; box-shadow: var(--e3); }
.saved { flex: 1; align-items: center; justify-content: center; padding-bottom: 28px; }
.saved-art { width: 720px; max-width: 100%; height: 300px; }
.saved-confetti--phone { display: none; }
.saved-confetti--desk { display: block; }
.saved-ghost { left: 186px; right: auto; top: 68px; width: 348px; height: 150px; }
.saved-pop { left: 170px; right: auto; top: 58px; width: 380px; }
.saved-sticker { gap: 8px; padding: 28px 28px 22px 24px; }
.saved-sticker__tag { right: 22px; }
.saved-sticker__check { left: 20px; bottom: 20px; width: 44px; height: 44px; }
.saved-sticker__check .icon { width: 24px; height: 24px; }
.saved-text { max-width: 560px; }
.saved-text .title { font-size: 36px; }
.saved-more { width: 560px; max-width: 100%; gap: 20px; }
.saved-offer { padding: 16px 16px 16px 20px; }
.saved-sent__link { padding: 0 14px 0 12px; }
.saved-tip__text { padding-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
/* keep the tilt (a resting pose, not motion) and the color; drop every movement */
.saved-pop { animation: fade-in 200ms ease-out both; transform: rotate(-2deg); }
.saved-confetti__p > i { animation: fade-in 300ms ease-out both; }
.saved-ghost, .saved-text, .saved-more, .more[open] .more__body { animation: fade-in 200ms ease-out both; }
.more__chev { transition: none; }
}
/* =====================================================================================================
ACTIVITY + TEXTS + CONNECT SCREENS (/admin/activity, /admin/texts, /admin/connect)
C2/D2-Activity, C2/D2-Texts, C2/D2-Connect. Markup: src/web/pages/activity.js, texts.js, connect.js.
JS: public/activity.js, public/texts.js, public/connect.js (+ the shared view models activity-view.js,
connect-view.js). Reuses the foundation (.chip, .pill, .rule-chip, .avatar, .banner--suggestion, .panel,
.dm, .test-panel, .field, .btn--*); only what these screens add lives here.
Activity .act-head ; .offer (a .banner--suggestion with its actions in the last column) ; form.feed-chips ;
section.feed[.feed--filtered][data-color] > .feed__note + .feed__cols + ul.feed__list >
li.feed__item > button.feed-row[aria-pressed] (> .avatar .feed-row__text .feed-row__who
.feed-row__rule .feed-row__pill .feed-row__time) ; .feed__empty ; aside.act-detail (>= 1280) >
.act-detail__body (who, quote, .dm-thread, .act-note--quiet|--failed, dl.act-facts) ;
dialog.act-sheet (phones and 1024-1279: the same detail in a sheet)
Texts .texts-head (+ __gear on phones) ; .texts-intro ; .save-slot--head|--float > .saved-pill ;
.texts-card > .texts-card__head + .flow > .flow__step (> .flow__rail + .flow__body) ;
ul.variants > li.variant(.variant--pv) ; .variants__foot ; section.texts-preview (>= 1024)
Connect .connect-head ; ul.conn-list > li.conn-row (> __icon __label __value __status) ;
.placeholder-chip ; .conn-dot--live|--idle ; .connect__actions ; .review--warning|--success|--neutral
===================================================================================================== */
/* ---- activity: header, offers, chips */
body[data-screen='activity'] .stage { gap: 14px; }
.act-head .page-head__title { flex: 1; justify-content: space-between; align-items: baseline; padding-top: 4px; }
.act-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.act-main > .offers:not(:has(> :not([hidden]))) { display: none; }
.offer .banner__actions { grid-column: 2; }
.offer .banner__text { line-height: 1.4; }
.feed-chips {
display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
overflow-x: auto; scrollbar-width: none;
}
.feed-chips::-webkit-scrollbar { display: none; }
.feed-chips .chip__count { display: none; }
/* ---- activity: the feed (C2: one list; D2: a table-like list whose rows are buttons) */
.feed {
display: flex; flex-direction: column; padding: 0 12px; background: var(--surface);
border-radius: var(--r-xl); box-shadow: var(--e1); overflow: hidden;
}
.feed--filtered { background: var(--rc-tint); }
.feed[aria-busy='true'] .feed__list { opacity: 0.55; transition: opacity 150ms ease-out; }
.feed__note { padding: 14px 0 10px; font-size: 13px; font-weight: 500; color: var(--rc-ink); }
.feed__cols { display: none; }
.feed__list { display: flex; flex-direction: column; }
.feed__item + .feed__item, .feed__note:not([hidden]) + .feed__cols + .feed__list > .feed__item:first-child { border-top: 1px solid var(--row-sep); }
.feed-row {
/* 4 tracks so a long pill ("נכשל: ...") never squeezes the username row below it (C2-Activity) */
width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto;
grid-template-areas: 'av text pill pill' 'av who who time'; column-gap: 10px; row-gap: 3px; align-items: center;
padding: 11px 0; border: 0; border-radius: 14px; background: transparent; color: var(--ink);
font: inherit; text-align: right; cursor: pointer;
}
.feed-row > .avatar { grid-area: av; }
.feed-row__text {
grid-area: text; align-self: start; min-width: 0; padding-top: 2px;
font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-row__pill { grid-area: pill; align-self: start; justify-self: end; display: flex; }
.feed-row__who { grid-area: who; display: flex; align-items: center; gap: 6px; min-width: 0; }
.feed-row__who-text { min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row__time { grid-area: time; justify-self: end; font-size: 13px; color: var(--muted); white-space: nowrap; }
.feed-row__rule { display: none; }
.feed-row:focus-visible { outline-offset: 0; }
.feed__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px 30px; text-align: center; }
.feed__empty-icon {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--surface); box-shadow: inset 0 0 0 2px var(--rc-fill); color: var(--rc-ink);
}
.feed__empty-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.feed__empty-text { font-size: 13px; line-height: 1.45; color: var(--rc-ink); text-wrap: pretty; }
.feed__empty:not([data-color]) .feed__empty-icon { box-shadow: inset 0 0 0 2px var(--border); color: var(--ink-2); }
.feed__empty:not([data-color]) .feed__empty-text { color: var(--muted); }
/* ---- activity: the detail (desktop pane / sheet) */
.act-detail { display: none; }
.act-detail__body { display: flex; flex-direction: column; gap: 16px; }
.act-detail__who { display: flex; align-items: center; gap: 12px; }
.act-detail__id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.act-detail__name { max-width: 100%; font-size: 15px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-detail__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.act-detail__quote {
margin: 0; padding: 12px 16px; border-radius: var(--r-m); background: var(--ground);
font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere;
}
.act-detail__sent { display: flex; flex-direction: column; gap: 10px; }
.act-detail__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.act-detail__h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.act-detail__none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px 24px; text-align: center; }
.act-detail__none-icon {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--sunk); color: var(--ink-2);
}
.act-detail__none p { font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.dm-thread { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-l); background: var(--ink); box-shadow: var(--e3); }
.dm__spacer { flex: none; width: 36px; }
.dm__bubble--link { gap: 4px; padding: 10px 14px; }
.dm__link { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--rc-ink); }
.dm__link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-thread__public { display: flex; align-items: flex-start; gap: 6px; padding-right: 44px; font-size: 13px; line-height: 1.4; color: var(--on-ink-muted); }
.dm-thread__public .icon { margin-top: 1px; }
.act-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-l); }
.act-note > .icon { margin-top: 2px; }
.act-note p { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.act-note strong { font-weight: 600; }
.act-note--quiet { border: 1.5px dashed var(--border-strong); background: var(--ground); color: var(--ink-2); }
.act-note--quiet strong { color: var(--ink); }
.act-note--failed { border: 1.5px solid var(--danger-border); background: var(--danger-fill); color: var(--ink); }
.act-note--failed > .icon, .act-note--failed strong { color: var(--danger-text); }
.act-facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.act-facts__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; border-bottom: 1px solid var(--hairline); }
.act-facts dt { font-size: 13px; color: var(--muted); }
.act-facts dd { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--ink); }
.act-facts__ok { display: flex; color: var(--success-icon); }
.act-sheet { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.act-sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.act-sheet__head .sheet__title { flex: 1; }
.act-sheet__close { box-shadow: none; }
/* ---- texts */
body[data-screen='texts'] .stage { gap: 16px; padding-bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }
body[data-screen='texts'] .toasts { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
.texts-head { align-items: center; }
.texts-head .page-head__sub, .texts-head .save-slot--head { display: none; }
.texts-intro { margin-top: -12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.texts-summary {
display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-m);
background: var(--danger-fill); border: 1.5px solid var(--danger-border); color: var(--danger-text); font-size: 14.5px; font-weight: 500;
}
.texts-grid { margin: 0; }
.texts-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.texts-card { gap: 14px; padding: 16px 16px 18px; }
.texts-card__head { display: flex; align-items: center; gap: 10px; }
.texts-card__head--pub { flex-wrap: wrap; row-gap: 4px; }
.texts-card__disc {
flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--sunk); color: var(--ink-2);
}
.texts-card__disc--tal { background: var(--primary); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.texts-card__note { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.flow { display: flex; flex-direction: column; }
.flow__step { display: flex; align-items: stretch; gap: 12px; }
.flow__rail { flex: none; width: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flow__icon {
flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--sunk); color: var(--ink-2);
}
.flow__line { flex: 1; width: 0; border-inline-start: 2px dashed var(--sent-border); }
.flow__body { flex: 1; min-width: 0; padding: 5px 0 16px; }
.flow__step:last-child .flow__body { padding-bottom: 0; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.texts-grid .textarea { padding: 10px 14px; }
.texts-grid .input { padding: 0 14px; }
.texts-input--strong { font-weight: 500; }
.variants { display: flex; flex-direction: column; gap: 8px; }
.variant { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 6px; row-gap: 6px; align-items: start; }
.variant__num { display: none; }
.texts-grid .variant__input { min-height: 52px; height: auto; padding: 12px 14px; font-size: 15px; line-height: 1.45; overflow: hidden; }
.variant__remove {
width: 44px; height: 52px; padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--ink-2);
display: flex; align-items: center; justify-content: center;
}
.variant__remove:hover { background: var(--sunk); }
.variant__remove:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
.variant__error { grid-column: 1; }
.variants__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.variants__add { border: 2px dashed var(--border-strong); padding: 0 14px 0 18px; }
.variants__add:hover { border-color: var(--ink-2); }
.variants__add:disabled { background: transparent; opacity: 0.5; }
.variants__count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.save-slot { display: flex; align-items: center; } /* one of the button / the saved pill shows at a time */
.save-slot__status:empty { display: none; }
.saved-pill {
display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 9px; border-radius: 24px;
background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: var(--e3);
}
.saved-pill__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.save-slot--float { position: fixed; z-index: 30; left: max(14px, calc((100vw - 732px) / 2)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* the bar's left edge */
.save-slot__float { border: 3px solid var(--surface); padding: 0 18px 0 22px; box-shadow: var(--e-primary); }
.save-slot--float .saved-pill { height: 52px; padding: 0 18px 0 10px; border-radius: 26px; }
.texts-preview { display: none; }
/* ---- connect (Ori's screen) */
body[data-screen='connect'] .stage { gap: 20px; }
.connect-head .page-head__title { gap: 10px; }
.connect-head .page-head__sub { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.connect-head .page-head__sub .icon { color: var(--muted); }
.connect-head .page-head__primary { display: none; }
.connect { display: flex; flex-direction: column; gap: 20px; }
.connect__sec { display: flex; flex-direction: column; gap: 10px; }
.conn-list { display: flex; flex-direction: column; padding: 4px 16px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e1); }
.conn-row {
display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: 'ic k st' 'ic v st';
column-gap: 12px; row-gap: 3px; align-items: center; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.conn-row:last-child { border-bottom: 0; }
.conn-row__icon { grid-area: ic; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sunk); color: var(--ink-2); }
.conn-row__label { grid-area: k; align-self: end; font-size: 13px; line-height: 1.35; color: var(--muted); }
.conn-row__value { grid-area: v; align-self: start; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.conn-row__value--muted { font-weight: 400; color: var(--muted); }
.conn-row__status { grid-area: st; display: flex; justify-content: center; min-width: 44px; }
.placeholder-chip {
display: inline-block; max-width: 100%; padding: 0 8px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-xs);
background: var(--ground); color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 24px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.conn-dot { width: 10px; height: 10px; border-radius: 50%; }
.conn-dot--live { background: var(--success-icon); box-shadow: 0 0 0 5px rgba(132, 226, 180, 0.55); }
.conn-dot--idle { background: var(--faint); box-shadow: 0 0 0 5px rgba(140, 132, 168, 0.2); }
.connect__actions { display: flex; flex-direction: column; gap: 10px; }
.connect__actions .btn, .connect__check-form { width: 100%; }
.connect__check-form { margin: 0; }
.connect__check[aria-busy='true'] { background: transparent; color: var(--ink); border-color: var(--secondary-border); cursor: progress; }
.connect__result { min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.connect__result .icon, .connect__result--ok .connect__result-icon { color: var(--success-icon); }
.connect__result-icon { display: flex; }
.connect__result--problem .connect__result-icon { color: var(--danger-text); }
.connect__result--unknown .connect__result-icon { color: var(--muted); }
.review { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 16px 14px; border-radius: var(--r-xl); }
.review__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.review__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.review__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.review__text { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.review--warning { background: var(--warning-fill); color: var(--warning-text); }
.review--success { background: rgba(132, 226, 180, 0.35); color: var(--ink); }
.review--success .review__icon { color: var(--success-icon); }
.review--neutral { background: var(--sunk); color: var(--ink-2); }
.review--neutral .review__title { color: var(--ink); }
.connect__note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.connect__logout { margin: 0; align-self: flex-start; }
/* ---- desktop (DESKTOP-C) */
@media (min-width: 1024px) {
body[data-screen='activity'] .stage, body[data-screen='texts'] .stage, body[data-screen='connect'] .stage { gap: 28px; }
body[data-screen='texts'] .stage { padding-bottom: 32px; }
body[data-screen='texts'] .toasts { bottom: 32px; }
/* activity: pattern C */
.act-head .page-head__title { flex: 0 1 auto; justify-content: flex-start; padding-top: 0; }
.act-main { gap: 20px; }
.offer { grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
.offer .banner__actions { grid-column: auto; }
.offer .banner__title { display: block; }
.feed-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
.feed-chips .chip__count { display: inline; }
.feed { padding: 8px; overflow: visible; }
.feed__note { padding: 10px 14px 4px; }
.feed__cols {
display: grid; grid-template-columns: 42px minmax(0, 1fr) 96px 184px; column-gap: 14px; padding: 10px 14px 6px;
font-size: 13px; color: var(--muted);
}
.feed__cols[hidden] { display: none; }
.feed__cols-end { text-align: left; }
.feed__item { padding: 3px 0; }
.feed__item + .feed__item, .feed__note:not([hidden]) + .feed__cols + .feed__list > .feed__item:first-child { border-top-color: var(--row-sep); }
.feed__note:not([hidden]) + .feed__cols + .feed__list > .feed__item:first-child { border-top-color: transparent; }
.feed-row {
grid-template-columns: 42px minmax(0, 1fr) 96px 184px; grid-template-areas: 'av text rule pill' 'av who rule time';
column-gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: 20px;
transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.feed-row__text { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; padding-top: 0; align-self: end; }
.feed-row__who { align-self: start; }
.feed-row__rule { grid-area: rule; display: flex; align-items: center; }
.feed-row__pill { align-self: end; }
.feed-row__time { align-self: start; }
.feed-row:hover { background: rgba(236, 231, 246, 0.55); }
.feed-row[aria-pressed='true'] { background: var(--rc-tint); box-shadow: inset 0 0 0 2px var(--ink); }
.feed-row[aria-pressed='true']:not([data-color]) { background: var(--sunk); }
.feed-row[aria-pressed='true'] .rule-chip { background: var(--surface); }
.feed--filtered .feed-row[aria-pressed='true'] { background: var(--surface); }
.feed--filtered .feed-row .rule-chip { background: var(--surface); }
.feed--filtered .feed-row[aria-pressed='true'] .rule-chip { background: var(--rc-tint); }
.feed__empty { padding: 40px 16px 44px; }
/* texts: pattern B */
.texts-head .page-head__sub, .texts-head .save-slot--head { display: flex; }
.texts-head__gear, .texts-intro, .save-slot--float { display: none !important; }
.texts-main { gap: 24px; }
.texts-card { padding: 20px 20px 22px; }
.texts-card__head--pub { flex-wrap: nowrap; justify-content: flex-start; }
.texts-card__note { flex-basis: auto; margin-right: auto; text-align: left; }
.flow__body { padding-bottom: 18px; }
.variant { grid-template-columns: 30px minmax(0, 1fr) 44px; column-gap: 8px; }
.variant__num {
display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 13px 2px;
border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}
.variant--pv .variant__num { background: var(--rc-fill); color: var(--ink); }
.variant--pv .variant__input:not([aria-invalid='true']) { border-color: var(--rc-fill); }
.variant__error { grid-column: 2; }
.variants__foot { padding-right: 38px; }
.variants__count { padding-left: 52px; }
.texts-preview { display: flex; }
.texts-preview__group { display: flex; flex-direction: column; gap: 10px; }
.texts-preview__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--on-ink-muted); }
.texts-preview__after { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--on-ink-muted); }
.texts-preview__divider { height: 0; border-top: 1.5px dashed rgba(207, 199, 234, 0.35); }
.pub-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px; border-radius: var(--r-l); background: var(--surface); color: var(--ink); }
.pub-card__row { display: flex; align-items: flex-start; gap: 10px; }
.pub-card__row--reply { padding-right: 42px; }
.pub-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pub-card__text p { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.pub-card__who { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.texts-preview__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.texts-preview__count { font-size: 13px; color: var(--on-ink-muted); font-variant-numeric: tabular-nums; }
.texts-preview__next { border: 2px solid rgba(253, 252, 255, 0.3); color: var(--on-ink); padding: 0 14px 0 16px; font-size: 14.5px; }
.texts-preview__next:hover { color: var(--on-ink); border-color: var(--on-ink-muted); }
.texts-preview__next:disabled { background: transparent; color: var(--on-ink-muted); opacity: 0.6; }
/* connect: pattern D */
.connect-head .page-head__title { gap: 14px; align-items: center; }
.connect-head .page-head__sub { flex-basis: auto; gap: 6px; padding-top: 6px; font-size: 13px; color: var(--muted); }
.connect-head .page-head__primary { display: inline-flex; }
.connect { gap: 32px; }
.connect__sec { gap: 14px; }
.conn-list { padding: 4px 24px; }
.conn-row { grid-template-columns: 40px 170px minmax(0, 1fr) auto; grid-template-areas: 'ic k v st'; column-gap: 16px; }
.conn-row__label { align-self: center; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.conn-row__value { align-self: center; }
.connect__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.connect__actions .btn, .connect__check-form { width: auto; }
.connect__check { min-width: 164px; }
.connect__result { justify-content: flex-start; padding-right: 4px; }
.review { gap: 14px; padding: 16px 20px 18px 16px; }
}
/* 1024-1279: the stage is too narrow for list + detail (C) and form + preview (B) side by side */
@media (min-width: 1024px) and (max-width: 1279px) {
.act-grid, .texts-grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
.act-grid > .act-detail { display: none; }
.texts-grid > .texts-preview { position: static; }
/* the rule form keeps its live test beside it, in a narrower column (form 344 at 1024) */
.rule-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.rule-kw { display: flex; flex-direction: column; gap: 6px; }
.rule-kw__help { line-height: normal; }
.rule-kw__help-icon { display: none; }
}
@media (min-width: 1280px) {
.act-grid > .act-detail { display: flex; gap: 16px; position: sticky; top: 32px; }
}
/* 1280 to 1439 (list column ~520): a 360 detail pane, and the "מילה" column gives way (the avatar ring and the
highlighted word still say which rule matched), so the comment and the username are not cut short */
@media (min-width: 1280px) and (max-width: 1439px) {
.act-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.feed__cols, .feed-row { grid-template-columns: 42px minmax(0, 1fr) 184px; }
.feed-row { grid-template-areas: 'av text pill' 'av who time'; }
.feed__cols > :nth-child(3), .feed-row__rule { display: none; }
}