/* ============================================================================
AIToolsay — Blog Discussion (native comments) · §EZCBRAND (2026-09-13)
Scope: .ezc • View: livewire/public/blog-comments.blade.php
Also worn verbatim by the news story page (news/article.blade.php).
----------------------------------------------------------------------------
WHY THIS FILE EXISTS
The view links this sheet from its LAST line, not from . Equal-
specificity rules are resolved by document order, so a rule here beats the
same-weight rule in custom.*.css. Moving the flips every one of those
ties — don't.
BRANDING — the homepage kit, nothing else
Every colour below is a homepage token (homepage.css `.hpx`, dark-system.css):
brand #3680ED · 600 #2060C0 · 700 #1B4E9C · small-text ink #1B5BB5
light: ink #0B1220 · ink-2 #3D4757 · ink-3 #6B7686 · line #E7ECF3 · card #fff
dark : the --dk-* palette (card #17171B on canvas #0E0E11, ink #F4F5F7)
Filled controls use the homepage's `--sc-fill` recipe (brand → 600 → 700,
a scrim by night) so the submit here IS the hero search button. The previous
sheet's purple top edge, six rainbow avatar tints and the red/orange hover
fills are gone — avatars, hovers and edges all live in the blue family now.
CONTRAST RULES OBSERVED HERE
• #3680ED measures 3.84:1 on white — it is NEVER used for text under 18px.
Small brand text takes --ez-brand-ink (#1B5BB5, 6.3:1); by night #60A4F5
(6.9:1 on #17171B). The raw brand blue is for fills, borders, glows.
• Every colour rule has a `body.theme-dark` twin. Opaque brand fills carrying
white glyphs do NOT lighten by night — the scrim in --ez-fill deepens them.
• No hover state ever paints text the colour of the surface behind it. Fills
and inks change together, in the same rule.
LAYOUT
100% of the article column, aligned with the article card. Sized by
CONTAINER queries on `.ezc` (named `ezc`), because the same block sits in a
~1400px column on a sidebar-less article and a ~700px one beside a sidebar.
========================================================================== */
.ezc {
/* Brand */
--ez-brand: #3680ED;
--ez-brand-600: #2060C0;
--ez-brand-700: #1B4E9C;
--ez-brand-ink: #1B5BB5; /* small text on light surfaces (AA) */
--ez-brand-lite: #60A4F5; /* dark-theme ink + glyphs */
--ez-tint: #EAF2FD;
--ez-tint-2: #F4F8FE;
--ez-tint-line: #CFE0FA;
--ez-fill: linear-gradient(135deg, #357FEC 0%, #2B6BCC 30%, #1B4E9C 100%);
--ez-glow: rgba(53,127,236,.40);
/* Ink + surface */
--ez-ink: #0B1220;
--ez-txt: #3D4757;
--ez-mut: #6B7686;
--ez-line: #E7ECF3;
--ez-line-2: #D6DEE9;
--ez-card: #ffffff;
--ez-well: #F7F9FC;
--ez-well-2: #F1F4F9;
/* Semantic — status notes and validation only; never decoration */
--ez-ok: #16884E;
--ez-ok-bg: #EAF7F0;
--ez-ok-line: #C3E7D4;
--ez-warn: #A8560A;
--ez-danger: #C93B48;
/* Shape + depth */
--ez-r: 22px;
--ez-r-sm: 16px;
--ez-r-xs: 14px;
--ez-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
--ez-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px -14px rgba(16,24,40,.20);
--ez-shadow-lift: 0 2px 6px rgba(16,24,40,.06), 0 18px 44px -18px rgba(54,128,237,.35);
--ez-ring: 0 0 0 4px rgba(54,128,237,.16);
--ez-ease: cubic-bezier(.22,.61,.36,1);
max-width: 100%;
margin: 46px 0 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--ez-txt);
-webkit-font-smoothing: antialiased;
scroll-margin-top: 90px; /* #comments anchor clears the navbar */
/* Sizing context for §RESPONSIVE. Named, so those queries can never resolve
against .premium-article-shell, which is also an inline-size container. */
container: ezc / inline-size;
}
.ezc *, .ezc *::before, .ezc *::after { box-sizing: border-box; }
/* The article body sheet paints an animated underline on every and strips
button outlines site-wide. Nothing in this component is a prose link, so the
reset is blanket and each control owns its own states below. */
.ezc a { text-decoration: none; }
/* ============================================================================
§HEAD — icon plate + title + count + "newest first" hint
The plate is the homepage's house plate: a SOLID brand fill with a white
glyph, a top-light sheen and a glow in the fill's own colour.
========================================================================== */
.ezc-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 20px;
}
.ezc-head-ic {
flex: 0 0 auto;
width: 50px; height: 50px;
display: grid; place-items: center;
border-radius: 15px;
color: #fff;
background-color: var(--ez-brand-600);
background-image: var(--ez-fill);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 0 0 1px rgba(255,255,255,.1),
0 10px 22px -10px var(--ez-glow);
}
.ezc-head-ic svg { width: 24px; height: 24px; }
.ezc-head-tx { min-width: 0; flex: 1 1 auto; }
.ezc-head h2 {
font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.2;
color: var(--ez-ink);
margin: 0 0 5px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ezc-count {
background: var(--ez-tint);
color: var(--ez-brand-ink);
border: 1px solid var(--ez-tint-line);
font-size: .78rem; font-weight: 800;
line-height: 1;
padding: 5px 11px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.ezc-head p { font-size: .9rem; line-height: 1.5; color: var(--ez-mut); margin: 0; }
.ezc-head-sort {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
margin-top: 4px;
padding: 6px 12px;
border: 1px solid var(--ez-line);
border-radius: 999px;
background: var(--ez-well);
color: var(--ez-mut);
font-size: .76rem; font-weight: 600;
white-space: nowrap;
}
.ezc-head-sort svg { width: 13px; height: 13px; }
/* ============================================================================
§FORM CARD
A white card with a 3px brand edge on top (brand → light brand → nothing)
and a soft blue wash under it — the same "this is ours" cue the article
hero and the sidebar cards carry. `overflow:hidden` clips both.
========================================================================== */
.ezc-form-card {
position: relative;
overflow: hidden;
background: var(--ez-card);
border: 1px solid var(--ez-line);
border-radius: var(--ez-r);
padding: 22px;
box-shadow: var(--ez-shadow);
margin-bottom: 30px;
transition: border-color .25s var(--ez-ease), box-shadow .25s var(--ez-ease);
}
.ezc-form-card::before {
content: "";
position: absolute;
inset-inline: 0; inset-block-start: 0;
block-size: 3px;
background: linear-gradient(90deg, var(--ez-brand-600) 0%, var(--ez-brand) 38%, var(--ez-brand-lite) 68%, rgba(96,164,245,0) 100%);
}
.ezc-form-card::after {
content: "";
position: absolute;
inset: 3px 0 auto 0;
block-size: 180px;
background: radial-gradient(120% 130% at 0% 0%, rgba(54,128,237,.10) 0%, rgba(54,128,237,0) 60%);
pointer-events: none;
}
/* Everything inside has to sit above the wash. */
.ezc-form-card > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.ezc-form-card:hover { border-color: var(--ez-tint-line); box-shadow: var(--ez-shadow-lift); }
}
.ezc-form-top {
display: flex; flex-direction: column; gap: 14px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--ez-line);
}
.ezc-form-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ezc-form-ava {
flex: 0 0 auto;
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 50%;
color: #fff;
font-size: 1.05rem; font-weight: 800;
background-color: var(--ez-brand-600);
background-image: var(--ez-fill);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.3),
0 0 0 3px var(--ez-card),
0 0 0 4.5px var(--ez-tint-line);
}
.ezc-form-ava svg { width: 20px; height: 20px; }
.ezc-form-top-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ezc-form-top-tx b { font-size: 1rem; font-weight: 800; color: var(--ez-ink); letter-spacing: -.015em; }
.ezc-form-top-tx small { font-size: .78rem; color: var(--ez-mut); }
/* Rail cues (wide layout only — switched on in the 880px container block). */
.ezc-tips { display: none; list-style: none; margin: 2px 0 0; padding: 0; flex-direction: column; gap: 10px; }
.ezc-tips li { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; line-height: 1.45; color: var(--ez-txt); min-width: 0; }
.ezc-tips li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ezc-tips-ic {
display: grid; place-items: center;
width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
border-radius: 50%;
background: var(--ez-tint);
color: var(--ez-brand-ink);
box-shadow: inset 0 0 0 1px var(--ez-tint-line);
}
.ezc-tips-ic svg { width: 10px; height: 10px; }
/* The moderation note is a glass chip — the hero's badge, in miniature. */
.ezc-fine {
display: inline-flex; align-items: center; gap: 8px;
align-self: flex-start;
margin: 0;
padding: 7px 12px 7px 9px;
border-radius: 999px;
background: var(--ez-tint-2);
border: 1px solid var(--ez-tint-line);
font-size: .76rem; font-weight: 600; line-height: 1.35; color: var(--ez-brand-ink);
min-width: 0;
}
.ezc-fine svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ez-brand-ink); }
.ezc-fine span { min-width: 0; overflow-wrap: anywhere; }
/* ── Status notes ─────────────────────────────────────────────────────────── */
.ezc-note {
display: flex; align-items: flex-start; gap: 10px;
background: var(--ez-tint-2);
border: 1px solid var(--ez-tint-line);
color: var(--ez-brand-ink);
font-size: .855rem; font-weight: 600; line-height: 1.5;
padding: 11px 14px;
border-radius: var(--ez-r-xs);
margin-bottom: 15px;
}
.ezc-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.ezc-note--ok { background: var(--ez-ok-bg); border-color: var(--ez-ok-line); color: var(--ez-ok); }
/* ── Replying-to chip ─────────────────────────────────────────────────────── */
.ezc-replying {
display: flex; align-items: center; gap: 9px;
font-size: .83rem;
color: var(--ez-txt);
background: var(--ez-tint-2);
border: 1px solid var(--ez-tint-line);
border-radius: var(--ez-r-xs);
padding: 9px 10px 9px 13px;
margin-bottom: 14px;
}
.ezc-replying > svg { width: 15px; height: 15px; color: var(--ez-brand-ink); flex: 0 0 auto; }
.ezc-replying > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezc-replying b { color: var(--ez-brand-ink); font-weight: 800; }
.ezc-replying button {
margin-inline-start: auto;
flex: 0 0 auto;
display: grid; place-items: center;
width: 28px; height: 28px;
background: var(--ez-card);
border: 1px solid var(--ez-tint-line);
color: var(--ez-brand-ink);
border-radius: 9px;
cursor: pointer;
transition: background .18s var(--ez-ease), color .18s var(--ez-ease),
border-color .18s var(--ez-ease), transform .18s var(--ez-ease);
}
.ezc-replying button svg { width: 12px; height: 12px; }
.ezc-replying button:hover {
background: var(--ez-brand-600);
border-color: var(--ez-brand-600);
color: #fff;
transform: rotate(90deg);
}
/* ============================================================================
§FIELDS
The icon lives in the wrapper, not the input, so the focus ring can wrap
both. The input itself is transparent and border-less — all chrome is on
`.ezc-input`, which is what makes the ring a single clean shape.
Rest: a soft well. Hover: the well lifts to white with a brand-line edge.
Focus: brand edge + ring, icon turns brand. Three states, three looks.
========================================================================== */
.ezc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Signed-in visitors get no email field (@guest), leaving ONE child in a
two-track grid — collapse to a single track so the field fills the card. */
.ezc-form-row:has(> .ezc-field:only-child) { grid-template-columns: 1fr; }
.ezc-field { margin-bottom: 14px; min-width: 0; }
.ezc-form-row .ezc-field { margin-bottom: 0; }
.ezc-form-row + .ezc-field { margin-top: 14px; }
.ezc-label {
display: block;
font-size: .8rem; font-weight: 700;
letter-spacing: .005em;
color: var(--ez-ink);
margin-bottom: 7px;
}
.ezc-label span { font-weight: 500; color: var(--ez-mut); }
.ezc-input {
position: relative;
display: flex; align-items: center;
background: var(--ez-well);
border: 1.5px solid var(--ez-line-2);
border-radius: var(--ez-r-xs);
transition: border-color .18s var(--ez-ease), box-shadow .18s var(--ez-ease),
background .18s var(--ez-ease);
}
.ezc-input:hover { border-color: var(--ez-tint-line); background: var(--ez-card); }
.ezc-input:focus-within {
background: var(--ez-card);
border-color: var(--ez-brand);
box-shadow: var(--ez-ring);
}
.ezc-input.is-bad { border-color: var(--ez-danger); }
.ezc-input.is-bad:focus-within { box-shadow: 0 0 0 4px rgba(201,59,72,.15); }
.ezc-input-ic {
width: 17px; height: 17px;
flex: 0 0 auto;
margin-inline-start: 14px;
color: var(--ez-mut);
transition: color .18s var(--ez-ease);
}
.ezc-input:focus-within .ezc-input-ic { color: var(--ez-brand-ink); }
.ezc-input input,
.ezc-input textarea {
width: 100%;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
padding: 13px 14px;
/* 16px on the nose: anything smaller makes iOS Safari zoom the viewport when
the field takes focus, which then leaves the page scrolled sideways. */
font-size: 16px;
line-height: 1.5;
color: var(--ez-ink);
font-family: inherit;
}
.ezc-input input { padding-inline-start: 10px; }
.ezc-input input::placeholder,
.ezc-input textarea::placeholder { color: #98A2B3; }
.ezc-input--area { display: block; padding-bottom: 30px; }
.ezc-input textarea { resize: vertical; min-height: 128px; display: block; }
/* The counter is a chip, not loose text, so it reads on the well and the
white field alike. */
.ezc-counter {
position: absolute;
inset-inline-end: 10px; inset-block-end: 9px;
padding: 3px 8px;
border-radius: 999px;
background: var(--ez-well-2);
font-size: .7rem; font-weight: 700;
color: var(--ez-mut);
font-variant-numeric: tabular-nums;
pointer-events: none;
transition: color .18s var(--ez-ease), background .18s var(--ez-ease);
}
.ezc-counter.is-near { color: var(--ez-warn); background: #FBF3E4; }
.ezc-input input[readonly] {
color: var(--ez-txt);
cursor: default;
}
/* A read-only field must not advertise an interaction it does not have. */
.ezc-field:has(input[readonly]) .ezc-input:hover { border-color: var(--ez-line-2); background: var(--ez-well); }
.ezc-err {
display: flex; align-items: center; gap: 5px;
color: var(--ez-danger);
font-size: .76rem; font-weight: 600;
margin-top: 6px;
}
/* ============================================================================
§FORM FOOTER + SUBMIT
The submit is the homepage's filled control: `--ez-fill`, a pill, the inset
top-light, a glow in the fill's own blue. Hover lifts it 2px and sweeps a
sheen across the face — an overlay, so the label keeps the same contrast
hovered as at rest. The sheen is a pseudo-element on an `overflow:hidden`
button, so it can never escape the pill or intercept the click.
========================================================================== */
.ezc-form-foot {
display: flex; align-items: center; justify-content: flex-end;
gap: 14px; flex-wrap: wrap;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--ez-line);
}
.ezc-submit {
position: relative;
overflow: hidden;
flex: 0 0 auto;
display: inline-grid; /* both spans stack in one cell */
place-items: center;
min-height: 48px;
background-color: var(--ez-brand-600);
background-image: var(--ez-fill);
color: #fff;
border: 0;
border-radius: 999px;
padding: 12px 26px;
font-size: .92rem; font-weight: 700;
font-family: inherit;
letter-spacing: -.005em;
line-height: 1.2;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 0 0 1px rgba(255,255,255,.1),
0 2px 6px -2px rgba(11,18,32,.22),
0 12px 28px -10px var(--ez-glow);
transition: transform .22s var(--ez-ease), box-shadow .22s var(--ez-ease),
filter .22s var(--ez-ease);
}
.ezc-submit-in {
grid-area: 1 / 1;
display: inline-flex; align-items: center; gap: 9px;
white-space: nowrap;
position: relative; z-index: 1;
}
/* Livewire v2 only toggles this span's inline `display` when a request STARTS
and ENDS — it does not hide it on first paint. Both spans share one grid
cell, so without this the button renders "Posting…" stacked on top of
"Post Comment" until the first round trip. (0,2,0) so it beats the (0,1,0)
rule above outright; Livewire's inline `display:inline-flex` still wins
while a request is in flight, which is exactly the behaviour we want. */
.ezc-submit-in.ezc-submit-load { display: none; }
.ezc-submit svg { width: 16px; height: 16px; transition: transform .22s var(--ez-ease); }
.ezc-submit::after {
content: "";
position: absolute; inset-block: 0;
inset-inline-start: -60%;
inline-size: 45%;
background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
transform: skewX(-18deg);
transition: inset-inline-start .55s var(--ez-ease);
pointer-events: none;
}
.ezc-submit:hover {
transform: translateY(-2px);
filter: saturate(1.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 0 0 1px rgba(255,255,255,.12),
0 4px 10px -4px rgba(11,18,32,.26),
0 18px 34px -12px var(--ez-glow);
}
.ezc-submit:hover::after { inset-inline-start: 115%; }
.ezc-submit:hover svg { transform: translate(2px,-2px); }
.ezc-submit:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -8px var(--ez-glow); }
.ezc-submit:disabled { opacity: .62; cursor: not-allowed; transform: none; filter: none; }
.ezc-submit:disabled::after { display: none; }
/* `display` is explicit, not inherited from the flex parent: a bare is
`display:inline`, and width/height/border simply do not apply to an inline
non-replaced box — the ring would collapse the moment anything (a Livewire
display override, a print sheet) took the flex context away. */
.ezc-spin {
display: inline-block;
vertical-align: middle;
width: 15px; height: 15px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
animation: ezc-spin .7s linear infinite;
}
@keyframes ezc-spin { to { transform: rotate(360deg); } }
/* The site-wide `body:not(.admin-shell) button:focus-visible` reset strips
outlines from every button, so these need the same prefix or they have NO
visible keyboard state. */
body:not(.admin-shell) .ezc button:focus-visible,
body:not(.admin-shell) .ezc a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ez-card), 0 0 0 5px var(--ez-brand);
}
/* ============================================================================
§AVATAR TINTS
Six plates, picked from the name with crc32 in the view so a commenter keeps
the same one on every render — but all six now live in the brand's own blue
family (the old ramp ran purple, teal, brown, red and green, which is what
made a commenter's initial read as an alien colour). Every plate's LIGHT end
still clears 3:1 against the white glyph, which is what one large bold
letter needs; the sheen supplies the top-light.
========================================================================== */
.ezc-tint-0 { background-image: linear-gradient(135deg, #3680ED 0%, #2060C0 100%); }
.ezc-tint-1 { background-image: linear-gradient(135deg, #357FEC 0%, #2B6BCC 40%, #1B4E9C 100%); }
.ezc-tint-2 { background-image: linear-gradient(135deg, #4A8FE8 0%, #2F6FD8 55%, #1B5BB5 100%); }
.ezc-tint-3 { background-image: linear-gradient(135deg, #2B6BCC 0%, #1B4E9C 100%); }
.ezc-tint-4 { background-image: linear-gradient(135deg, #3680ED 0%, #1B347F 100%); }
.ezc-tint-5 { background-image: linear-gradient(135deg, #2F6FD8 0%, #1B4E9C 60%, #12326B 100%); }
/* ============================================================================
§LIST + COMMENT CARD
========================================================================== */
.ezc-list { display: flex; flex-direction: column; gap: 16px; }
.ezc-thread { display: flex; flex-direction: column; }
.ezc-c { display: flex; gap: 14px; align-items: flex-start; }
.ezc-ava {
width: 44px; height: 44px;
flex: 0 0 auto;
border-radius: 50%;
color: #fff;
font-size: 1.05rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
background-color: var(--ez-brand-600);
box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 3px var(--ez-card), 0 6px 14px -8px rgba(27,78,156,.55);
transition: transform .22s var(--ez-ease), box-shadow .22s var(--ez-ease);
}
.ezc-c-main {
flex: 1 1 auto;
min-width: 0;
position: relative;
background: var(--ez-card);
border: 1px solid var(--ez-line);
border-radius: var(--ez-r-sm);
padding: 15px 17px;
box-shadow: var(--ez-shadow-sm);
transition: border-color .22s var(--ez-ease), box-shadow .22s var(--ez-ease),
transform .22s var(--ez-ease);
}
/* The little notch that ties the bubble back to its avatar. */
.ezc-c-main::before {
content: "";
position: absolute;
inset-block-start: 16px;
inset-inline-start: -6px;
width: 10px; height: 10px;
background: var(--ez-card);
border-inline-start: 1px solid var(--ez-line);
border-block-start: 1px solid var(--ez-line);
transform: rotate(-45deg);
transition: border-color .22s var(--ez-ease);
}
.ezc-c-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.ezc-c-name { font-size: .9rem; font-weight: 800; color: var(--ez-ink); letter-spacing: -.01em; }
.ezc-c-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ez-line-2); flex: 0 0 auto; }
.ezc-c-date { font-size: .76rem; color: var(--ez-mut); }
.ezc-c-body {
font-size: .91rem; line-height: 1.68;
color: var(--ez-txt);
margin: 0 0 12px;
white-space: pre-line;
overflow-wrap: anywhere; /* a pasted URL can't widen the card */
}
/* ── Action pills ─────────────────────────────────────────────────────────── */
.ezc-c-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ezc-act {
display: inline-flex; align-items: center; gap: 6px;
background: var(--ez-well);
border: 1px solid var(--ez-line);
border-radius: 999px;
padding: 7px 12px;
color: var(--ez-mut);
font-size: .765rem; font-weight: 700;
font-family: inherit;
line-height: 1;
cursor: pointer;
transition: color .18s var(--ez-ease), background .18s var(--ez-ease),
border-color .18s var(--ez-ease), transform .18s var(--ez-ease),
box-shadow .18s var(--ez-ease);
}
.ezc-act svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .18s var(--ez-ease), fill .18s var(--ez-ease); }
.ezc-act span { font-variant-numeric: tabular-nums; }
/* Like: the brand tint, and the heart fills — a warm-up, not an alarm. */
.ezc-act--like:hover {
color: var(--ez-brand-ink);
background: var(--ez-tint);
border-color: var(--ez-tint-line);
transform: translateY(-2px);
box-shadow: 0 8px 16px -8px rgba(54,128,237,.55);
}
.ezc-act--like:hover svg { fill: currentColor; transform: scale(1.12); }
/* Reply: the filled control — this is the action the row is for. */
.ezc-act--reply:hover {
color: #fff;
background-color: var(--ez-brand-600);
background-image: var(--ez-fill);
border-color: transparent;
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 16px -8px var(--ez-glow);
}
.ezc-act--report {
margin-inline-start: auto;
padding: 7px 10px;
}
/* Report: quiet — a firmer neutral, never a red or orange. */
.ezc-act--report:hover {
color: var(--ez-ink);
background: var(--ez-well-2);
border-color: var(--ez-line-2);
transform: translateY(-2px);
box-shadow: 0 8px 16px -10px rgba(16,24,40,.25);
}
/* The label is VISIBLE by default, at every width and on every input type;
only the <=380px tier drops it, and there the button keeps aria-label. */
.ezc-act-tx { display: inline; }
@media (hover: hover) and (pointer: fine) {
.ezc-c:hover .ezc-c-main {
border-color: var(--ez-tint-line);
box-shadow: var(--ez-shadow-lift);
transform: translateY(-2px);
}
.ezc-c:hover .ezc-c-main::before { border-color: var(--ez-tint-line); }
.ezc-c:hover .ezc-ava { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 3px var(--ez-card), 0 0 0 5px var(--ez-tint-line), 0 8px 18px -8px rgba(27,78,156,.6); }
}
/* ── Replies ──────────────────────────────────────────────────────────────── */
.ezc-replies {
position: relative;
margin-top: 16px;
margin-inline-start: 22px;
padding-inline-start: 26px;
display: flex; flex-direction: column; gap: 14px;
}
/* A single rounded rail instead of a hard border, so the thread reads as one
branch rather than a stack of unrelated cards. */
.ezc-replies::before {
content: "";
position: absolute;
inset-block: -4px 18px;
inset-inline-start: 0;
inline-size: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--ez-brand-lite), var(--ez-tint-line) 60%, var(--ez-line));
}
.ezc-c--reply .ezc-ava { width: 36px; height: 36px; font-size: .9rem; }
.ezc-c--reply .ezc-c-main { padding: 13px 15px; border-radius: 13px; }
.ezc-c--reply .ezc-c-body { font-size: .875rem; }
/* ============================================================================
§EMPTY STATE
========================================================================== */
.ezc-empty {
text-align: center;
padding: 46px 24px;
border: 1.5px dashed var(--ez-tint-line);
border-radius: var(--ez-r);
background:
radial-gradient(120% 100% at 50% 0%, rgba(54,128,237,.08), rgba(54,128,237,0) 62%),
var(--ez-well);
}
.ezc-empty-ic {
display: inline-grid; place-items: center;
width: 62px; height: 62px;
margin-bottom: 16px;
border-radius: 18px;
color: #fff;
background-color: var(--ez-brand-600);
background-image: var(--ez-fill);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -12px var(--ez-glow);
}
.ezc-empty-ic svg { width: 28px; height: 28px; }
.ezc-empty-t { font-size: 1.05rem; font-weight: 800; color: var(--ez-ink); margin: 0 0 5px; letter-spacing: -.015em; }
.ezc-empty-s { font-size: .875rem; color: var(--ez-mut); margin: 0 0 18px; }
.ezc-empty-btn {
display: inline-flex; align-items: center; gap: 8px;
background: var(--ez-card);
border: 1.5px solid var(--ez-tint-line);
color: var(--ez-brand-ink);
border-radius: 999px;
padding: 11px 20px;
font-size: .85rem; font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background .2s var(--ez-ease), color .2s var(--ez-ease),
border-color .2s var(--ez-ease), transform .2s var(--ez-ease),
box-shadow .2s var(--ez-ease);
}
.ezc-empty-btn svg { width: 15px; height: 15px; transition: transform .2s var(--ez-ease); }
.ezc-empty-btn:hover {
background-color: var(--ez-brand-600);
background-image: var(--ez-fill);
border-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 26px -12px var(--ez-glow);
}
.ezc-empty-btn:hover svg { transform: translateX(3px); }
/* ── Wide: the head becomes a left rail ──────────────────────────────────────
A single row of avatar + "Leave a comment" against 1200px of empty card is
what made this section read as unfinished. Splitting the card into
context | fields turns that dead space into structure and gives the form a
sane measure instead of inputs that run the full 1400px.
`.ezc-form-card`'s ::before / ::after are NOT affected: both are absolutely
positioned, and an abspos child of a grid container is not a grid item, so
the brand edge and the wash keep spanning the whole card.
========================================================================== */
@container ezc (min-width: 880px) {
.ezc-form-card {
display: grid;
grid-template-columns: minmax(0, 272px) minmax(0, 1fr);
gap: 0 30px;
align-items: stretch;
padding: 26px;
}
.ezc-form-top {
justify-content: flex-start;
gap: 16px;
padding-bottom: 0;
margin-bottom: 0;
padding-inline-end: 28px;
border-bottom: 0;
border-inline-end: 1px solid var(--ez-line);
}
/* The rail's own copy stacks: avatar over name, not beside it — at 272px the
side-by-side pair left the title on two cramped lines. */
.ezc-form-id { flex-direction: column; align-items: flex-start; gap: 12px; }
.ezc-form-ava { width: 54px; height: 54px; font-size: 1.2rem; }
.ezc-form-top-tx b { font-size: 1.08rem; }
.ezc-tips { display: flex; }
.ezc-fine { margin-top: auto; } /* pinned to the foot of the rail */
.ezc-form-body { min-width: 0; }
}
/* ============================================================================
§RESPONSIVE
CONTAINER queries, not viewport ones: this block sits in a ~1400px column on
an article with no sidebar and a ~700px one beside a sidebar, at the same
viewport. The container is NAMED so these never resolve against the
article shell, which is also an inline-size container.
Touch targets stay >=40px at every width, and no label is traded away for
space unless the control keeps its aria-label.
========================================================================== */
@container ezc (max-width: 760px) {
.ezc-form-card { padding: 19px; border-radius: 18px; }
.ezc-head-sort { display: none; } /* the order is restated by the list */
}
@container ezc (max-width: 560px) {
.ezc-form-row { grid-template-columns: 1fr; gap: 0; }
.ezc-form-row .ezc-field { margin-bottom: 14px; }
.ezc-form-row .ezc-field:last-child { margin-bottom: 0; }
.ezc-head { gap: 12px; }
.ezc-head-ic { width: 42px; height: 42px; border-radius: 12px; }
.ezc-head-ic svg { width: 20px; height: 20px; }
.ezc-form-foot { flex-direction: column; align-items: stretch; }
.ezc-submit { width: 100%; padding: 13px 20px; }
.ezc-fine { align-self: stretch; justify-content: center; text-align: center; }
.ezc-c { gap: 11px; }
.ezc-ava { width: 38px; height: 38px; font-size: .95rem; }
.ezc-c-main { padding: 13px 14px; }
.ezc-replies { margin-inline-start: 10px; padding-inline-start: 16px; }
.ezc-c--reply .ezc-ava { width: 32px; height: 32px; font-size: .82rem; }
.ezc-act { padding: 9px 13px; } /* keeps the tap target comfortable */
.ezc-act--report { margin-inline-start: 0; }
.ezc-empty { padding: 36px 18px; }
}
@container ezc (max-width: 380px) {
.ezc-form-card { padding: 16px; }
.ezc-c { gap: 9px; }
.ezc-c-main::before { display: none; } /* the notch collides at this width */
.ezc-c-actions { gap: 6px; }
.ezc-act { padding: 9px 11px; font-size: .74rem; }
.ezc-act--report .ezc-act-tx { display: none; }
}
/* The one rule that CANNOT be a container query: an element is never styled by
its own container. Top margin is spacing against the article above it, so a
viewport query is the right tool anyway. */
@media (max-width: 860px) { .ezc { margin-top: 38px; } }
@media (prefers-reduced-motion: reduce) {
.ezc *, .ezc *::before, .ezc *::after {
transition: none !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.ezc-c:hover .ezc-c-main,
.ezc-c:hover .ezc-ava,
.ezc-act:hover,
.ezc-act:hover svg,
.ezc-submit:hover,
.ezc-submit:hover svg,
.ezc-replying button:hover,
.ezc-empty-btn:hover { transform: none; }
}
/* ============================================================================
§DARK — the --dk-* palette (§DKSYS), tokens first.
Inputs sit on surface-3, one rung LIGHTER than the card, never the canvas:
a well darker than its card read as a hole on a black page.
========================================================================== */
body.theme-dark .ezc {
--ez-brand-ink: #60A4F5; /* 6.9:1 on #17171B */
--ez-tint: rgba(54,128,237,.16);
--ez-tint-2: rgba(54,128,237,.10);
--ez-tint-line: rgba(96,164,245,.32);
--ez-fill: linear-gradient(0deg, rgba(9,18,33,.34), rgba(9,18,33,.34)),
linear-gradient(135deg, #357FEC 0%, #2B6BCC 34%, #1B4E9C 100%);
--ez-glow: rgba(53,127,236,.52);
--ez-ink: var(--dk-text,#F4F5F7);
--ez-txt: var(--dk-text-2,#C7CAD1);
--ez-mut: var(--dk-text-3,#9AA0AB);
--ez-line: var(--dk-line,rgba(255,255,255,.10));
--ez-line-2: var(--dk-line-strong,rgba(255,255,255,.16));
--ez-card: var(--dk-surface-2,#17171B);
--ez-well: var(--dk-surface-3,#1D1D22);
--ez-well-2: var(--dk-surface-4,#24242A);
--ez-ok: #63E0B4;
--ez-ok-bg: rgba(12,166,120,.15);
--ez-ok-line: rgba(12,166,120,.34);
--ez-warn: #F1BE68;
--ez-danger: #F5837E;
--ez-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 34px -18px rgba(0,0,0,.75);
--ez-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 10px 22px -14px rgba(0,0,0,.7);
--ez-shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 22px 42px -20px rgba(54,128,237,.45);
--ez-ring: 0 0 0 4px rgba(96,164,245,.22);
}
body.theme-dark .ezc-form-card::before {
background: linear-gradient(90deg, #3680ED 0%, #60A4F5 45%, #8CBEFA 70%, rgba(140,190,250,0) 100%);
}
body.theme-dark .ezc-form-card::after {
background: radial-gradient(120% 130% at 0% 0%, rgba(96,164,245,.14) 0%, rgba(96,164,245,0) 60%);
}
body.theme-dark .ezc-input:hover { border-color: rgba(96,164,245,.32); background: var(--ez-well-2); }
body.theme-dark .ezc-input:focus-within { border-color: var(--ez-brand-lite); background: var(--ez-well-2); }
body.theme-dark .ezc-field:has(input[readonly]) .ezc-input:hover { border-color: var(--ez-line-2); background: var(--ez-well); }
body.theme-dark .ezc-input input::placeholder,
body.theme-dark .ezc-input textarea::placeholder { color: #767C8C; }
body.theme-dark .ezc-input.is-bad:focus-within { box-shadow: 0 0 0 4px rgba(245,131,126,.18); }
body.theme-dark .ezc-input-ic { color: #8A90A0; }
body.theme-dark .ezc-input:focus-within .ezc-input-ic { color: var(--ez-brand-lite); }
body.theme-dark .ezc-counter.is-near { background: rgba(241,190,104,.16); }
/* Opaque, white-glyph fills stay put; only the shadows soften. */
body.theme-dark .ezc-head-ic,
body.theme-dark .ezc-empty-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 26px -12px rgba(0,0,0,.8); }
body.theme-dark .ezc-c-dot { background: rgba(255,255,255,.22); }
body.theme-dark .ezc-ava { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 3px var(--ez-card), 0 6px 14px -8px rgba(0,0,0,.8); }
body.theme-dark .ezc-form-ava { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 3px var(--ez-card), 0 0 0 4.5px rgba(96,164,245,.34); }
@media (hover: hover) and (pointer: fine) {
body.theme-dark .ezc-c:hover .ezc-ava { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 3px var(--ez-card), 0 0 0 5px rgba(96,164,245,.4), 0 8px 18px -8px rgba(0,0,0,.85); }
}
/* Hover fills: the tinted states take the light brand ink, the filled ones
keep the scrimmed fill and a white glyph — the pair is what preserves
contrast, not the fill alone. */
body.theme-dark .ezc-act--like:hover { color: var(--ez-brand-lite); background: var(--ez-tint); border-color: var(--ez-tint-line); box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); }
body.theme-dark .ezc-act--report:hover { color: var(--ez-ink); background: var(--ez-well-2); border-color: var(--ez-line-2); box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); }
body.theme-dark .ezc-act--reply:hover,
body.theme-dark .ezc-empty-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px -12px rgba(0,0,0,.85); }
body.theme-dark .ezc-replying button:hover { background: var(--ez-brand-lite); border-color: var(--ez-brand-lite); color: #0B1A2E; }
body.theme-dark .ezc-submit { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 26px -12px rgba(0,0,0,.85), 0 0 24px -6px var(--ez-glow); }
body.theme-dark .ezc-submit:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 34px -14px rgba(0,0,0,.9), 0 0 30px -4px var(--ez-glow); }
body.theme-dark .ezc-empty {
background:
radial-gradient(120% 100% at 50% 0%, rgba(54,128,237,.12), rgba(54,128,237,0) 62%),
var(--ez-well);
}
body.theme-dark .ezc-replies::before {
background: linear-gradient(180deg, rgba(96,164,245,.55), rgba(96,164,245,.22) 60%, rgba(255,255,255,.07));
}