/* landing.css: the home page (index.html) in the dark UI the founder approved on 15 October 2026.
The reference package's home.css (the hero, the front desk stage, the statement, the eight capability cards
and the four feature sections), loaded after tokens.css and brand.css and before menu.css. Its moving parts
are drawn by assets/landing.js on the shared beat engine (assets/motion.js). Every size is a token; the few
colour literals are the package's own. The page frame comes first: what index.html carried in its own
style block before (the header's pointer highlight, the signed-in fold, the skip link). */
/* ---------- The page frame ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--h-bar) + var(--sp-16)); }
body { min-width: 320px; min-height: 100vh; overflow-x: hidden; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
/* Headings and status blocks focused by a script to move a screen reader are not keyboard stops: no ring. */
[tabindex="-1"]:focus { outline: none; }
/* The first stop for keyboard users: the reference's white pill. */
.skip-link {
position: absolute; inset-inline-start: var(--sp-12); top: calc(-1 * var(--sp-64)); z-index: 1000;
padding: var(--sp-8) var(--sp-16); border-radius: var(--r-pill); background: var(--pill); color: var(--pill-ink);
font: var(--type-small); font-weight: 600; text-decoration: none; transition: top 120ms ease;
}
.skip-link:focus { top: var(--sp-12); }
/* The header (assets/menu.css draws it). The menu button and its panel stay hidden until its fold shows them. */
.mobile-nav-toggle, .mobile-nav-panel { display: none; }
/* The pointer highlight under the row's links: pages/index.js places it, this sizes it, menu.css colours it. */
.nav-highlight {
position: absolute; z-index: -1; top: 4px; left: 4px;
width: var(--highlight-w, 0px); height: var(--highlight-h, 0px); opacity: 0; pointer-events: none;
transform: translate3d(var(--highlight-x, 0px), var(--highlight-y, 0px), 0);
transition: width var(--dur-move) var(--spring), height var(--dur-move) var(--spring),
transform var(--dur-move) var(--spring), opacity var(--dur-fade) var(--ease-fade);
}
/* KIT-1: signed in, between the menu fold and a roomy desktop the row cannot hold the links, the usage chip,
"+ New bot" and Account at once. bidi-app.js marks the row; this takes the three out of it and
assets/menu.css shows the menu button and its small panel holding only them. */
@media (min-width: 1041px) and (max-width: 1279px) {
.topnav-inner[data-crowded] .desktop-nav :is([data-bidi-nav], [data-bidi-usage], [data-bidi-newbot]) { display: none; }
}
/* Arabic (the site's second language, off by default): its own face, and no negative tracking, which breaks
the letters' joins. */
html[dir="rtl"] body { font-family: var(--font-arabic), var(--font-body); }
html[dir="rtl"] :is(h1, h2, h3, .h1, .h2, .h3, .say, .btn, .nav-action, .desktop-nav a, .mobile-nav-panel a) { font-family: var(--font-arabic); letter-spacing: 0; }
/* On an Arabic page the chat comes from the other side: the bubbles' tails follow it. The stage's seven tabs
wrap where the Arabic words need more room than the row has. */
html[dir="rtl"] .msg.v { border-bottom-right-radius: var(--r-lg); border-bottom-left-radius: 4px; }
html[dir="rtl"] .msg.a { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: 4px; }
html[dir="rtl"] .stagebox .tabs { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Until assets/landing.js takes them over (it marks as it starts), the parts that enter
on a beat wait unseen, so a page still arriving never shows every state at once. Should the script never
come, they show after three seconds. */
@media (scripting: enabled) {
html:not([data-home-ready]) .home [data-in] { opacity: 0; animation: home-wait 0s 3s forwards; }
}
@keyframes home-wait { to { opacity: 1; } }
/* A phone number in the stage stays whole and reads left to right, in either language (QA-home-11). */
.home .tel { white-space: nowrap; }
/* A suggested reply longer than the tray (an Arabic one, a 320 px phone) wraps instead of being cut at the
stage's edge; on one line it is still the reference's 36 px pill. */
.home .tray { grid-template-columns: minmax(0, 1fr); }
.home .reply { height: auto; min-height: 36px; padding-block: var(--sp-8); white-space: normal; }
/* Words for a screen reader only: who speaks in the hero's chat, the capability grid's heading. */
.home .sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* A forced-colours theme drops backgrounds and shadows: the labels keep an outline, and the pressed one its fill. */
@media (forced-colors: active) {
.feat-tabs button { border: 1px solid ButtonText; }
.feat-tabs .slider { forced-color-adjust: none; background: Highlight; }
.feat-tabs .ink-item { color: HighlightText; }
}
/* ===================================================================== The reference's home.css ===== */
/* Home: a port of Farooq's dark draft. Same layout, copy, colours and motion;
every size snapped to the 4px grid and the site's tokens (SPACING.md section 12).
The stage and the eight card pictures are illustrations: their small fixed heights
(28, 32, 36, 40) stay the same on touch screens because nothing in them is a control. */
.home {
--home-top: 64px; /* header -> h1 XL/L 64 . M 48 . S 32 */
--say-end: 96px; /* statement -> cards XL/L 96 . M 64 . S 48 */
--chat-w: 400px; /* chat column XL 400 . L 360 . M/S full width */
--area-end: 96px; /* card area -> counters XL/L 96 (a 550 stage, the draft's 548 plus its hairlines) . M/S 24 */
--area-h: 264px; /* dashboard card area M/S from the tallest card (landing.js) */
--say-w: 980px; /* statement measure, the draft's (245 x 4): about 45 characters a line */
overflow-x: clip;
}
.home section { padding-block: 0; }
/* ---------- Hero: h1 24 lede 32 buttons 64 stage ---------- */
.home .hero { padding-block: var(--home-top) var(--showcase); }
.home .sub { max-width: var(--measure); margin-top: var(--display-lede); font: var(--type-lede); color: var(--text-2); }
.home .cta { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.home .hero .cta { margin-top: var(--cta); }
/* ---------- The front desk loop ---------- */
.stagebox {
position: relative; display: grid; grid-template-columns: var(--chat-w) minmax(0, 1fr);
border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); overflow: hidden;
}
.chat { position: relative; min-width: 0; padding: var(--in-m) var(--in-m) 0; border-inline-end: 1px solid var(--line); }
/* the captions are read, so they take the grey that reads at 5.9:1 (--text-3 is for large text and icons) */
.cap-line { font: var(--type-caption); color: var(--text-2); }
.thread { display: flex; flex-direction: column; gap: var(--stack); margin-top: var(--split); }
.msg { max-width: 300px; padding: var(--sp-8) var(--sp-12); border-radius: var(--r-lg); font: var(--type-small); }
.msg.v { align-self: flex-end; background: var(--cobalt); color: #fff; border-bottom-right-radius: 4px; }
.msg.a { align-self: flex-start; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 4px; }
.note {
align-self: center; display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 28px; padding: var(--sp-4) var(--sp-12);
border-radius: var(--r-pill); background: rgba(76,195,138,.12); color: var(--ok); font: var(--type-micro); font-weight: 600; text-align: center; text-wrap: balance;
}
.note.team { background: rgba(157,184,255,.12); color: var(--cobalt-2); }
.slot { position: relative; align-self: flex-start; }
/* typing dots: one line of a reply bubble (36 = 20 + 2 x 8) */
.dots {
position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: var(--sp-4); height: 36px; padding: 0 var(--sp-12);
border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
}
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.tray { position: absolute; left: var(--in-m); right: var(--in-m); bottom: var(--in-m); display: grid; gap: var(--sp-8); justify-items: end; }
.reply {
display: inline-flex; align-items: center; max-width: 100%; height: 36px; padding: 0 var(--sp-16); border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: var(--type-caption); white-space: nowrap;
}
.dash { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--in-m); }
.tabs, .wrapseg { position: relative; isolation: isolate; }
.tabs { display: inline-flex; gap: var(--sp-4); max-width: 100%; padding: var(--sp-4); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.tabs span, .wrapseg span {
position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 var(--sp-12); border-radius: var(--r-sm);
color: var(--text-2); font: var(--type-caption); font-weight: 600; white-space: nowrap; transition: color var(--dur-press) var(--ease-fade);
}
.tabs span[data-on], .wrapseg span[data-on] { color: var(--pill-ink); }
/* one highlight per group, moved by clip-path only (landing.js) */
.hl { position: absolute; inset: 0; z-index: -1; background: var(--pill); clip-path: inset(50%); pointer-events: none; }
.area { position: relative; width: 100%; height: var(--area-h); margin-block: var(--block) var(--area-end); }
.shape { position: absolute; inset: 0; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.blk { position: absolute; left: 0; top: 0; padding: var(--in-m); }
.blk h3 { margin-top: var(--row); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
.src { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--split); }
.tag {
display: inline-flex; align-items: center; gap: var(--sp-8); height: 32px; padding: 0 var(--sp-12); border-radius: var(--r-sm);
box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: var(--type-caption); font-weight: 600;
}
.tag svg, .note svg, .vrow svg {
width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
}
.tag.hit { color: var(--text); }
.tag.hit svg { color: var(--ok); }
.b-leads { width: 420px; }
.lfs { margin-top: var(--row); }
.lf { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; height: 40px; border-bottom: 1px solid var(--line); font: var(--type-small); }
.lf b { color: var(--text-3); font-weight: 600; }
.lf span { display: inline-block; justify-self: start; white-space: nowrap; }
.vpad .lf:last-child { border-bottom: 0; }
.b-act { width: 500px; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16); margin-top: var(--split); }
.act-btn {
position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-16); border-radius: var(--r-sm);
background: var(--cobalt); color: #fff; font: var(--type-small); font-weight: 600;
}
.act-btn .swap { position: relative; display: inline-grid; }
.act-btn .swap > * { grid-area: 1 / 1; white-space: nowrap; }
.run-line {
position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); overflow: visible;
fill: none; stroke: #fff; stroke-width: 1.75; stroke-linecap: round; pointer-events: none;
}
.act-note { color: var(--text-2); font: var(--type-small); }
.b-desk { right: 0; }
.desk { display: flex; align-items: flex-start; gap: var(--block); margin-top: var(--split); }
.queue { position: relative; display: grid; gap: var(--sp-4); width: 200px; flex: none; isolation: isolate; }
.queue.wide { width: 100%; }
.queue > span {
position: relative; display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 var(--sp-12);
border-radius: var(--r-sm); color: var(--text-2); font: var(--type-caption); font-weight: 600; transition: color var(--dur-press) var(--ease-fade);
}
.queue > span[data-on] { color: var(--text); }
.queue .hl { background: rgba(157,184,255,.14); }
.num { position: relative; display: inline-grid; color: var(--text-3); font-variant-numeric: tabular-nums; }
.num > * { grid-area: 1 / 1; }
.num .new { color: var(--cobalt-2); }
.ticket { flex: 0 1 440px; min-width: 0; padding: var(--in-s); border-radius: var(--r-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.ticket p { color: var(--text-2); font: var(--type-caption); }
.ticket p + p { margin-top: var(--pair); color: var(--text-3); font: var(--type-micro); }
.who { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--row); font: var(--type-small); font-weight: 600; }
.av {
display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
background: rgba(157,184,255,.16); color: var(--cobalt-2); font: var(--type-micro); font-family: var(--display); font-weight: 700;
}
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stack); width: 100%; }
.stat { display: grid; gap: var(--pair); padding: var(--sp-12) var(--in-s); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); font: var(--type-caption); }
.stat b { color: var(--text); font: var(--type-figure); letter-spacing: var(--track-figure); }
/* the tip of the arrow sits on the point it aims at */
.cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 22px; height: 22px; translate: -4px -3px; pointer-events: none; opacity: 0; }
/* ---------- Statement and the eight capabilities ---------- */
.say { max-width: var(--say-w); padding-block: var(--sec) var(--say-end); font: var(--type-statement); letter-spacing: var(--track-statement); color: var(--text-3); }
.say b { color: var(--text); font-weight: 500; }
/* hairline grid: 1px gaps over the line colour */
.caps-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--line); overflow: hidden;
}
.cell { padding: var(--in-m) var(--in-m) var(--sp-32); background: var(--ground); }
.vis { position: relative; height: 176px; margin-bottom: var(--block); border-radius: var(--r-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cell h3 { font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
.vpad { position: absolute; inset: 0; display: grid; align-content: center; padding: 0 var(--in-s); }
.vpad.centre { justify-items: center; }
.vpad.split { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); height: 36px; border-bottom: 1px solid var(--line); color: var(--text); font: var(--type-caption); font-weight: 600; }
.vrow:last-child { border-bottom: 0; }
.vrow svg { width: 16px; height: 16px; color: var(--ok); }
.bars { display: grid; gap: var(--sp-8); }
.bars span { color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.bar { height: 8px; border-radius: 4px; background: var(--cobalt-2); transform-origin: 0 50%; }
/* switch 40 x 24, knob 20 travels 16 */
.sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); }
.sw .fill { position: absolute; inset: 0; border-radius: inherit; background: var(--cobalt); }
.sw .knob { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.wrapseg { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.sws { position: relative; display: flex; gap: var(--sp-12); isolation: isolate; }
.sws span { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.sws .hl { inset: -4px; }
.c1 { background: var(--cobalt); }
.c2 { background: var(--orange); }
.c3 { background: var(--ok); }
.launch { position: relative; width: 56px; height: 56px; }
.launch i { position: absolute; inset: 0; border-radius: 20px 20px 6px 20px; }
/* ---------- Closing ---------- */
.home .closing { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--block); padding-block: var(--sec) var(--sp-64); }
/* ---------- L: 1024-1199 ---------- */
@media (max-width: 1199.98px) {
.home { --chat-w: 360px; }
.tabs span { padding: 0 var(--sp-8); } /* seven tabs in the 525 dashboard */
.caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- M: 768-1023. The stage stacks: chat, then the dashboard ---------- */
@media (max-width: 1023.98px) {
.home { --home-top: 48px; --say-end: 64px; --chat-w: 100%; --area-end: var(--block); }
.stagebox { grid-template-columns: minmax(0, 1fr); }
.chat { padding-bottom: var(--in-m); border-inline-end: 0; border-bottom: 1px solid var(--line); }
.tray { position: static; margin-top: var(--block); }
.tabs span { padding: 0 var(--sp-12); }
}
/* ---------- S: below 768 ---------- */
@media (max-width: 767.98px) {
.home { --home-top: 32px; --say-end: 48px; }
.msg { max-width: 88%; }
.note { border-radius: var(--r-md); }
.tabs { flex-wrap: wrap; }
.blk { right: 0; }
.b-leads, .b-act { width: auto; }
/* the ticket alone tells the hand-over here; with the queue the card would set a much taller area for every card */
.b-desk .queue { display: none; }
.ticket { flex: 1 1 auto; }
.stats { grid-template-columns: minmax(0, 1fr); }
.caps-grid { grid-template-columns: minmax(0, 1fr); }
.home .closing { align-items: flex-start; flex-direction: column; }
}
/* =====================================================================
Feature sections, after Linear's homepage: a headline, one big stage and the labels under it
(no section number and no numbers on the labels: Malik, 2026-10-13). No paragraph under the headline: the stage and its labels say the rest.
Each stage is a settings window (its sidebar and the page) beside the effect it has (.fx).
A section's states stack in one grid cell (.layers > .layer), so the stage takes the tallest
state's height and never jumps. Each section's own rules follow, scoped to its id.
===================================================================== */
.home {
--fx-w: 400px; /* effect column XL 400 . L 360 . M/S full width, under the window */
--nav-w: 200px; /* window sidebar XL 200 . L/M 176 . S hidden */
}
.home .feat { padding-block: var(--sec) 0; }
.feat-head { margin-bottom: var(--group); }
.feat-stage {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--fx-w);
border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); overflow: hidden;
}
/* a pressed label fades the states out for a quarter beat while the loop moves (landing.js) */
.layers { display: grid; min-width: 0; transition: opacity var(--dur-press) var(--ease-fade); }
.feat-stage.jump .layers { opacity: 0; }
.layer { grid-area: 1 / 1; min-width: 0; }
/* the settings window: sidebar | page */
.win { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-width: 0; }
.win-nav {
position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-4);
padding: var(--in-m) var(--sp-12); border-inline-end: 1px solid var(--line);
}
.win-group { padding: var(--sp-12) var(--sp-12) var(--sp-4); }
.win-group:first-child { padding-top: 0; }
.win-nav [data-it] {
position: relative; display: flex; align-items: center; height: 36px; padding: 0 var(--sp-12); border-radius: var(--r-sm);
color: var(--text-3); font: var(--type-caption); font-weight: 600; white-space: nowrap; transition: color var(--dur-press) var(--ease-fade);
}
.win-nav [data-it][data-on] { color: var(--text); }
.win-nav .hl { background: var(--lift); }
.win-body { min-width: 0; padding: var(--in-m); }
.win-title { margin-top: var(--row); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
/* the effect: what the customer or the team sees */
.fx { position: relative; min-width: 0; padding: var(--in-m); border-inline-start: 1px solid var(--line); }
.fx .thread { margin-top: var(--split); }
/* labels under the stage: they follow the loop, and pressing one jumps to its state */
.feat-tabs { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--block); }
.feat-tabs button {
position: relative; display: inline-flex; align-items: center; height: var(--h-md); padding: 0 var(--sp-16);
border: 0; border-radius: var(--r-pill); background: none; box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--text-2); cursor: pointer; font: var(--type-small); font-weight: 600; white-space: nowrap;
transition: color var(--dur-fade) var(--ease-fade), scale var(--dur-move) var(--spring);
}
.feat-tabs button:hover { color: var(--text); }
.feat-tabs button:active { scale: .96; transition-duration: var(--dur-press); }
.feat-tabs .ink-item { font: var(--type-small); font-weight: 600; }
/* ---------- Mini UI: the dashboard's controls, drawn small and dark. Shared by every stage. ---------- */
[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--body); }
.m-label { display: block; color: var(--text); font: var(--type-caption); font-weight: 600; }
.m-label + .m-input, .m-label + .m-area, .m-label + .m-sel { margin-top: var(--row); }
.m-input, .m-sel {
position: relative; display: flex; align-items: center; gap: var(--sp-8); min-width: 0; height: 40px; padding: 0 var(--sp-12);
border-radius: var(--r-sm); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--text); font: var(--type-small); white-space: nowrap;
}
.m-sel { justify-content: space-between; }
.m-sel::after { content: ""; width: 6px; height: 6px; flex: none; margin-inline-end: var(--sp-4); border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; }
.m-input .ph, .m-sel .ph { color: var(--text-3); }
.m-focus { box-shadow: inset 0 0 0 1px var(--cobalt-2), 0 0 0 3px rgba(42,91,224,.28); }
.m-area {
display: grid; align-content: start; gap: var(--pair); min-height: 76px; padding: var(--sp-8) var(--sp-12);
border-radius: var(--r-sm); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--text); font: var(--type-small);
}
.m-area > span { display: block; justify-self: start; white-space: nowrap; }
.m-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--sp-12);
border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: var(--type-caption); font-weight: 600; white-space: nowrap;
}
.m-btn.primary { background: var(--cobalt); box-shadow: none; color: #fff; }
.m-btn .swap { position: relative; display: inline-grid; }
.m-btn .swap > * { grid-area: 1 / 1; white-space: nowrap; }
.m-row {
display: grid; align-items: center; gap: var(--sp-12); min-height: 40px; border-bottom: 1px solid var(--line);
color: var(--text); font: var(--type-caption);
}
.m-row:last-child { border-bottom: 0; }
.m-head { min-height: 32px; color: var(--text-3); font: var(--type-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.m-muted { color: var(--text-3); }
.m-pill {
display: inline-flex; align-items: center; gap: var(--sp-4); justify-self: start; height: 24px; padding: 0 var(--sp-8); border-radius: var(--r-pill);
background: rgba(255,255,255,.06); color: var(--text-2); font: var(--type-micro); font-weight: 600; white-space: nowrap;
}
.m-pill.ok { background: rgba(76,195,138,.12); color: var(--ok); }
.m-pill.blue { background: rgba(157,184,255,.12); color: var(--cobalt-2); }
.m-pill.away { background: rgba(251,133,0,.12); color: #FFB45C; }
.m-pill.ok::before, .m-pill.away::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* checkbox 16: the tick draws (data-draw on the path), the fill fades in (data-in on .fill) */
.m-check { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); }
.m-check .fill { position: absolute; inset: 0; border-radius: inherit; background: var(--cobalt); }
.m-check.on { background: var(--cobalt); box-shadow: none; }
.m-check svg { position: relative; width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.m-check.on svg { stroke-dasharray: none; }
/* readiness bar: 8 tall, cobalt to orange as in the dashboard (data-grow on .m-bar i) */
.m-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.m-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cobalt), var(--orange)); transform-origin: 0 50%; }
.m-hint { color: var(--text-3); font: var(--type-micro); }
/* ---------- L: 1024-1199 ---------- */
@media (max-width: 1199.98px) {
.home { --fx-w: 360px; --nav-w: 176px; }
}
/* ---------- M: 768-1023. The effect goes under the window ---------- */
@media (max-width: 1023.98px) {
.feat-stage { grid-template-columns: minmax(0, 1fr); }
.fx { border-inline-start: 0; border-top: 1px solid var(--line); }
}
/* ---------- S: below 768. The window loses its sidebar ---------- */
@media (max-width: 767.98px) {
.win { grid-template-columns: minmax(0, 1fr); }
.win-nav { display: none; }
}
/* Feature section 1.0 Assistant (#f-assistant). Every rule is scoped to #f-assistant.
1.1 Standing rules: two rules are typed into the text box and saved; the chat follows them.
1.2 Languages: three languages join "Also answer in", their readiness bars grow; an Arabic chat.
1.3 Lead fields: a Budget field is added under the fields bidi always collects; the chat asks for it. */
/* ---------- Shared inside the section ---------- */
#f-assistant .a-form, #f-assistant .a-langs, #f-assistant .a-tbl { margin-top: var(--block); }
#f-assistant .a-act { display: flex; justify-content: flex-end; align-items: center; gap: var(--stack) var(--split); margin-top: var(--split); }
/* a focused field: the shared .m-focus ring on its own layer, so it can fade in while typing and out after */
#f-assistant .a-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* a note in the chat sits in a centred holder, so its pop never moves the bubbles around it */
#f-assistant .a-nw { display: flex; justify-content: center; }
#f-assistant .m-btn .swap { justify-items: center; }
#f-assistant .a-ok { display: inline-flex; align-items: center; gap: var(--sp-4); }
#f-assistant .a-ok svg, #f-assistant .a-ph svg, #f-assistant .a-chip svg {
width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#f-assistant .a-ok svg { stroke-dasharray: 1; }
/* ---------- 1.1 Standing rules ---------- */
#f-assistant .a-area { position: relative; min-height: 196px; }
#f-assistant .a-hint { margin-top: var(--stack); text-wrap: balance; }
/* the first typed rule: one line where the box is wide (XL, M), two where it is narrow (L, S) */
#f-assistant .a-n { display: none; }
/* ---------- 1.2 Languages ---------- */
#f-assistant .a-langs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--split); }
#f-assistant .a-lab { display: flex; justify-content: space-between; gap: var(--row); }
#f-assistant .a-cnt { font-weight: 400; }
/* the field holds its placeholder and the picked languages in one cell: the placeholder leaves as the first one lands */
#f-assistant .a-tok { display: grid; align-items: center; padding-left: var(--sp-8); }
#f-assistant .a-tok > * { grid-area: 1 / 1; }
#f-assistant .a-ph { display: inline-flex; align-items: center; gap: var(--sp-8); padding-left: var(--sp-4); }
#f-assistant .a-chips { display: flex; gap: var(--sp-4); min-width: 0; }
#f-assistant .a-chip {
display: inline-flex; align-items: center; gap: var(--sp-4); height: 24px; padding: 0 var(--sp-4) 0 var(--sp-8);
border-radius: var(--r-xs); background: var(--lift); box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--text); font: var(--type-micro); font-weight: 600; white-space: nowrap;
}
#f-assistant .a-chip svg { color: var(--text-3); stroke-width: 1.6; }
#f-assistant .a-ready { margin-top: var(--block); padding-top: var(--block); border-top: 1px solid var(--line); }
#f-assistant .a-rds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--split) var(--block); margin-top: var(--split); }
#f-assistant .a-rd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--row) var(--split); }
#f-assistant .a-rd p { color: var(--text-3); font: var(--type-caption); white-space: nowrap; }
#f-assistant .a-rd b { color: var(--text); font-weight: 600; }
#f-assistant .a-rd .num { color: var(--text-2); font: var(--type-caption); font-weight: 600; }
#f-assistant .a-rd .m-bar { grid-column: 1 / -1; }
/* English was ready before the change: its bar is already in place, only the new languages' bars grow */
#f-assistant .a-97 i { transform: scaleX(.97); }
/* ---------- 1.3 Lead fields ---------- */
#f-assistant .a-tbl .m-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px 72px minmax(0, 1.4fr); }
#f-assistant .a-all { grid-column: 3 / -1; }
#f-assistant .a-r { display: flex; }
#f-assistant .a-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--stack); margin-top: var(--block); }
#f-assistant .a-swap { display: inline-grid; }
#f-assistant .a-swap > * { grid-area: 1 / 1; }
#f-assistant .a-end { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#f-assistant .a-req { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--text-2); font: var(--type-caption); white-space: nowrap; }
/* ---------- L: 1024-1199. The page column is 350 wide ---------- */
@media (max-width: 1199.98px) {
#f-assistant .a-w { display: none; }
#f-assistant .a-n { display: block; }
#f-assistant .a-area { min-height: 220px; }
#f-assistant .a-langs { grid-template-columns: minmax(0, 1fr); gap: var(--stack); }
#f-assistant .a-q { display: none; }
#f-assistant .a-tbl .m-row { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.2fr); }
#f-assistant .a-k, #f-assistant .a-r { display: none; }
#f-assistant .a-all { grid-column: 2 / -1; }
#f-assistant .a-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#f-assistant .a-ar, #f-assistant .a-add .a-fld:last-child { display: none; }
}
/* ---------- M: 768-1023. The page column is 478 wide, the effect sits under it ---------- */
@media (max-width: 1023.98px) {
#f-assistant .a-w { display: block; }
#f-assistant .a-n { display: none; }
#f-assistant .a-area { min-height: 196px; }
#f-assistant .a-langs { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--split); }
#f-assistant .a-q { display: inline; }
#f-assistant .a-tbl .m-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px 72px minmax(0, 1.4fr); }
#f-assistant .a-k, #f-assistant .a-r { display: flex; }
#f-assistant .a-all { grid-column: 3 / -1; }
#f-assistant .a-add { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); }
#f-assistant .a-add .a-fld:last-child { display: block; }
}
/* ---------- S: below 768. The page column is 292 wide ---------- */
@media (max-width: 767.98px) {
#f-assistant .a-w { display: none; }
#f-assistant .a-n { display: block; }
#f-assistant .a-area { min-height: 220px; }
#f-assistant .a-langs { grid-template-columns: minmax(0, 1fr); gap: var(--stack); }
#f-assistant .a-q { display: none; }
#f-assistant .a-tbl .m-row { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.2fr); }
#f-assistant .a-k, #f-assistant .a-r { display: none; }
#f-assistant .a-all { grid-column: 2 / -1; }
#f-assistant .a-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#f-assistant .a-add .a-fld:last-child { display: none; }
#f-assistant .a-end { grid-template-columns: minmax(0, 1fr); }
#f-assistant .a-end .m-btn { justify-self: end; }
}
/* Feature section 2.0 Handoff and hours (#f-hours). Every rule is scoped to #f-hours. */
/* Arabic lines keep their face where a shared class sets the font shorthand */
#f-hours [lang="ar"], #f-hours [lang="ar"] * { font-family: "IBM Plex Sans Arabic", var(--body); }
#f-hours .h-tbl { margin-top: var(--block); }
#f-hours .m-row > * { min-width: 0; }
/* ---------- 2.1 Human handoff: the switch, then the rule it follows ---------- */
#f-hours .h-card { margin-top: var(--block); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
#f-hours .h-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16); color: var(--text-2); font: var(--type-caption); }
#f-hours .h-opt.on { color: var(--text); font-weight: 600; }
#f-hours .h-opt + .h-opt { border-top: 1px solid var(--line); }
#f-hours .h-rule .m-row { grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr); }
#f-hours .h-rule .m-row:not(.m-head) > span:last-child { color: var(--text-2); }
#f-hours .h-sm { display: none; }
#f-hours svg.h-ic { width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the marker in the chat: its clock face draws while the 30 minutes pass */
#f-hours .note.h-wait { background: rgba(255,255,255,.06); color: var(--text-2); }
#f-hours .note.h-wait .h-hand { stroke-dasharray: none; }
/* a note that pops while its layer is hidden keeps its slot (the reduced-motion frame measures layers at rest) */
#f-hours .h-pop { align-self: center; display: flex; }
/* ---------- 2.2 Hours and holidays: the week, then the public holidays ---------- */
#f-hours .h-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); }
#f-hours .m-sel.h-tz, #f-hours .m-sel.h-yr { height: 32px; }
#f-hours .h-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--row); justify-items: center; margin-top: var(--block); }
#f-hours .h-dn { color: var(--text); font: var(--type-micro); font-weight: 600; }
#f-hours .h-dn.off { color: var(--text-3); }
#f-hours .h-hrs {
justify-self: stretch; display: grid; place-content: center; padding: var(--sp-4) 0; border-radius: var(--r-sm);
background: rgba(157,184,255,.1); color: var(--cobalt-2); font: var(--type-micro); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
#f-hours .h-hrs.shut { grid-column: span 2; background: rgba(255,255,255,.04); color: var(--text-3); }
#f-hours .h-hrs.all { display: none; grid-column: span 5; }
#f-hours .h-cd { display: flex; align-items: center; gap: var(--row); margin-top: var(--block); }
#f-hours .h-cd .eyebrow { margin-inline-end: auto; }
#f-hours .h-add { gap: var(--sp-8); }
#f-hours .h-add svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
#f-hours .h-hols { margin-top: var(--row); }
#f-hours .h-hol {
position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12);
min-height: 36px; border-bottom: 1px solid var(--line); color: var(--text); font: var(--type-caption);
}
#f-hours .h-hol:last-child { border-bottom: 0; }
/* Eid, lit while the chat on the right plays out */
#f-hours .h-mark { position: absolute; inset: 2px calc(-1 * var(--sp-8)); z-index: -1; border-radius: var(--r-sm); background: var(--lift); }
/* ---------- 2.3 Email alerts: who hears, in which language, and when ---------- */
#f-hours .h-rcp .m-row { grid-template-columns: 112px minmax(0, 1fr) auto; }
#f-hours .h-per { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: 600; }
#f-hours .h-alr .m-row { grid-template-columns: minmax(0, 1fr) auto; }
#f-hours .h-mails { display: grid; gap: var(--stack); margin-top: var(--split); }
#f-hours .h-mail {
display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--sp-12);
padding: var(--sp-12) var(--sp-16); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
}
#f-hours .h-mail .av { grid-row: 1 / 4; background: rgba(42,91,224,.24); }
#f-hours .h-from { min-width: 0; color: var(--text-3); font: var(--type-caption); }
#f-hours .h-from span { color: var(--text-2); font-weight: 600; }
#f-hours .h-tm { color: var(--text-3); font: var(--type-caption); font-variant-numeric: tabular-nums; }
#f-hours .h-sj, #f-hours .h-pv { grid-column: 2 / 4; min-width: 0; }
#f-hours .h-sj { color: var(--text); font: var(--type-small); font-weight: 600; }
#f-hours .h-pv { color: var(--text-2); font: var(--type-caption); }
/* ---------- L: 1024-1199. A 350 page: the email column goes, the closed-dates label moves above its controls ---------- */
@media (max-width: 1199.98px) {
#f-hours .h-rcp .m-row { grid-template-columns: minmax(0, 1fr) auto; }
#f-hours .h-em { display: none; }
#f-hours .h-cd { flex-wrap: wrap; }
#f-hours .h-cd .eyebrow { flex-basis: 100%; }
/* a day is 43 px here (38 at S), too narrow for two times: Monday to Friday share one bar */
#f-hours .h-hrs:not(.all):not(.shut) { display: none; }
#f-hours .h-hrs.all { display: grid; }
}
/* ---------- M: 768-1023. A 478 page beside the sidebar ---------- */
@media (max-width: 1023.98px) {
#f-hours .h-rcp .m-row { grid-template-columns: 112px minmax(0, 1fr) auto; }
#f-hours .h-em { display: block; }
#f-hours .h-cd { flex-wrap: nowrap; }
#f-hours .h-cd .eyebrow { flex-basis: auto; }
#f-hours .h-hrs:not(.all):not(.shut) { display: grid; }
#f-hours .h-hrs.all { display: none; }
}
/* ---------- S: below 768. A 292 page ---------- */
@media (max-width: 767.98px) {
/* shorter conditions keep each rule on one line in the 292 page */
#f-hours .h-rule .m-row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
#f-hours .h-rule .h-ic, #f-hours .h-lg { display: none; }
#f-hours .h-sm { display: inline; }
#f-hours .h-week { column-gap: var(--pair); }
#f-hours .h-hrs:not(.all):not(.shut) { display: none; }
#f-hours .h-hrs.all { display: grid; }
#f-hours .h-rcp .m-row { grid-template-columns: minmax(0, 1fr) auto; }
#f-hours .h-em, #f-hours .h-add svg { display: none; }
#f-hours .h-cd { flex-wrap: wrap; }
#f-hours .h-cd .eyebrow { flex-basis: 100%; }
}
/* Feature section 4.0 Helpdesk rules (#f-rules). Every rule is scoped to #f-rules.
4.1 Conditions: the rule is named and its condition picked; the Arabic ticket in the queue is picked out.
4.2 Actions: three actions join one at a time (the add button slides down to make room), and the matching
ticket takes each one as it lands.
4.3 Review and save: the rule is read back and saved, first in the list; a new Arabic ticket arrives at the top
of the queue, pushes it down, and is handled as it opens. */
/* ---------- Shared inside the section ---------- */
/* Arabic lines keep their face where a shared class sets the font shorthand */
#f-rules [lang="ar"], #f-rules [lang="ar"] * { font-family: "IBM Plex Sans Arabic", var(--body); }
#f-rules .r-fld { margin-top: var(--block); }
/* each page is a column whose last block takes the spare height, so the footer sits at the same place in every state */
#f-rules .win-body .layer { display: flex; flex-direction: column; }
#f-rules .r-grow { flex-grow: 1; }
#f-rules .r-card { border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
#f-rules svg.r-ic {
width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
/* two values stacked in one cell: the first leaves as the second lands */
#f-rules .r-swap { display: inline-grid; align-items: center; min-width: 0; }
#f-rules .r-swap > * { grid-area: 1 / 1; }
#f-rules .r-who { display: inline-flex; align-items: center; gap: var(--sp-8); white-space: nowrap; }
#f-rules .r-none { display: block; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px dashed var(--line-2); }
#f-rules .r-add { gap: var(--sp-8); color: var(--text-2); }
#f-rules .r-fld > .r-add { margin-top: var(--stack); }
#f-rules .r-add svg, #f-rules .r-ok svg, #f-rules .r-match svg {
width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#f-rules .r-ok svg, #f-rules .r-match svg { stroke-dasharray: 1; }
#f-rules .r-foot {
display: flex; justify-content: flex-end; gap: var(--row); margin-top: var(--block);
padding-top: var(--split); border-top: 1px solid var(--line);
}
#f-rules .m-btn .swap { justify-items: center; }
#f-rules .r-ok { display: inline-flex; align-items: center; gap: var(--sp-4); }
/* the sidebar: the rule's three steps, each number turns to a tick as its step is done */
#f-rules .win-nav [data-it] { gap: var(--sp-12); }
#f-rules .r-st {
position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font: var(--type-micro); font-weight: 600; font-variant-numeric: tabular-nums;
}
#f-rules .r-st > * { grid-area: 1 / 1; }
#f-rules .r-dn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(76,195,138,.16); color: var(--ok); }
#f-rules .r-dn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
/* ---------- 4.1 Conditions ---------- */
#f-rules .r-typed { display: inline-block; white-space: nowrap; }
/* the focused field: the ring fades in while the name is typed */
#f-rules .r-ring {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px var(--cobalt-2), 0 0 0 3px rgba(42,91,224,.28);
}
#f-rules .r-cond { margin-top: var(--row); padding: var(--sp-12) var(--sp-16) var(--sp-16); }
#f-rules .r-ch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); color: var(--text-2); font: var(--type-caption); font-weight: 600; }
#f-rules .r-sels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--row); margin-top: var(--row); }
/* ---------- 4.2 Actions ---------- */
/* each action is its own card, 64 tall at every width (12 + a 40 picker + 12), so the add button under them
travels in fixed 72 px steps (a card and the 8 gap); it sits in a still holder, so its move never shifts the page */
#f-rules .r-acts { display: grid; gap: var(--row); margin-top: var(--row); }
#f-rules .r-act {
display: grid; grid-template-columns: 16px 144px minmax(0, 1fr); align-items: center; gap: var(--sp-12);
padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16); color: var(--text); font: var(--type-caption); font-weight: 600;
}
#f-rules .r-act > span { min-width: 0; white-space: nowrap; }
#f-rules .r-act .m-sel { font-weight: 400; }
#f-rules .r-act .r-who { gap: var(--sp-8); }
#f-rules .r-act .m-sel .av { margin-inline-start: calc(-1 * var(--sp-4)); }
#f-rules .r-addw { display: flex; margin-top: var(--stack); }
#f-rules .r-mv { display: inline-flex; }
/* ---------- 4.3 Review and save ---------- */
#f-rules .r-rb { margin-top: var(--block); padding: var(--sp-16); }
#f-rules .r-rn { color: var(--text-2); font: var(--type-caption); font-weight: 600; }
/* one plain sentence; the values the rule uses read in cobalt */
#f-rules .r-sen { margin-top: var(--row); color: var(--text-2); font: var(--type-small); text-wrap: pretty; }
#f-rules .r-sen b { color: var(--cobalt-2); font-weight: 600; white-space: nowrap; }
#f-rules .r-list { margin-top: var(--block); }
#f-rules .r-list .m-head { grid-template-columns: minmax(0, 1fr) auto; }
#f-rules .r-cnt { color: var(--text-2); font: var(--type-caption); letter-spacing: 0; text-transform: none; }
#f-rules .r-lr { grid-template-columns: minmax(0, 1fr); }
#f-rules .r-lr .r-swap { display: grid; }
#f-rules .r-li { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; white-space: nowrap; }
#f-rules .r-li b { flex: 1; min-width: 0; font-weight: 600; }
#f-rules .r-o {
display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--r-xs);
background: var(--lift); color: var(--text-2); font: var(--type-micro); font-weight: 600; font-variant-numeric: tabular-nums;
}
#f-rules .r-lr .ph { color: var(--text-3); }
#f-rules .r-hint { margin-top: var(--stack); text-wrap: balance; }
/* ---------- The effect: the helpdesk queue and one ticket ---------- */
#f-rules .r-q { margin-top: var(--split); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
#f-rules .r-q .m-head { grid-template-columns: minmax(0, 1fr) auto; padding: 0 var(--sp-16); }
#f-rules .r-qr {
position: relative; isolation: isolate; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-12);
padding: var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--line);
}
#f-rules .r-qr:last-child { border-bottom: 0; }
/* 4.3: each row sits in a still slot (61 tall at every width: 12 + 20 + 16 + 12 and a hairline). The old rows start
one slot up and slide down when the new ticket arrives; the last one slides under the card's edge. The list ends
1 px early so the last hairline hides under the card's own edge. */
#f-rules .r-rows { position: relative; margin-bottom: -1px; }
#f-rules .r-slot > .r-qr { border-bottom: 1px solid var(--line); }
#f-rules .r-gone { position: absolute; left: 0; right: 0; top: 100%; }
#f-rules .r-qr > .av { grid-row: 1 / 3; }
#f-rules .r-cu { background: rgba(255,255,255,.08); color: var(--text-2); }
#f-rules .r-nm { grid-column: 2; min-width: 0; color: var(--text); font: var(--type-caption); font-weight: 600; }
#f-rules .r-pv { grid-column: 2; justify-self: start; max-width: 100%; color: var(--text-2); font: var(--type-micro); white-space: nowrap; }
#f-rules .r-rt { grid-column: 3; grid-row: 1 / 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); }
#f-rules .r-rt.r-swap { display: inline-grid; justify-items: end; }
#f-rules .r-grp { display: flex; align-items: center; gap: var(--sp-8); }
/* the ticket the condition picks out: a soft wash and a cobalt edge */
#f-rules .r-mark { position: absolute; inset: 0; z-index: -1; background: rgba(157,184,255,.06); box-shadow: inset 2px 0 0 var(--cobalt-2); }
#f-rules .r-new { background: rgba(157,184,255,.06); box-shadow: inset 2px 0 0 var(--cobalt-2); }
#f-rules .r-match svg { width: 12px; height: 12px; }
/* a note sits in a centred holder, so its pop never moves what is around it */
#f-rules .r-nw { display: flex; justify-content: center; margin-top: var(--split); }
#f-rules .r-tk { margin-top: var(--split); padding: 0 var(--sp-16); }
#f-rules .r-tkh {
display: flex; align-items: center; gap: var(--sp-8); min-height: 48px; border-bottom: 1px solid var(--line);
color: var(--text); font: var(--type-small); font-weight: 600;
}
#f-rules .r-tkh b { flex: 1; min-width: 0; font-weight: 600; }
#f-rules .r-prop { grid-template-columns: 96px minmax(0, 1fr); }
#f-rules .r-prop .r-swap { justify-items: start; }
#f-rules .r-mac { align-self: flex-start; display: grid; gap: var(--pair); }
#f-rules .r-via { color: var(--text-3); font: var(--type-micro); }
/* ---------- L and M (1024-1199, 768-1023): a 350 and a 478 page; the shared rules fit both ---------- */
/* ---------- S: below 768. A 292 page: the two pickers stack, the action icons go ---------- */
@media (max-width: 767.98px) {
#f-rules .r-sels { grid-template-columns: minmax(0, 1fr); }
#f-rules .r-act { grid-template-columns: 136px minmax(0, 1fr); }
#f-rules .r-act .r-ic { display: none; }
}
/* Feature section 3.0 Team (#f-team). Every rule is scoped to #f-team.
3.1 Team and invites: someone is invited as Support, the link is made and a seat is taken; the invite as it is opened.
3.2 Roles: a custom role is named and switched on for exactly what it may do; what it can then open.
3.3 Shifts: Omar gets an overnight shift; a new ticket passes over whoever is off shift or away. */
/* ---------- Shared inside the section ---------- */
#f-team .t-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); }
#f-team .t-tt { display: flex; align-items: baseline; gap: var(--sp-12); margin-top: var(--row); }
#f-team .t-tt .win-title { margin-top: 0; }
#f-team .t-tbl { margin-top: var(--block); }
#f-team .m-row > * { min-width: 0; }
#f-team .t-swap { position: relative; display: inline-grid; }
#f-team .t-swap > * { grid-area: 1 / 1; }
#f-team .t-per { display: inline-flex; align-items: center; gap: var(--sp-8); }
#f-team .t-nm { font-weight: 600; white-space: nowrap; }
#f-team .m-btn .swap { justify-items: center; }
#f-team .t-ok { display: inline-flex; align-items: center; gap: var(--sp-4); }
#f-team .t-ok svg, #f-team .t-add svg {
width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#f-team .t-ok svg { stroke-dasharray: 1; }
#f-team .t-add { gap: var(--sp-8); }
#f-team .t-add svg { width: 12px; height: 12px; stroke-width: 1.75; }
/* a focused field: the ring fades in while typing and out when it is done */
#f-team .t-ring {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px var(--cobalt-2), 0 0 0 3px rgba(42,91,224,.28);
}
#f-team .t-typed { display: inline-block; justify-self: start; white-space: nowrap; }
#f-team .t-panel { margin-top: var(--block); padding: var(--sp-16); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
#f-team .t-hint { margin-top: var(--stack); }
#f-team .t-own { display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--text-3); font: var(--type-micro); font-weight: 600; white-space: nowrap; }
#f-team .t-own svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- 3.1 Team and invites ---------- */
#f-team .t-seats { color: var(--text-2); font: var(--type-caption); white-space: nowrap; font-variant-numeric: tabular-nums; }
#f-team .t-team .m-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 72px; }
#f-team .av.t-lk { background: rgba(255,255,255,.06); color: var(--text-2); }
#f-team .av.t-lk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#f-team .t-inv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-top: var(--row); }
#f-team .t-seg { background: var(--ground); }
/* the invite as it is opened */
#f-team .t-card { margin-top: var(--split); padding: var(--sp-16); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
#f-team .t-card .who { margin-bottom: var(--pair); }
#f-team .t-card .lf { grid-template-columns: 72px minmax(0, 1fr); }
#f-team .t-card .lf:last-of-type { border-bottom: 0; }
#f-team .t-join { display: flex; margin-top: var(--row); }
/* ---------- 3.2 Roles: a column per role, and the new role's column of switches ---------- */
#f-team .t-roles .m-row { grid-template-columns: minmax(0, 1fr) repeat(4, 52px) 120px; column-gap: var(--sp-8); }
#f-team .t-roles .m-row:not(.m-head) { padding-block: var(--sp-8); }
#f-team .t-roles .m-row > :first-child { text-wrap: balance; }
#f-team .t-roles .m-head { min-height: 40px; }
#f-team .t-roles .m-head .t-rc { text-transform: none; letter-spacing: 0; }
#f-team .t-rc { display: grid; place-items: center; }
/* has it: a tick; does not: a faint dot */
#f-team .t-rc::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
#f-team .t-rc.t-y::before { width: 10px; height: 5px; border-radius: 0; background: none; border: solid var(--text-2); border-width: 0 0 1.5px 1.5px; rotate: -45deg; translate: 0 -2px; }
#f-team .m-head .t-rc::before { content: none; }
#f-team .t-name {
position: relative; display: grid; align-items: center; height: 28px; padding: 0 var(--sp-8); border-radius: var(--r-sm);
background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--text); font: var(--type-micro); font-weight: 600; letter-spacing: 0; text-transform: none;
}
#f-team .t-name > * { grid-area: 1 / 1; }
/* the ring is placed on the field's padding box, not on its padded grid cell */
#f-team .t-name > .t-ring { grid-area: auto; }
#f-team .t-ph { color: var(--text-3); font-weight: 400; }
/* what the role opens */
#f-team .t-open { margin-top: var(--sp-8); }
#f-team .t-it { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12); min-height: 40px; border-bottom: 1px solid var(--line); color: var(--text); font: var(--type-caption); font-weight: 600; }
#f-team .t-it:last-child { border-bottom: 0; }
#f-team .t-it.t-off { color: var(--text-3); }
#f-team .t-it svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#f-team .t-it .t-ic { color: var(--text-2); }
#f-team .t-it.t-off .t-ic { color: var(--text-3); }
#f-team .t-it .t-y { color: var(--ok); stroke-width: 1.8; stroke-dasharray: 1; }
/* ---------- 3.3 Shifts ---------- */
#f-team .t-shifts .m-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 88px; padding-block: var(--sp-8); }
#f-team .t-shifts .m-head { padding-block: 0; }
#f-team .t-two { display: grid; min-width: 0; }
#f-team .t-two b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#f-team .t-two b.m-muted { font-weight: 400; }
#f-team .t-two i { color: var(--text-3); font: var(--type-micro); font-style: normal; white-space: nowrap; }
#f-team .t-shifts .m-pill { justify-self: start; }
/* the row being edited */
#f-team .t-sel { position: relative; isolation: isolate; }
#f-team .t-sel::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--sp-8)); z-index: -1; border-radius: var(--r-sm); background: rgba(255,255,255,.03); }
#f-team .t-edtop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
#f-team .m-sel.t-tz { height: 32px; font: var(--type-caption); }
#f-team .t-edrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12) var(--sp-16); margin-top: var(--stack); }
#f-team .t-days { display: flex; gap: var(--sp-4); }
#f-team .t-days span {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm);
box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); font: var(--type-micro); font-weight: 600;
}
#f-team .t-days span.on { background: var(--cobalt); box-shadow: none; color: #fff; }
#f-team .t-times { display: flex; align-items: center; gap: var(--sp-8); }
#f-team .t-tl { color: var(--text-2); font: var(--type-caption); }
#f-team .t-time { width: 64px; font-variant-numeric: tabular-nums; }
#f-team .t-tl + .t-time + .t-tl { margin-inline-start: var(--sp-4); }
/* where the new ticket goes */
#f-team .ticket.t-tk { margin-top: var(--split); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
#f-team .t-tk .who { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; }
#f-team .t-tk p { color: var(--text); font: var(--type-small); }
#f-team .t-route { margin-top: var(--stack); }
#f-team .t-cand { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-8); min-height: 40px; border-bottom: 1px solid var(--line); color: var(--text-2); font: var(--type-caption); }
#f-team .t-cand:last-child { border-bottom: 0; }
#f-team .t-cand.t-to { color: var(--text); }
#f-team .t-nw { display: flex; justify-content: center; margin-top: var(--split); }
/* ---------- L: 1024-1199. The page column is 350 wide ---------- */
@media (max-width: 1199.98px) {
#f-team .t-ag { display: none; }
#f-team .t-team .m-row { grid-template-columns: minmax(0, 1fr) 64px 72px; }
#f-team .t-rc { display: none; }
#f-team .t-roles .m-row { grid-template-columns: minmax(0, 1fr) 120px; column-gap: var(--sp-12); }
/* the role picker fills the panel in three even parts; its button sits under it, on the right */
#f-team .t-inv { display: grid; grid-template-columns: minmax(0, 1fr); }
#f-team .t-seg { display: flex; }
#f-team .t-seg span { flex: 1 1 0; justify-content: center; }
#f-team .t-inv .m-btn { justify-self: end; }
}
/* ---------- M: 768-1023. The page column is 478 wide, the effect sits under it ---------- */
@media (max-width: 1023.98px) {
#f-team .t-ag { display: block; }
#f-team .t-team .m-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 72px; }
#f-team .t-card { max-width: 400px; }
#f-team .t-inv { display: flex; }
#f-team .t-seg { display: inline-flex; }
#f-team .t-seg span { flex: none; }
}
/* ---------- S: below 768. The page column is 292 wide ---------- */
@media (max-width: 767.98px) {
#f-team .t-ag, #f-team .t-add svg { display: none; }
#f-team .t-team .m-row { grid-template-columns: minmax(0, 1fr) 64px 72px; }
#f-team .t-card { max-width: none; }
/* the role picker fills the panel; its button sits under it, on the right (as at L) */
#f-team .t-inv { display: grid; grid-template-columns: minmax(0, 1fr); }
#f-team .t-seg { display: flex; }
#f-team .t-seg span { flex: 1 1 0; justify-content: center; }
#f-team .t-inv .m-btn { justify-self: end; }
/* the shift column gets the room the names do not need, so its second line never meets the status */
#f-team .t-shifts .m-row { grid-template-columns: 76px minmax(0, 1fr) 80px; }
}