.pcats{max-width:var(--px-cw,820px);margin:26px auto 0;padding:0 20px} .pca-left{margin-left:0;margin-right:auto}.pca-left .pcats-t{text-align:left} .pca-right{margin-left:auto;margin-right:0}.pca-right .pcats-t{text-align:right} .pcats-t{text-align:center;font-size:12px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px} /* auto-FIT, not auto-FILL. auto-fill keeps generating empty tracks to fill the container, so four cards in a wide column sat in the first four of six tracks and the row read as left-aligned — and the align setting could not fix it, because the tracks already spanned the full width. auto-fit collapses the empty tracks, and justify-content then honours the setting. The 232px cap stops four cards stretching into billboards on a wide page. */ .pcats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,232px));gap:14px;justify-content:center} .pca-left .pcats-grid{justify-content:start} .pca-right .pcats-grid{justify-content:end} .pcat{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:.18s cubic-bezier(.2,.7,.3,1);box-shadow:0 1px 2px rgba(15,23,42,.04)} .pcat:hover{border-color:color-mix(in srgb,var(--accent) 55%, var(--line));transform:translateY(-3px);box-shadow:0 16px 32px -10px color-mix(in srgb,var(--accent) 30%, transparent)} .pcat-ic{font-size:26px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%, var(--card));line-height:1} .pcat:hover .pcat-ic{background:color-mix(in srgb,var(--accent) 20%, var(--card))} .pcat-l{font-size:13.5px;font-weight:700;color:var(--ink);text-align:center} /* Cards align on a ROW, not on their own content: the icon block is fixed, the label sits directly under it, and the description takes the remaining space. Without this a one-line description and a two-line one pushed their cards to different heights and nothing lined up across the row. */ .pcats-grid{align-items:stretch} .pcat{height:100%;justify-content:flex-start;gap:10px} .pcat-ic{flex:none} .pcat-l{margin-top:2px} .pcat-d{font-size:12.5px;line-height:1.5;color:var(--ink-3);text-align:center;margin-top:auto;padding-top:6px} /* The default focus ring is a hard black outline that reads as a mis-drawn border on a card. Use the brand accent, offset clear of the corner. */ .pcat:focus-visible,.pcatr:focus-visible,.pcatm:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ═══ LAYOUT ARCHETYPES — genuinely different structures (not just colour) ═══ Applied as a body class (pl-) from the design. 'centered' = default. */ /* Spotlight — big marketing landing: tall band, XL search, oversized heading, wide category grid. */ body.pl-spotlight #px-content:not(:empty){padding:22px 0 58px} body.pl-spotlight .pcats{max-width:1000px;margin-top:34px} body.pl-spotlight .pcats-grid{grid-template-columns:repeat(auto-fit,minmax(172px,252px));gap:16px} body.pl-spotlight .wrap{max-width:720px} /* Editorial — left-aligned wide column, asymmetric magazine feel. */ body.pl-editorial #px-content:not(:empty){padding:10px 0 30px} body.pl-editorial .pcats-t{text-align:left} body.pl-editorial .pcats{max-width:900px} body.pl-editorial .pcats-grid{justify-content:start;grid-template-columns:repeat(auto-fit,minmax(158px,232px))} body.pl-editorial .wrap{max-width:760px;margin-left:max(20px,calc((100% - 900px)/2 + 20px))} /* Cards — the category grid is the hero: big tiles, minimal heading, no subheading. */ body.pl-cards #px-content:not(:empty){padding-bottom:42px} body.pl-cards .pcats{max-width:1000px;margin-top:22px} body.pl-cards .pcats-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px} body.pl-cards .pcat{padding:32px 16px;gap:14px} body.pl-cards .pcat-ic{width:60px;height:60px;font-size:30px;border-radius:16px} body.pl-cards .pcat-l{font-size:15px} /* Compact — dense utility help-desk: no hero band, no hero, tight search + form. */ body.pl-compact #px-content:not(:empty){background:none!important;padding:6px 0 0} body.pl-compact #px-content:not(:empty)::after{display:none} body.pl-compact .pcats{max-width:560px;margin-top:12px} body.pl-compact .pcats-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px} body.pl-compact .pcat{padding:14px 10px;gap:7px} body.pl-compact .pcat-ic{width:40px;height:40px;font-size:20px} body.pl-compact .wrap{max-width:560px;padding-top:16px} body.pl-compact #px-content:not(:empty) + .wrap{padding-top:10px} /* ── PX_MATURITY v1 — component polish layer: depth system, typographic discipline, focus states, micro-interactions. Every studio design inherits this; tokens (--accent/--ink/--radius…) still drive all colour. ── */ :root{--shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06); --shadow-md:0 4px 6px -1px rgba(15,23,42,.05),0 10px 24px -6px rgba(15,23,42,.10); --shadow-lg:0 12px 20px -8px rgba(15,23,42,.13),0 28px 60px -12px rgba(15,23,42,.16); --ease:cubic-bezier(.22,.61,.36,1)} body{text-rendering:optimizeLegibility} .wrap{max-width:720px;padding:clamp(32px,3vw,56px) 20px 72px} .brandbar{margin-bottom:30px} .brandbar h1{font-size:20px;letter-spacing:-.02em} .card{border-color:color-mix(in srgb,var(--line) 74%,transparent);border-radius:calc(var(--radius) + 2px);padding:28px;box-shadow:var(--shadow-sm),var(--shadow-md)} .intro{font-size:14.5px;line-height:1.6} label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;margin:18px 0 7px} /* ── COMPOSE FORM RHYTHM ───────────────────────────────────────────────── Spacing is driven from the FIELDS, not from label top-margins. A pre-existing `label:first-child{margin-top:0}` was zeroing the gap above several labels, so the label sat hard against the field before it and the whole form read as one undifferentiated stack. Giving each control a bottom margin cannot be cancelled that way, and it keeps label-to-its-own-field tight (9px) while the gap BETWEEN field groups is clearly larger (24px). */ #pg-new .card label{margin:0 0 9px} #pg-new .card input,#pg-new .card select,#pg-new .card textarea, #pg-new .card .prio-c,#pg-new .card .row,#pg-new .card .rte,#pg-new .card .px-ed,#pg-new .card .px-edwrap{margin-bottom:24px} /* the textarea's own margin is INSIDE .rte and escapes it, leaving the next label hard against the editor — the wrapper carries the gap instead */ #pg-new .card .rte textarea{margin-bottom:0} /* the pair is one group: its inner fields must not double the gap */ #pg-new .card .row input,#pg-new .card .row select,#pg-new .card .row .prio-c{margin-bottom:0} #pg-new .row{gap:18px} #pg-new .row > div{flex:1 1 240px;min-width:0} /* ── SUBMIT / CANCEL ───────────────────────────────────────────────────── Full width stays the default. 'small'/'large' size the button to its label and sit Cancel beside it as a quiet secondary. */ /* Submit and Cancel are one pair: same height, same padding, same radius, sitting together at the start of the row. Cancel differs only in WEIGHT (outlined, not filled) — a secondary action, not a smaller one. Both had to be pinned to width:auto because the base .btn rule stretches to full width, which was blowing Cancel out to 671px. */ .p-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-top:8px} .p-actions.al-right{justify-content:flex-end} .p-actions.al-center{justify-content:center} /* alignment is meaningless when the button fills the row */ .p-actions.sz-normal{justify-content:flex-start} .p-actions > .btn,.p-actions > #p-cancel{flex:0 0 auto;width:auto;margin-top:0; min-height:46px;padding:12px 26px;font-size:14px;font-weight:750; border-radius:var(--r-md,12px);cursor:pointer;transition:.15s var(--ease)} .p-actions.sz-small > .btn,.p-actions.sz-small > #p-cancel{min-height:42px;padding:11px 22px;font-size:13.5px} .p-actions.sz-large > .btn,.p-actions.sz-large > #p-cancel{min-height:54px;padding:16px 30px;font-size:16px} /* full width is still the default look when the operator wants it loud */ .p-actions.sz-normal > .btn{flex:1 1 auto} .p-actions.sz-normal > #p-cancel{flex:0 0 auto} #p-cancel{background:transparent;border:1.5px solid var(--line);color:var(--ink-2);font-family:inherit} #p-cancel:hover{border-color:color-mix(in srgb,var(--ink) 26%,transparent);color:var(--ink); background:color-mix(in srgb,var(--ink) 4%,transparent)} #p-cancel.hidden{display:none} /* Busy: the whole form stops accepting input while the request is in flight, so what the customer sees cannot drift from what was sent. */ #pg-new .card.is-busy{position:relative;pointer-events:none} #pg-new .card.is-busy input,#pg-new .card.is-busy select, #pg-new .card.is-busy textarea,#pg-new .card.is-busy .rte{opacity:.55} #pg-new .card.is-busy #p-submit{opacity:1;position:relative} #pg-new .card.is-busy #p-cancel{opacity:.4} /* The pair only becomes a row when the option is on AND both fields are actually visible — a lone survivor keeps the full width instead of sitting in a half-width column with dead space beside it. */ #p-dept-prio-row.px-pair:has(> #p-dept-wrap:not(.hidden)):has(> #p-prio-wrap:not(.hidden)){ display:flex;gap:18px;flex-wrap:wrap} #p-dept-prio-row.px-pair:has(> #p-dept-wrap:not(.hidden)):has(> #p-prio-wrap:not(.hidden)) > div{flex:1 1 240px;min-width:0} #pg-new textarea{margin-bottom:4px} input,select,textarea{padding:12px 14px;border-radius:12px;font-size:14.5px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:color-mix(in srgb,var(--ink-3) 50%,var(--line))} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)} .btn{margin-top:22px;padding:14px 18px;border-radius:13px;letter-spacing:.004em;box-shadow:0 1px 2px rgba(15,23,42,.08),0 10px 22px -6px color-mix(in srgb,var(--accent) 42%,transparent);transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease)} .btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(15,23,42,.08),0 16px 32px -8px color-mix(in srgb,var(--accent) 52%,transparent)} .btn:active{transform:translateY(0) scale(.995)} .btn:focus-visible,.btn-ghost:focus-visible,.tabs button:focus-visible,.reqfilters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tabs{padding:4px;border-radius:13px;background:color-mix(in srgb,var(--line-soft) 82%,transparent);border:1px solid color-mix(in srgb,var(--line) 55%,transparent)} .tabs button{padding:10px 12px;border-radius:10px} .tabs button.on{box-shadow:var(--shadow-sm)} .pill{padding:4.5px 12px;letter-spacing:.01em} .req{padding:16px 18px;border-radius:14px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .req:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))} .req .rq-sub{font-size:14.5px} .reqfilters{gap:8px;margin-bottom:16px} .reqfilters button{padding:7px 14px;transition:.16s var(--ease)} .reqfilters button:hover{border-color:var(--accent);color:var(--accent)} .reqfilters button.on{box-shadow:0 6px 14px -4px color-mix(in srgb,var(--accent) 45%,transparent)} .btn-ghost{padding:13px;transition:.16s var(--ease)} .btn-ghost:hover{background:color-mix(in srgb,var(--accent) 5%,#fff);box-shadow:var(--shadow-sm)} .bubble{border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-sm)} .bubble.support{background:color-mix(in srgb,var(--accent) 4%,#fff);border-color:color-mix(in srgb,var(--accent) 16%,var(--line))} .ticketno{border:1px dashed color-mix(in srgb,var(--ink-3) 42%,var(--line));background:color-mix(in srgb,var(--line-soft) 70%,#fff)} .deflect{border-radius:14px;background:color-mix(in srgb,var(--accent) 4%,var(--line-soft));border-color:color-mix(in srgb,var(--accent) 15%,var(--line))} .empty{padding:36px 6px} .acctbar{padding:10px 14px;border:1px solid var(--line-soft);border-radius:12px;background:color-mix(in srgb,var(--card) 55%,var(--line-soft))} .phero-h{letter-spacing:-.032em} .phero-s{font-size:16px;line-height:1.6} .psearch-in{padding:16px 19px;border-radius:17px} .psearch-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent),0 18px 46px -10px color-mix(in srgb,var(--accent) 34%,transparent)} .pcat{border-radius:15px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .pcat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} .pcat-ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--line-soft))} .pcat-l{font-weight:750;font-size:14px;letter-spacing:-.005em} .pnav-in{min-height:62px} .pnav{backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)} .pfoot-col a{padding:5px 0;transition:color .14s var(--ease)} /* MAT2 — category layout variants + svg icon colouring + tile descriptions */ .pcat-ic svg,.pcatm-ic svg,.pb-card-ic svg,.pb-ct-ic svg{display:block;color:var(--accent)} .pcat-d{font-size:12.5px;color:var(--ink-3);line-height:1.45;text-align:center;margin-top:-4px} .pcats-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;max-width:var(--px-cw,780px);margin:0 auto;padding:0 20px} .pcatr{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px 18px;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .pcatr:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} .pcatr .pcat-ic{flex-shrink:0} .pcatr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pcatr-l{font-weight:750;font-size:14.5px;color:var(--ink);letter-spacing:-.005em} .pcatr-d{font-size:12.5px;color:var(--ink-3);line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .pcatr-arr{flex-shrink:0;color:var(--ink-3);transition:transform .18s var(--ease),color .18s var(--ease)} .pcatr:hover .pcatr-arr{transform:translateX(3px);color:var(--accent)} .pcats-min{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px;max-width:var(--px-cw,780px);margin:0 auto;padding:0 20px} .pcatm{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;text-decoration:none;font-weight:650;font-size:14px;color:var(--ink);transition:background .15s var(--ease),color .15s var(--ease)} .pcatm:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)} .pcatm .pcatr-arr{margin-left:auto;opacity:0;transition:.15s var(--ease)} .pcatm:hover .pcatr-arr{opacity:1;transform:translateX(2px)} .pcatm-ic{display:flex;color:var(--accent)} /* SP3 — chat-style conversation */ .thread{gap:14px} /* P14 — the avatar sits at the TOP of the bubble, beside the author name it belongs to. Bottom-aligned, a three-line message left the "J" circle ~100px below "JORDAN", reading as an orphan. Seven of the ten bubble styles already overrode this to flex-start, so the base was the odd one out. */ .brow{display:flex;gap:10px;align-items:flex-start} .brow.mine{flex-direction:row-reverse} /* thread message entrance (embed parity) — gated on the motion setting, staggered */ @keyframes pxMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} body[class*="tkm-"]:not(.tkm-none) .thread .brow{animation:pxMsgIn .42s var(--ease) both} body[class*="tkm-"] .thread .brow:nth-child(2){animation-delay:.05s} body[class*="tkm-"] .thread .brow:nth-child(3){animation-delay:.1s} body[class*="tkm-"] .thread .brow:nth-child(4){animation-delay:.15s} body[class*="tkm-"] .thread .brow:nth-child(n+5){animation-delay:.18s} @media(prefers-reduced-motion:reduce){.thread .brow{animation:none!important}} /* ⚠ A REBUILD IS NOT AN ENTRANCE. `pxRenderThread` empties the thread and recreates every row, so after a reply the entrance animation replayed on all of them at once and read as the whole page blinking. `t-noanim` is set by the renderer while it is REBUILDING an already-open thread; a genuine open still animates. */ .thread.t-noanim .brow{animation:none!important} .brow .bubble{max-width:calc(100% - 60px);flex:0 1 auto} /* ══ P14 · WHO IS SPEAKING MUST BE UNMISTAKABLE ═══════════════════════════ A 7% accent tint on the customer bubble against an untinted agent bubble made the two read as the same message. For a corporate portal the two voices are given different WEIGHT, not just different colour: agent = the organisation speaking. A solid card on the surface colour with a brand rail down its leading edge and real elevation — the authoritative record. you = clearly the customer's own words. A meaningfully tinted panel, flatter, no rail, tail on the reply side. The styles that deliberately flatten the thread (flat-thread, minimal-lines, timeline-dots, email-style, ticket-classic) all override with !important, so they are unaffected. ══════════════════════════════════════════════════ */ .thread .brow:not(.mine) .bubble{ background:var(--card); border-color:var(--line); /* ⚠ --accent-bg may hold a GRADIENT, which is invalid as a . Used in a border shorthand it makes the declaration invalid at computed-value time, so border-left-style falls back to `none` and the width computes to 0px — the rail silently vanished. Border colours must use --accent. */ border-left:3px solid var(--accent); box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 24px -16px rgba(15,23,42,.3); } .thread .brow:not(.mine) .who{color:var(--accent);letter-spacing:.5px} .thread .brow:not(.mine) .avat{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in srgb,var(--accent) 45%,transparent)} .bubble.mine{ background:color-mix(in srgb,var(--accent) 13%,var(--card)); border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); border-bottom-right-radius:6px; box-shadow:none; } .thread .brow.mine .who{color:color-mix(in srgb,var(--ink) 62%,transparent)} .brow:not(.mine) .bubble{border-bottom-left-radius:6px} .avat{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:var(--accent-bg,var(--accent));box-shadow:var(--shadow-sm)} .avat.cust{background:linear-gradient(135deg,#64748b,#94a3b8)} /* P14 — the day separator was bare grey text between two hairlines, which on a long thread read as an accident rather than a marker. It is now a pill seated ON the rule: legible at a glance while scanning, and it survives a tinted or dark surface because it carries its own background. */ .tsep{display:flex;align-items:center;gap:14px;margin:22px 0 14px; color:var(--ink-3);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .tsep::before,.tsep::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)} .tsep{position:relative} .tsep>span,.tsep{white-space:nowrap} .thread .tsep{padding:0} /* the label itself sits in a chip */ .tsep-chip{background:var(--card);border:1px solid var(--line-soft,var(--line));border-radius:999px; padding:5px 13px;box-shadow:0 1px 2px rgba(15,23,42,.04);color:var(--ink-2)} .bubble .body a{color:var(--accent);font-weight:600}.bubble .body code{background:var(--line-soft);border-radius:5px;padding:1px 5px;font-size:.92em} /* ═══ W4 — 10 bubble styles (bs-*) ═══ */ .bs-chat-square .bubble{border-radius:8px} .bs-cards .brow{align-items:flex-start}.bs-cards .bubble{border-radius:14px;box-shadow:var(--shadow-md)}.bs-cards .bubble.mine{background:var(--card)} .bs-flat-thread .brow{align-items:flex-start}.bs-flat-thread .brow.mine{flex-direction:row}.bs-flat-thread .bubble{background:transparent!important;border:none!important;box-shadow:none!important;border-bottom:1px solid var(--line-soft)!important;border-radius:0;padding:12px 0;max-width:100%!important}.bs-flat-thread .brow .bubble{max-width:100%} .bs-boxed-quote .bubble{border-left:3px solid var(--line);border-radius:0 10px 10px 0;box-shadow:none}.bs-boxed-quote .bubble.support{border-left-color:var(--accent)} .bs-timeline-dots .brow{align-items:flex-start}.bs-timeline-dots .brow.mine{flex-direction:row}.bs-timeline-dots .avat{width:12px;height:12px;font-size:0;background:var(--ink-3)}.bs-timeline-dots .avat.cust,.bs-timeline-dots .brow:not(.mine) .avat{background:var(--accent)}.bs-timeline-dots .bubble{background:transparent!important;border:none!important;box-shadow:none!important;padding:2px 0 14px;max-width:100%!important} .bs-minimal-lines .brow{align-items:flex-start}.bs-minimal-lines .brow.mine{flex-direction:row}.bs-minimal-lines .avat{display:none}.bs-minimal-lines .bubble{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0;padding:8px 0;max-width:100%!important}.bs-minimal-lines .who{color:var(--accent)} .bs-email-style .brow{align-items:flex-start}.bs-email-style .brow.mine{flex-direction:row}.bs-email-style .bubble{background:#fff!important;border:1px solid var(--line)!important;border-radius:10px;max-width:100%!important;box-shadow:var(--shadow-sm)}.bs-email-style .who{border-bottom:1px solid var(--line-soft);padding-bottom:6px;margin-bottom:6px;text-transform:none;font-size:13px;color:var(--ink)} .bs-ticket-classic .brow{align-items:flex-start;flex-direction:row!important}.bs-ticket-classic .bubble{background:#fff!important;border:1px solid var(--line)!important;border-radius:8px;max-width:100%!important}.bs-ticket-classic .brow.mine .bubble{background:color-mix(in srgb,var(--accent) 5%,#fff)!important}.bs-ticket-classic .who{background:var(--line-soft);margin:-13px -16px 10px;padding:8px 16px;border-radius:8px 8px 0 0;text-transform:none;font-size:12.5px;color:var(--ink)} /* ══ THE FLAT FAMILY STILL HAS TO NAME ITS SPEAKER ════════════════════════ flat-thread, timeline-dots, minimal-lines and email-style all render the agent and the customer IDENTICALLY — measured signature-for-signature — so the only cue was the author label. These styles flatten on purpose, so the voice is carried by a brand rail on the ORGANISATION's messages and a muted label on the customer's: their flat identity survives, the speaker becomes unmistakable. They override with !important, so this must too. ══ */ .bs-flat-thread .brow:not(.mine) .bubble, .bs-minimal-lines .brow:not(.mine) .bubble, .bs-email-style .brow:not(.mine) .bubble{ border-left:3px solid var(--accent)!important; padding-left:15px!important; } .bs-flat-thread .brow:not(.mine) .who, .bs-minimal-lines .brow:not(.mine) .who, .bs-email-style .brow:not(.mine) .who, .bs-timeline-dots .brow:not(.mine) .who{color:var(--accent)} .bs-flat-thread .brow.mine .who, .bs-minimal-lines .brow.mine .who, .bs-email-style .brow.mine .who, .bs-timeline-dots .brow.mine .who{color:color-mix(in srgb,var(--ink) 55%,transparent)} /* timeline-dots keeps its rail-less timeline: the agent's DOT carries the accent (already) and the customer's is muted, so the two never match. */ .bs-timeline-dots .brow.mine .avat{background:var(--ink-3)!important;opacity:.6} .bs-glass .bubble{backdrop-filter:blur(12px) saturate(1.4);background:color-mix(in srgb,var(--card) 65%,transparent)!important;border-color:color-mix(in srgb,#fff 40%,var(--line))!important;box-shadow:var(--shadow-lg)} /* ADDITIVE_PORTAL_PREMIUM_2026 — two new conversation treatments. */ .bs-case-cards .brow{align-items:flex-start}.bs-case-cards .bubble{max-width:min(760px,88%);border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 13%,var(--line));box-shadow:0 14px 35px -28px rgba(15,23,42,.5);padding:16px 18px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,var(--accent) 4%),var(--card))}.bs-case-cards .brow:not(.mine) .bubble{border-left:4px solid var(--accent)}.bs-case-cards .brow.mine .bubble{border-right:4px solid color-mix(in srgb,var(--ink-3) 60%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--card))}.bs-case-cards .who{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink);padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)} .bs-support-notes .brow{align-items:flex-start;flex-direction:row!important}.bs-support-notes .avat{border-radius:10px}.bs-support-notes .bubble{max-width:100%!important;border-radius:0 13px 13px 0;border:0;border-left:4px solid var(--accent);box-shadow:none;background:color-mix(in srgb,var(--accent) 4%,var(--card))!important;padding:14px 17px}.bs-support-notes .brow.mine .bubble{border-left-color:var(--ink-3);background:color-mix(in srgb,var(--ink) 2%,var(--card))!important}.bs-support-notes .who{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}.bs-support-notes .brow.mine .who{color:var(--ink-3)} .thread.side-names .avat{display:none}.thread.side-names .who{font-size:12.5px} /* W5 — bubble alignment (positionable) */ .ba-customer-left .brow.mine{flex-direction:row}.ba-customer-left .bubble.mine{border-bottom-right-radius:14px;border-bottom-left-radius:6px} .ba-all-left .brow.mine{flex-direction:row}.ba-all-left .brow{align-items:flex-start} /* W5 — reply rating widget */ .rr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)} .rr.ra-center{justify-content:center}.rr.ra-right{justify-content:flex-end} /* reply reactions — quick "like" (separate from rating) */ .rx{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap} .rx-b{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:14px;line-height:1;cursor:pointer;transition:.14s var(--ease);display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)} .rx-b .rx-t{font-size:12.5px;font-weight:700} .rx-b:hover{border-color:var(--accent);transform:translateY(-1px)} .rx-b.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)} /* "Your turn" turn badge (embed parity) + awaiting-row highlight */ .px-turn{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));box-shadow:0 4px 12px -3px color-mix(in srgb,var(--accent) 55%,transparent);white-space:nowrap;margin-right:2px;vertical-align:middle} #px-d-subject .px-turn{font-size:12px;margin-left:10px} .awaiting{position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card))!important;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))!important} .px-tcard.awaiting,.px-cozy-row.awaiting,.tl-item.awaiting,.kb-card.awaiting,.sp-row.awaiting,.px-line.awaiting,.psd-row.awaiting,.pac-card.awaiting{border-left:3px solid var(--accent)} /* PHASE_PORTAL_TKLIST — row accent by status/priority (mirrors the .awaiting border pattern) */ .pxra:not(tr){border-left:3px solid var(--row-accent)} tr.pxra>td:first-child{border-left:3px solid var(--row-accent)} tr.awaiting{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent)} tr.awaiting .rt-subcell{box-shadow:inset 3px 0 0 var(--accent)} .rr-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)} .rr[data-done] .rr-label{color:var(--ok)} .rr-ctl{display:inline-flex;gap:4px;align-items:center} .rr-b{background:none;border:none;font-size:17px;cursor:pointer;opacity:.5;transition:.13s var(--ease);padding:2px 4px;border-radius:7px} .rr-b:hover{opacity:1;transform:scale(1.12)}.rr-b.on{opacity:1} .rr-stars{display:inline-flex} .rr-star{background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:var(--line);transition:color .12s var(--ease),transform .12s var(--ease);padding:1px} .rr-star:hover{transform:scale(1.15)}.rr-star.on{color:#f59e0b} .rr[data-done] .rr-b,.rr[data-done] .rr-star{pointer-events:none} .rr-comment{flex-basis:100%;margin-top:8px;display:flex;gap:8px;flex-direction:column} .rr-comment textarea{min-height:52px}.rr-send{margin:0;align-self:flex-start;width:auto;padding:8px 16px} /* avatar styles */ .av-initials-squircle{border-radius:9px} .av-initials-gradient{background:linear-gradient(135deg,var(--accent),#8b5cf6)!important} .av-monogram-outline{background:transparent!important;color:var(--accent)!important;border:2px solid var(--accent);box-shadow:none} .av-dot-status{background:var(--line-soft)!important;position:relative}.av-statusdot{width:11px;height:11px;border-radius:50%;background:var(--ink-3)}.av-statusdot.answered,.av-statusdot.closed,.av-statusdot.resolved{background:var(--ok)}.av-statusdot.open,.av-statusdot.customer_reply{background:var(--accent)} .av-emoji{background:var(--line-soft)!important;font-size:16px} /* ═══ W4 — status stepper (6 styles) ═══ */ .stepper{display:flex;align-items:center;gap:0;margin:0 0 16px;flex-wrap:wrap} .step{display:flex;align-items:center;gap:7px;flex-shrink:0} .step-mark{width:24px;height:24px;border-radius:50%;background:var(--line-soft);color:var(--ink-3);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .step.done .step-mark{background:var(--ok);color:#fff;border-color:var(--ok)}.step.now .step-mark{background:var(--accent);color:#fff;border-color:var(--accent)} .step-lbl{font-size:12px;font-weight:700;color:var(--ink-3)}.step.now .step-lbl,.step.done .step-lbl{color:var(--ink)} .step-line{flex:1;min-width:16px;height:2px;background:var(--line);margin:0 8px}.step-line.done{background:var(--ok)} .st-dots .step-mark{width:12px;height:12px;font-size:0}.st-dots .step-lbl{display:none} .st-bar{gap:0}.st-bar .step{flex:1;flex-direction:column;gap:5px}.st-bar .step-mark{display:none}.st-bar .step-lbl{font-size:11px}.st-bar .step-line{display:none}.st-bar .step{border-top:3px solid var(--line);padding-top:7px}.st-bar .step.done{border-color:var(--ok)}.st-bar .step.now{border-color:var(--accent)} /* P14 — the pills row carried full done/now/upcoming semantics in the DOM (.step.done + ✓, .step.now, .step-line.done) but suppressed the mark AND the connectors, so a completed step differed from an upcoming one only by a faint tint and the row never read as a PROGRESSION. The tick is restored for completed steps and upcoming steps are visibly muted. */ .st-pills-row .step-mark{display:none} .st-pills-row .step.done .step-lbl::before{content:'✓';margin-right:6px;font-weight:900;color:var(--ok,#16a34a)} .st-pills-row .step:not(.done):not(.now){opacity:.55} .st-pills-row .step:not(.done):not(.now) .step-lbl{color:var(--ink-3)} .st-pills-row .step-line{display:none}.st-pills-row .step{background:var(--line-soft);border-radius:999px;padding:5px 13px;margin-right:6px}.st-pills-row .step.now{background:var(--accent)}.st-pills-row .step.now .step-lbl{color:#fff}.st-pills-row .step.done{background:color-mix(in srgb,var(--ok) 15%,transparent)} .st-vertical{flex-direction:column;align-items:flex-start}.st-vertical .step{margin-bottom:8px}.st-vertical .step-line{display:none} .st-checklist{flex-direction:column;align-items:flex-start}.st-checklist .step-line{display:none}.st-checklist .step{margin-bottom:6px}.st-checklist .step-mark{border-radius:6px} /* ═══ W4 — detail layouts (dl-*) ═══ */ /* ⚠ ADDING A VARIANT HERE? The mobile collapse at ~L2048 uses `.rq-grid.rq-grid` to outrank this whole family — leave it doubled or your variant will keep its desktop columns on a phone (that is exactly how dl-wide came to render the thread at 0px). ⚠ EVERY ONE OF THESE MUST BE SCOPED `.rq-grid.dl-*`, NOT BARE `.dl-*`. The base `.rq-grid{grid-template-columns:minmax(0,1fr) 280px}` is declared LATER in this stylesheet at equal (0,1,0) specificity, so a bare `.dl-*` rule always lost and every layout computed the same 613px/280px. Only the rules using other properties (order, display) appeared to work — which is why `sidebar-left` swapped the ORDER but kept the widths, handing the sidebar 613px and squeezing the conversation into 280px. */ .rq-grid.dl-sidebar-left{grid-template-columns:280px minmax(0,1fr)}.dl-sidebar-left .rq-side{order:-1} /* ═══ LAYOUT 2 — THE CORRESPONDENCE LEDGER ═══════════════════════════════════════════════════ Layout 2 used to be a duplicate: its only rule was "put the sidebar left", which the separate `Sidebar side` setting already does — with one id + one class, so it WON. All four combinations were measured: the layout changed nothing, and picking "Sidebar left" with the side set to right rendered on the RIGHT. It was a name with nothing behind it. It earns its place by changing the READING COLUMN. The other layouts render a chat: round bubbles, tails, soft fills. This renders CORRESPONDENCE — the register a large organisation uses for a case file. Direction still reads at a glance, because that is genuinely useful: what the client sent enters from the LEFT, what the desk sent leaves from the RIGHT. What changes is the finish. Each entry is a bordered document panel with a squared corner, a solid edge rule on its outer side, the author set in letterspaced caps beside its identity plate, and the absolute timestamp opposite in tabular figures. No tails, no pill shapes, no centred text. ⚠ SCOPED ENTIRELY TO `#px-d-grid.dl-sidebar-left`. One id + one class beats every existing thread rule (the strongest is three classes), and the class exists on no other layout, so none of the other eight can be reached by anything below. ⚠ COLOUR IS APPLIED EXACTLY AS EVERYWHERE ELSE — every value is mixed from --accent / --ink / --card / --line, so the operator's theme drives this layout like the others. No literals; asserted. ⚠ `.mine` IS THE CLIENT, NOT THE DESK. The renderer sets `'brow'+(isSup?'':' mine')`, so `.mine` is the customer and `:not(.mine)` is support. Reading it the other way inverts the whole layout. ⚠ NO CSS-GENERATED TEXT. A role badge via `content:` cannot be translated and would be English on all 40 locales. Direction is carried by side, edge rule and surface instead. ⚠ `bubble_style` and `bubble_align` DO NOT APPLY HERE, by design — this layout is defined by not being a chat, so a bubble shape and an alignment have nothing to act on. Every other thread setting still works: order, grouping, day separators, avatar style, agent HTML, collapse. */ #px-d-grid.dl-sidebar-left .thread{display:block;gap:0} /* ── THE ENTRY ── held to a measure so the direction reads; never the full column. */ /* ⚠ FULL WIDTH, BOTH SIDES. An earlier pass held each entry to 82% and pushed it left or right, which is the chat gesture in a squarer costume and wastes a fifth of the column on every row. Every entry now spans the FULL measure; the direction is carried by which edge the identity plate sits on, which edge the solid rule runs down, and which end the author line is set to. */ /* ⚠ A GUTTER ON BOTH SIDES OF EVERY ROW, ALWAYS. Giving the plate a column only on its own side made the two panels the same WIDTH but not the same RECTANGLE: each was shunted 53px towards the plate, so client and desk entries never lined up down the column. Both gutters are now reserved on every row and the panel always occupies the middle column, so the sheet is identical whichever direction it travelled — only the gutter that is FILLED changes. */ #px-d-grid.dl-sidebar-left .thread .brow, #px-d-grid.dl-sidebar-left .thread .brow.mine, #px-d-grid.dl-sidebar-left .thread .brow:not(.mine){ display:grid;grid-template-columns:40px minmax(0,1fr) 40px;column-gap:13px; align-items:start; max-width:100%;width:100%;margin:0 0 14px;padding:0;border:0; flex-direction:row; } #px-d-grid.dl-sidebar-left .thread .brow .bubble{grid-column:2;grid-row:1} /* THE CLIENT enters from the left, so its plate fills the LEFT gutter. `.mine` is the customer. */ #px-d-grid.dl-sidebar-left .thread .brow.mine .avat{grid-column:1;grid-row:1} /* THE DESK leaves from the right, so its plate fills the RIGHT gutter. */ #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .avat{grid-column:3;grid-row:1} /* A run by one author tightens up rather than repeating the full gap. */ #px-d-grid.dl-sidebar-left .thread .brow.bgroup{margin-bottom:7px} /* ── THE IDENTITY PLATE ── squared, not a chat circle. */ #px-d-grid.dl-sidebar-left .thread .avat{ width:34px;height:34px;border-radius:7px; font-size:11.5px;font-weight:800;letter-spacing:.02em;box-shadow:none; background:var(--accent-bg,var(--accent));color:var(--card); } #px-d-grid.dl-sidebar-left .thread .avat.cust{ background:color-mix(in srgb,var(--ink) 10%,var(--card)); color:color-mix(in srgb,var(--ink) 72%,transparent); border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); } /* ── THE DOCUMENT PANEL ── a bordered sheet with a squared corner and a solid edge rule on the side it came from. This is what replaces the bubble. */ #px-d-grid.dl-sidebar-left .thread .bubble{ max-width:100%;width:100%;margin:0; border-radius:5px;box-shadow:none; padding:11px 15px 13px; display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px; } /* ⚠ ONE SHEET, TWO DIRECTIONS. The client used to get neutral stock and a grey rule while the desk got accent stock and an accent rule, which made the two read as different objects rather than as the same document travelling opposite ways. They now share the identical surface, border, weight and corner: the ONLY things that flip are which edge carries the solid rule and which end the author line is set to. */ #px-d-grid.dl-sidebar-left .thread .bubble{ background:color-mix(in srgb,var(--accent) 5%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); } /* ⚠ THE TWO EDGES MUST NOT BE THE SAME COLOUR. Both rules were the accent, so side was the only difference and a glance down the column told you nothing — the record has to say WHO at a glance, not just which way. The desk keeps the accent, because outbound is the brand speaking. The client takes graphite mixed from --ink, which is the same token family and so still follows the theme. The surface, border, corner and rectangle stay identical between the two; only the rule colour, the rule side and the name side differ. */ #px-d-grid.dl-sidebar-left .thread .bubble{ transition:border-color .18s var(--ease,ease), box-shadow .18s var(--ease,ease), background .18s var(--ease,ease); } /* Client — graphite rule on the LEFT, the side it entered from. */ #px-d-grid.dl-sidebar-left .thread .brow.mine .bubble{ border-left:3px solid color-mix(in srgb,var(--ink) 42%,transparent); border-right:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); } /* Desk — accent rule on the RIGHT, the side it left from. */ #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .bubble{ border-left:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-right:3px solid var(--accent); border-bottom-left-radius:5px; } /* ── HOVER ── the sheet lifts off the page and its own rule deepens, so the entry under the cursor is unmistakable without moving anything. Each side answers in its own colour. */ #px-d-grid.dl-sidebar-left .thread .brow:hover .bubble{ background:var(--card); } #px-d-grid.dl-sidebar-left .thread .brow.mine:hover .bubble{ border-color:color-mix(in srgb,var(--ink) 22%,var(--line)); border-left-color:color-mix(in srgb,var(--ink) 68%,transparent); box-shadow: 0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent), 0 6px 16px -8px color-mix(in srgb,var(--ink) 34%,transparent); } #px-d-grid.dl-sidebar-left .thread .brow:not(.mine):hover .bubble{ border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); border-right-color:var(--accent); box-shadow: 0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent), 0 6px 16px -8px color-mix(in srgb,var(--accent) 46%,transparent); } /* The identity plate answers the hover too, so the row reads as one object. */ #px-d-grid.dl-sidebar-left .thread .avat{transition:box-shadow .18s var(--ease,ease)} #px-d-grid.dl-sidebar-left .thread .brow:not(.mine):hover .avat{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); } #px-d-grid.dl-sidebar-left .thread .brow.mine:hover .avat{ box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent); } /* ── THE HEADER LINE ── author beside its own plate, timestamp opposite, so the two sides mirror and each name stays next to the face it belongs to. */ #px-d-grid.dl-sidebar-left .thread .bubble > .who{ grid-row:1;margin:0; font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; } #px-d-grid.dl-sidebar-left .thread .bubble > .at{ grid-row:1;margin:0; font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap; color:color-mix(in srgb,var(--ink) 46%,transparent); } #px-d-grid.dl-sidebar-left .thread .brow.mine .bubble > .who{grid-column:1;text-align:left} #px-d-grid.dl-sidebar-left .thread .brow.mine .bubble > .at{grid-column:2;text-align:right} #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .bubble > .who{grid-column:2;text-align:right} #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .bubble > .at{grid-column:1;text-align:left} /* A hairline under the header separates the letterhead from the letter. */ #px-d-grid.dl-sidebar-left .thread .bubble > .body{ grid-column:1 / -1;grid-row:2; padding-top:9px; border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent); font-size:13.5px;line-height:1.62; text-align:left; /* prose is never right-aligned, whichever side the sheet sits on */ } #px-d-grid.dl-sidebar-left .thread .bubble > *:not(.who):not(.at):not(.body){grid-column:1 / -1} #px-d-grid.dl-sidebar-left .thread .bubble > .att{ border:1px solid var(--line);border-radius:5px;padding:9px 11px; background:color-mix(in srgb,var(--card) 70%,transparent); } /* ── THE DAY SEPARATOR ── a ruled band across the full column, the way a file is dated. */ #px-d-grid.dl-sidebar-left .thread .tsep{ display:block;margin:20px 0 14px;padding:0 0 7px; border-bottom:1px solid var(--line); } #px-d-grid.dl-sidebar-left .thread .tsep::before, #px-d-grid.dl-sidebar-left .thread .tsep::after{content:none} #px-d-grid.dl-sidebar-left .thread .tsep-chip{ background:none;border:0;padding:0;border-radius:0;box-shadow:none; font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:color-mix(in srgb,var(--ink) 50%,transparent); } /* ── THE LETTERHEAD ── the header region belongs to the same register as the ledger below it, so the rounded, chat-era chrome is squared off: pill chips become tabs, the pill Reply becomes a squared action, and the utility strip becomes a ruled bar rather than floating controls. Two ids + one class here, so these beat the base `.d-*` rules without !important, and they still cannot escape this layout. */ /* ⚠ SET padding-bottom ONLY, NEVER THE PADDING SHORTHAND. In sticky-header mode the card pulls this block out with `margin:-4px -20px` and pays it back with `padding:10px 20px`. A shorthand here wiped that horizontal padding while the negative margin stayed, so the subject and the fact tabs hung 20px further left than the utility bar and the entries below them (measured: 380 against 400). Only the bottom edge is ours to set. */ #px-d-grid.dl-sidebar-left #px-d-head{ padding-bottom:13px;margin-bottom:0; border-bottom:2px solid color-mix(in srgb,var(--ink) 14%,transparent); } #px-d-grid.dl-sidebar-left #px-d-subject{letter-spacing:-.015em} /* Reply — squared to match the document panels, not a pill floating over them. */ #px-d-grid.dl-sidebar-left #px-d-reply-top{ border-radius:5px;box-shadow:none; } /* The facts read as filing tabs: squared, hairlined, tabular where they are numbers. */ #px-d-grid.dl-sidebar-left #px-d-head .d-chip{ border-radius:4px;padding:4px 10px; font-variant-numeric:tabular-nums; background:color-mix(in srgb,var(--ink) 3.5%,transparent); } #px-d-grid.dl-sidebar-left #px-d-head #px-live-presence{ border-radius:4px; } /* THE UTILITY BAR — one ruled strip carrying the count, the actions and the search, instead of three loose groups sitting on the page. */ #px-d-grid.dl-sidebar-left #px-d-convohead{ margin:0;padding:11px 0 0; letter-spacing:.14em; color:color-mix(in srgb,var(--ink) 50%,transparent); } #px-d-grid.dl-sidebar-left #px-d-bar{ margin:9px 0 4px;padding:0 0 12px; border-bottom:1px solid var(--line); } #px-d-grid.dl-sidebar-left #px-d-actions-top button, #px-d-grid.dl-sidebar-left #px-d-actions-top a{ border-radius:4px; } /* ── THE SEARCH FIELD ───────────────────────────────────────────────────────────────────────── ⚠ THE WRAPPER IS THE FIELD, THE INPUT IS JUST TEXT. `.d-search` already carries a border, a background and a radius, and the inside it picks up the global input styling — border, background, padding and a radius of its own — so the control rendered as a field drawn inside a field. The inner control is stripped back to bare text; the wrapper is the only field. The finish is built from depth rather than from roundness, to stay in this layout's register: a squared 4px corner, a lit top edge, a soft cast shadow, and an accent that only appears on focus. Every value is mixed from --card / --ink / --accent / --line. */ #px-d-search{ display:flex;align-items:center;gap:10px; min-height:40px;padding:0 13px; border-radius:4px; background:linear-gradient( color-mix(in srgb,var(--card) 100%,transparent), color-mix(in srgb,var(--ink) 2%,var(--card))); border:1px solid color-mix(in srgb,var(--ink) 12%,var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--card) 90%,transparent), inset 0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent), 0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent); transition:border-color .18s var(--ease,ease), box-shadow .18s var(--ease,ease), background .18s var(--ease,ease); } #px-d-search:hover{ border-color:color-mix(in srgb,var(--ink) 20%,var(--line)); } /* Focus lights the whole control once, on the wrapper — never a second ring on the input. */ #px-d-search:focus-within{ background:var(--card); border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--card) 95%,transparent), 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent), 0 2px 6px -2px color-mix(in srgb,var(--accent) 26%,transparent); } /* The icon is a quiet mark that takes the accent only while the field is live. */ #px-d-search > svg{ flex:0 0 auto;display:block; color:color-mix(in srgb,var(--ink) 40%,transparent); transition:color .18s var(--ease,ease), transform .18s var(--ease,ease); } /* The mark takes the accent and leans in a touch when the field goes live. */ #px-d-search:focus-within > svg{ color:var(--accent); transform:scale(1.06); } /* The caret and the selection belong to the theme too — a default black caret and a browser-blue selection are the two details that give away an otherwise themed field. */ #px-d-search > #px-d-q{caret-color:var(--accent)} #px-d-search > #px-d-q::selection{ background:color-mix(in srgb,var(--accent) 24%,transparent); color:var(--ink); } /* Chrome draws its own grey clear button inside search inputs, which puts a second control back inside the field we just finished flattening. */ #px-d-search > #px-d-q::-webkit-search-cancel-button, #px-d-search > #px-d-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none} #px-d-search > #px-d-q{ flex:1 1 auto;min-width:0; border:0;background:none;box-shadow:none;outline:none; border-radius:0;padding:0;margin:0;height:auto;min-height:0; font:inherit;font-size:13px;letter-spacing:.005em; color:var(--ink); } #px-d-search > #px-d-q:focus, #px-d-search > #px-d-q:focus-visible{ border:0;box-shadow:none;outline:none;background:none; } #px-d-search > #px-d-q::placeholder{ color:color-mix(in srgb,var(--ink) 38%,transparent); letter-spacing:.01em; } /* The hit count reads as a tally, not as prose: tabular, boxed, quiet. */ #px-d-search > #px-d-q-count{ flex:0 0 auto; font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em; color:color-mix(in srgb,var(--ink) 55%,transparent); background:color-mix(in srgb,var(--ink) 6%,transparent); border-radius:3px;padding:2px 7px; } #px-d-search > #px-d-q-count:empty{display:none} /* Narrow: the measure and the mirroring both stop paying for themselves. */ @media(max-width:640px){ #px-d-grid.dl-sidebar-left .thread .brow, #px-d-grid.dl-sidebar-left .thread .brow.mine, #px-d-grid.dl-sidebar-left .thread .brow:not(.mine){ max-width:100%;margin-left:0;margin-right:0; grid-template-columns:32px minmax(0,1fr); } #px-d-grid.dl-sidebar-left .thread .brow .bubble{grid-column:2} #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .avat{grid-column:1} #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .bubble > .who{grid-column:1;text-align:left} #px-d-grid.dl-sidebar-left .thread .brow:not(.mine) .bubble > .at{grid-column:2;text-align:right} #px-d-grid.dl-sidebar-left .thread .avat{width:28px;height:28px;border-radius:6px} } /* ⚠ dl-print-friendly REMOVED FROM BOTH HALVES. It used to be forced to one column and to unpin its side cards — but the unpin was written with three classes and lost to `#px-d-grid.dss-sticky.dss-tall .rq-side > .side-card{position:sticky}` (one id + three), so it never applied and the "flat" layout still had a pinned sidebar. It now takes a real column and pins like the rest, and the sticky-mode machinery governs it. */ /* ⚠ `.rq-grid.dl-single-column{grid-template-columns:1fr}` WAS HERE and is deliberately gone. It was the pre-redesign one-column geometry, dead for a long time because a stray `}` above swallowed it into a prelude — and reviving it (brace fixed 2026-08-02) only revived a contradiction: dl-single-column is now the two-column CASE FILE — search `#px-d-grid.dl-single- column{` for it, do not trust a line number. The id form outranked it (1,1,0) vs (0,2,0) so the real grid never collapsed, but any element carrying `rq-grid dl-single-column` WITHOUT the id — a Studio preview mock, say — would have. This layout's geometry lives with the case file, NOT in this family block; do not re-add a `.rq-grid.dl-single-column` width rule. */ .dl-single-column .rq-side .side-card{position:static} .dl-single-column .rq-side,.dl-tabs .rq-side{order:2} .rq-grid.dl-wide{grid-template-columns:minmax(0,1fr) 340px} .rq-grid.dl-tabs{grid-template-columns:1fr}.dl-tabs .rq-side{display:none} /* ADDITIVE_PORTAL_PREMIUM_2026 — additional ticket-detail compositions. */ .d-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)} .d-tabs button{background:none;border:none;padding:8px 4px;margin-right:14px;font-size:13.5px;font-weight:700;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .d-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)} /* SP3 — attachments v2 */ .att-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);padding:6px 10px;border-radius:10px;color:var(--ink-2)} .att-chip img{width:26px;height:26px;object-fit:cover;border-radius:6px} .att-chip .ax{cursor:pointer;color:var(--ink-3);font-weight:800;padding:0 2px} .att-chip .ax:hover{color:var(--err)} .att-chip .asz{color:var(--ink-3);font-size:10.5px} .att-row.ap-compact .att-chip img{display:none} .att-row.ap-list{display:flex;flex-direction:column;align-items:stretch} .att-row.ap-list .att-chip{width:100%;justify-content:flex-start} .att-row.ap-list .att-chip .ax{margin-left:auto} .px-att-error{font-size:12.5px;color:var(--err);margin-top:8px;line-height:1.45} .px-upload{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;font-weight:700;color:var(--ink-3)} .px-upload-track{height:7px;flex:1;background:var(--line-soft);border-radius:999px;overflow:hidden} .px-upload-track i{display:block;width:0;height:100%;background:var(--accent);border-radius:inherit;transition:width .14s linear} .px-retry{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:14px;padding:16px;border:1px solid color-mix(in srgb,var(--err) 24%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--err) 8%,var(--card)),var(--card) 68%);border-radius:16px;box-shadow:0 16px 36px -28px color-mix(in srgb,var(--err) 78%,transparent),inset 0 1px rgba(255,255,255,.55);overflow:hidden} .px-retry::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--err),color-mix(in srgb,var(--err) 55%,var(--accent)))} .px-retry-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--err);background:color-mix(in srgb,var(--err) 11%,var(--card));border:1px solid color-mix(in srgb,var(--err) 19%,var(--line));box-shadow:0 8px 18px -14px var(--err)} .px-retry-icon svg{width:20px;height:20px} .px-retry-copy{display:flex;flex-direction:column;gap:3px;min-width:0} .px-retry-copy strong{font-size:13.5px;line-height:1.25;color:var(--ink);letter-spacing:-.005em} .px-retry-copy span{font-size:12.25px;line-height:1.5;color:var(--ink-3)} .px-retry-actions{display:flex;align-items:center;gap:7px} .px-retry-actions button{flex:none;min-height:36px;padding:8px 13px;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)} .px-retry-primary{border:1px solid transparent;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-d));box-shadow:0 9px 18px -11px var(--accent)} .px-retry-primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px var(--accent)} .px-retry-secondary{border:1px solid var(--line);color:var(--ink-2);background:color-mix(in srgb,var(--card) 82%,transparent)} .px-retry-secondary:hover{background:var(--line-soft);color:var(--ink)} .brow.px-send-pending{opacity:.72}.brow.px-send-failed{opacity:1} .brow.px-send-failed .bubble{border-color:color-mix(in srgb,var(--err) 34%,var(--line))!important;box-shadow:0 12px 28px -24px var(--err)!important} .px-send-state{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:8px;padding:4px 8px;border-radius:999px;background:var(--line-soft);font-size:10.5px;font-weight:850;line-height:1;color:var(--ink-3);letter-spacing:.015em} .px-send-state::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent)} .px-send-pending .px-send-state::before{animation:pxSendPulse 1.1s ease-in-out infinite} .brow.px-send-failed .px-send-state{color:var(--err);background:color-mix(in srgb,var(--err) 9%,var(--card))} @keyframes pxSendPulse{50%{opacity:.35;transform:scale(.8)}} @media(max-width:760px){.px-retry{grid-template-columns:auto 1fr}.px-retry-actions{grid-column:1/-1}.px-retry-actions button{flex:1}} .dropzone{border:1.5px dashed var(--line);border-radius:13px;padding:11px;text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:10px;transition:.15s var(--ease);cursor:pointer} .dropzone.on,.dropzone:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)} /* SP3 — draft restore banner */ .draftbar{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent) 6%,var(--line-soft));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:12px;padding:10px 14px;font-size:13px;color:var(--ink-2);margin-bottom:14px;animation:pdIn .25s ease} .draftbar .link{margin:0} .draftbar .link+.link{margin-left:8px} /* SP3b — CSAT stars */ .csat-stars button{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--line);transition:transform .12s var(--ease),color .12s var(--ease);padding:2px} .csat-stars button.on{color:#f59e0b} .csat-stars button:hover{transform:scale(1.15)} /* SP3 — SLA expected-reply pill */ .slahint{display:inline-flex;align-items:center;gap:7px;background:#ecfdf5;border:1px solid #bbf7d0;color:#047857;font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 13px;margin-top:12px} /* ═══ SP4b — mature ticket-system IA: pages, breadcrumbs, table, sidebar ═══ */ .pxpage{animation:pdIn .22s ease} #px-wrap{max-width:980px} #pg-new .card,#pg-status .card{max-width:680px} .crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin:4px 0 10px} .crumbs a{color:var(--ink-2);text-decoration:none;font-weight:650} /* PHASE_PORTAL_P21 — touch targets on phones/tablets (plan bar: ≥44px). Measured at 375px: the action buttons all sat at 38–42px (a few px short) and the breadcrumb links at just 19px, well under half. ⚠ THE BUTTONS AND THE LINKS NEED DIFFERENT TREATMENTS. `min-height` is right for a button, but padding a breadcrumb out to 44px would turn a one-line trail into a slab. The crumbs instead get an INVISIBLE hit area via ::after — the tap target reaches 45px while the text keeps its 19px line box, so nothing moves visually. It expands only vertically (left/right pinned to the link), so adjacent crumbs cannot steal each other's taps. This is the standard technique and the only one that satisfies the bar without redesigning the trail. */ @media(max-width:760px){ .btn,.btn-ghost,.rowbtns button,.px-acct-btn,.d-reply-top,.px-skip, .reqfilters button,.link{min-height:44px} /* Same reasoning as the crumbs: `.idchip .idedit` ("Not you?") is a small text button sitting INSIDE the signed-in-as chip — a min-height would stretch the chip itself. */ .crumbs a,.idchip .idedit{position:relative} .crumbs a::after,.idchip .idedit::after{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px} } .crumbs a:hover{color:var(--accent)} .pgtitle{margin:0 0 16px;font-size:24px;font-weight:850;letter-spacing:-.02em;color:var(--ink)} .pgtitle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} .pgtitle-row .pgtitle{margin:0} .btn-inline{width:auto;margin-top:0;padding:11px 20px;font-size:13.5px} .homecta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px} @media(max-width:640px){.homecta{grid-template-columns:1fr}} .cta-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:18px;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .cta-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} .cta-ic{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--line-soft));color:var(--accent)} .cta-tx{flex:1;display:flex;flex-direction:column;gap:2px} .cta-tx b{font-size:14.5px;color:var(--ink)} .cta-tx i{font-style:normal;font-size:12.5px;color:var(--ink-3)} .cta-card .pcatr-arr{color:var(--ink-3)} .cta-card:hover .pcatr-arr{transform:translateX(3px);color:var(--accent)} /* ═══ W6 — department picker (10 styles + My-tickets rail) ═══ */ .dp-wrap{display:block} .dp-wrap.has-rail{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start} .dp-wrap.has-rail.rail-right{grid-template-columns:minmax(0,1fr) 260px} .dp-wrap.has-rail.rail-right .dp-rail{order:2} @media(max-width:760px){.dp-wrap.has-rail,.dp-wrap.has-rail.rail-right{grid-template-columns:1fr}} .dp-rail{padding:18px 16px;position:sticky;top:calc(var(--px-navh,0px) + 13px)} .px-greet-home{max-width:var(--px-page-w,1320px);margin:0 auto;padding:22px 20px 0} .px-greet-home.hidden{display:none} .rq-rail-extra{display:flex;flex-direction:column} .dp-rail-title{font-size:15px;font-weight:850;letter-spacing:-.02em;margin:0 0 13px;padding-bottom:12px;border-bottom:1px solid var(--line)} .dp-rail-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:700;font-size:13.5px;color:var(--ink-2);transition:.14s var(--ease)} .dp-rail-link svg{color:var(--accent)} /* Icon-font links (Font Awesome etc.) sit in the same 17px slot as the inline SVGs, so a mixed list still lines up down the left edge. */ .dp-rail-link i{color:var(--accent);font-size:15px;width:17px;text-align:center;flex:none} .dp-rail-link:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)} .dp-rail-cta{color:var(--accent)} .dp-ic{flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--line-soft))} .dp-nm{font-weight:800;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0} .dp-ds{font-size:13px;color:var(--ink-3);line-height:1.45;margin-top:3px;display:block} .dp-lock{font-size:12px} .dp-badges{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:2px;min-width:0;max-width:100%} .dp-badge{display:inline-flex;align-items:center;min-height:20px;padding:3px 7px;border-radius:999px;font-size:9.5px;font-weight:850;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap} .dp-badges.dbs-soft .dp-badge{background:color-mix(in srgb,var(--accent) 9%,var(--line-soft));color:var(--accent)} .dp-badges.dbs-outline .dp-badge{background:transparent;color:var(--ink-2);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))} .dp-badges.dbs-solid .dp-badge{background:var(--accent);color:#fff} .dp-badge.dp-access{color:#b45309!important;background:color-mix(in srgb,#f59e0b 13%,var(--card))!important} .px-flow-progress{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card));font-size:11.5px;font-weight:800;color:var(--ink-3)} .px-flow-progress .pf-step{display:inline-flex;align-items:center;gap:6px}.px-flow-progress .pf-step b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--line-soft);color:var(--ink-3);font-size:10px} .px-flow-progress .pf-step.done{color:var(--ok)}.px-flow-progress .pf-step.done b{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)} .px-flow-progress .pf-step.now{color:var(--accent)}.px-flow-progress .pf-step.now b{background:var(--accent);color:#fff} .px-flow-progress .pf-line{height:1px;flex:1;max-width:34px;background:color-mix(in srgb,var(--accent) 28%,var(--line))} .px-flow-progress .pf-change{margin-left:auto;border:0;background:transparent;color:var(--accent);font:inherit;cursor:pointer;padding:4px} #p-new-form .px-invalid{border-color:var(--err)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 11%,transparent)!important} @media(max-width:560px){.px-flow-progress{flex-wrap:wrap}.px-flow-progress .pf-change{width:100%;text-align:left;margin-left:28px}} .dp-arr{color:var(--ink-3);transition:transform .16s var(--ease),color .16s var(--ease);flex-shrink:0} /* cards / grid */ .dp-cards{display:grid;gap:14px}.dp-g{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.dp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.dp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.dp-g4{grid-template-columns:repeat(4,minmax(0,1fr))} /* PHASE_PORTAL_DEPT — department filter box */ .dp-search{margin-bottom:14px} .dp-search input{width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:14px;font-family:inherit} .dp-search input:focus{outline:none;border-color:var(--accent)} @media(max-width:640px){.dp-g2,.dp-g3{grid-template-columns:1fr}} .dp-card{display:flex;align-items:center;gap:14px;min-width:0;max-width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .dp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))} .dp-card:hover .dp-arr{transform:translateX(3px);color:var(--accent)} .dp-body{flex:1;min-width:0} /* list */ .dp-list{display:flex;flex-direction:column;gap:8px} .dp-row{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px;cursor:pointer;transition:border-color .16s var(--ease),transform .16s var(--ease)} .dp-row:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line));transform:translateX(2px)} .dp-row .dp-tx{flex:1}.dp-row:hover .dp-arr{color:var(--accent);transform:translateX(2px)} /* COMPACT LIST — icon + name only, in one bordered block with hairline dividers instead of separate cards. For the common case of a handful of departments, where badges and descriptions are noise. */ .dp-list-compact{gap:0;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--card);overflow:hidden} /* --line-soft is tuned for large quiet surfaces and vanishes as a 1px rule between rows, so the compact list derives its own divider from --ink. */ .dp-list-compact .dp-row{border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:0; padding:13px 16px;gap:11px;background:transparent} .dp-list-compact .dp-row:last-child{border-bottom:0} /* TWO PER ROW — same compact row, two columns. The vertical rule between the pair comes from the odd cell; the last row drops its bottom rule, and with an ODD number of departments the final cell spans both columns so the block never ends with a half-empty gap. */ .dp-list-compact.dp-lc2{display:grid;grid-template-columns:1fr 1fr} .dp-list-compact.dp-lc2 .dp-row:nth-child(odd){border-right:1px solid color-mix(in srgb,var(--ink) 13%,transparent)} .dp-list-compact.dp-lc2 .dp-row:nth-last-child(-n+2){border-bottom:0} .dp-list-compact.dp-lc2 .dp-row:nth-last-child(2):nth-child(odd){border-bottom:1px solid color-mix(in srgb,var(--ink) 13%,transparent)} .dp-list-compact.dp-lc2 .dp-row:last-child:nth-child(odd){grid-column:1/-1;border-right:0} @media(max-width:640px){.dp-list-compact.dp-lc2{grid-template-columns:1fr} .dp-list-compact.dp-lc2 .dp-row{border-right:0!important}} .dp-list-compact .dp-row:hover{transform:none;background:color-mix(in srgb,var(--accent) 5%,transparent)} .dp-list-compact .dp-nm{font-size:14.5px;font-weight:650} /* the icon tile shrinks to a glyph so the row stays one line tall */ .dp-list-compact .dp-ic{width:22px;height:22px;border-radius:6px;background:transparent;color:var(--accent)} .dp-list-compact .dp-ic svg{width:17px;height:17px} /* ── SUPPORT HOURS CARD (department picker rail) ───────────────────────── Surface, radius and type all ride the design tokens, so a Studio brand or radius change carries. The two badge colours are operator settings with a neutral fallback — the renderer sets them inline when chosen. */ .dp-hours{margin-top:14px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--card)} .dp-hours-t{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px; padding-bottom:10px;border-bottom:1px solid var(--line-soft,var(--line))} .dp-hours-time{font-size:17px;font-weight:750;color:var(--ink);letter-spacing:-.01em} .dp-hours-days{margin-top:3px;font-size:12.5px;font-weight:650;color:var(--ink-2)} .dp-hours-tz{margin-top:2px;font-size:12px;color:var(--ink-3)} .dp-hours-badge{display:block;margin-top:12px;padding:9px 12px;border-radius:var(--r-md,10px); text-align:center;font-size:11.5px;font-weight:850;letter-spacing:.08em;color:#fff} .dp-hours-badge.is-open{background:#16a34a} .dp-hours-badge.is-closed{background:#dc2626} .dp-hours-note{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink-3)} /* pills */ /* ── ULTRA GLASS TILES (grid-4) ────────────────────────────────────────── Frosted glass only reads as glass when there is something BEHIND it, so the grid paints its own field of soft brand-tinted orbs and the tiles float on top of it. Every colour derives from --accent/--ink, so this follows the workspace brand rather than shipping a fixed purple. */ /* No outer panel: the tiles sit directly on the page. The frosted effect still works because backdrop-filter blurs whatever the PAGE background is, so the glass picks up the operator's own backdrop instead of a field this style painted for itself. */ .dp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dp-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px; min-height:142px;padding:22px 12px;text-align:center;cursor:pointer;overflow:hidden; border:1px solid color-mix(in srgb,#fff 55%,transparent); border-radius:calc(var(--r-lg,14px) + 4px); background:linear-gradient(150deg, color-mix(in srgb,#fff 62%,transparent), color-mix(in srgb,#fff 26%,transparent)); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -18px 34px -22px color-mix(in srgb,var(--accent) 55%,transparent), 0 2px 6px -2px rgba(2,6,23,.14),0 16px 34px -16px color-mix(in srgb,var(--accent) 45%,transparent); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s var(--ease),border-color .28s var(--ease)} /* a light sweep that crosses the glass on hover */ .dp-tile::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);transition:left .55s cubic-bezier(.2,.8,.2,1)} .dp-tile:hover::after{left:120%} .dp-tile:hover{transform:translateY(-6px) scale(1.015); border-color:color-mix(in srgb,#fff 80%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -22px 40px -22px color-mix(in srgb,var(--accent) 65%,transparent), 0 4px 10px -3px rgba(2,6,23,.16),0 30px 56px -20px color-mix(in srgb,var(--accent) 60%,transparent)} .dp-tile:active{transform:translateY(-2px) scale(1.005)} /* the icon floats above the glass with its own coloured glow */ .dp-tile-ic{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:16px;color:#fff; background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 92%,#fff),color-mix(in srgb,var(--accent) 62%,var(--ink))); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(2,6,23,.28), 0 8px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s var(--ease)} .dp-tile:hover .dp-tile-ic{transform:translateY(-3px) scale(1.06) rotate(-3deg); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 26px -8px color-mix(in srgb,var(--accent) 80%,transparent)} .dp-tile-ic svg{width:23px;height:23px} .dp-tile-ic .dp-ic{width:52px;height:52px;background:transparent;color:#fff} .dp-tile-nm{font-size:13.5px;font-weight:750;line-height:1.35;color:var(--ink);letter-spacing:-.01em} .dp-tile-lock{position:absolute;top:10px;right:11px;font-size:11px;opacity:.6} /* Dark: a white sheen would look like a scratch, and the glass tints to ink. */ [data-theme="dark"] .dp-tile,.px-dark .dp-tile{ border-color:color-mix(in srgb,#fff 14%,transparent); background:linear-gradient(150deg,color-mix(in srgb,#fff 12%,transparent),color-mix(in srgb,#fff 4%,transparent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px -2px rgba(0,0,0,.5),0 18px 36px -16px rgba(0,0,0,.75)} [data-theme="dark"] .dp-tile::after,.px-dark .dp-tile::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)} /* Respect a reduced-motion preference: keep the depth, drop the movement. */ @media(prefers-reduced-motion:reduce){ .dp-tile,.dp-tile-ic{transition:none} .dp-tile:hover{transform:none} .dp-tile:hover .dp-tile-ic{transform:none} .dp-tile::after{display:none} } @media(max-width:860px){.dp-tiles{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.dp-tiles{grid-template-columns:repeat(2,1fr)}} /* ── ICON COLUMN (icon-3) — NO card chrome at all. Icon on top, name, then the description. Three per row. For enterprises that want the information without the boxes. ─────────────────────────────────────────────────────── */ .dp-icol{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)} .dp-icol-it{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0; background:none;border:0;text-align:center;cursor:pointer} .dp-icol-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px; background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);transition:.16s var(--ease)} .dp-icol-ic svg{width:19px;height:19px} .dp-icol-ic .dp-ic{width:38px;height:38px;background:transparent} .dp-icol-nm{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:750;color:var(--ink);letter-spacing:-.01em} .dp-icol-ds{max-width:34ch;font-size:13px;line-height:1.6;color:var(--ink-3)} .dp-icol-it:hover .dp-icol-nm{color:var(--accent)} .dp-icol-it:hover .dp-icol-ic{background:color-mix(in srgb,var(--accent) 18%,transparent)} @media(max-width:860px){.dp-icol{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.dp-icol{grid-template-columns:1fr}} .dp-pills{display:flex;flex-wrap:wrap;gap:10px} /* inline-flex + auto width is what makes these read as CHIPS rather than as narrow cards; the icon shrinks to a glyph so the pill stays one line tall */ .dp-pill{display:inline-flex;align-items:center;gap:9px;width:auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:.15s var(--ease)} .dp-pill-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;color:var(--accent)} .dp-pill-ic svg{width:17px;height:17px} .dp-pill-ic .dp-ic{width:20px;height:20px;background:transparent;border-radius:0} .dp-pill-nm{white-space:nowrap} .dp-pill-lock{font-size:11px;opacity:.6} .dp-pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} /* mega */ .dp-mega{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .dp-mega-card{display:flex;flex-direction:column;gap:10px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .dp-mega-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 34%,var(--line))} .dp-mega-card .dp-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--accent);margin-top:4px} /* dropdown */ /* ── DROPDOWN — a real listbox, heavily styled ─────────────────────────── A native