`.
THIS IS NOT .density-compact ABOVE, and the distinction is the ruling's own:
DENSITY AND POINTER ARE DIFFERENT AXES. .density-compact is a density opt-out
that DOES strip touch targets from a surface a finger may still operate — the
ruling calls a flag conflating the two "worse than the defect it fixes". This
one says nothing about density; it asserts the input device. The 24x24 floor is
UNWEAKENED anywhere a finger can reach, because a finger cannot reach here.
AT THE DEFINITION SITE, per dacab4e95 — "the consumers were never the problem;
the defect is concentrated in the definition sites". The chrome-side alternative
was to re-pin these five properties inside the Labs chrome stylesheet, which would have COPIED
resolved values (24/32/40) into a consumer — the exact thing the #153 wave
exists to delete. Here the values are already literal in this file, three rules
up, so nothing is copied and one declaration serves every consumer. */
[data-pointer-scope="fine"] {
--control-h-xs: 24px;
--control-h-sm: 32px;
--control-h-md: 40px;
--control-h-lg: 48px;
--control-h-xl: 56px;
}
/* POINTER SCOPE IS NOT INHERITED ACROSS A PREVIEW BOUNDARY — ruling addendum
66e1ef520. The `fine` scope above is declared at the chrome ROOT, and that
root CONTAINS PRODUCT CONTENT: every previewed .app-shell / .app-chrome /
.app-sidebar / nav.sidebar renders inside it. Without a reset they inherit
the chrome ladder, so Labs would show Pavel control sizes no real user gets
— and Labs exists to review product UI, so that defeats the surface's only
purpose. Review fidelity is the cost here, not accessibility: the attribute
is Labs-only, so the a11y blast radius is narrow.
`device` RE-ESTABLISHES the media answer — it restates what :root gets in
this same query, so a preview renders at the TRUE device pointer. It is
deliberately NOT `coarse`: a `coarse` counter-rule would ASSERT touch rather
than TRACK the device, making the preview always-touch on a desktop and
breaking review fidelity in the opposite direction. Outside this media query
`device` declares nothing, so on a fine-pointer machine a preview correctly
stays fine — which is why it must live in here and cannot be hoisted.
A NARROWER CHROME NODE CANNOT REPLACE THIS, and the ruling records why so it
is not retried: in the retired Labs workspace, chrome and previews were
INTERLEAVED — .app-shell and .app-chrome sat inside the declared subtree
alongside the workspace chrome — so no single node separated them.
WHO DECLARES IT: a preview's foreign-content MOUNT POINT (in the retired
workspace, .labs-frame__body). No view declares either scope today. NOT the
frames. A frame must never declare pointer
scope, because it cannot know whether it is being previewed or shipped, and
that is precisely the knowledge this attribute encodes. Not the chrome root
either: the frame IDENTITY BAR lived there, and resetting it would send the
frame-chrome selects (a4250f715 / #153 unit-7) to 44px on touch — undoing the
scope this pairs with. This generalises past Labs to any embed or preview. */
[data-pointer-scope="device"] {
--control-h-xs: 44px;
--control-h-sm: 44px;
--control-h-md: 44px;
--control-h-lg: 48px;
--control-h-xl: 56px;
}
}
.density-touch {
--control-h-xs: 44px;
--control-h-sm: 44px;
--control-h-md: 44px;
--control-h-lg: 48px;
--control-h-xl: 56px;
} /* tq-8386: the control-height ladder (one source with the DS) */
/* the UA [hidden]{display:none} loses to any author display rule; this makes the attribute authoritative (A199, isabella) */
[hidden]:not([hidden="until-found"]) { display: none !important; } /* A199 tq-9337 (isabella 900073313): [hidden] is authoritative, one DS rule (never copied into ./base/tailwind or a token file) */
/*Buttons*/
/* ==========================================================================
Buttons: the ONE Reinly button system (tq-8324 R3a2)
--------------------------------------------------------------------------
PLAIN CSS: reinly.webapp imports this file IN PLACE (R4 guard), so there is
no @apply / @utility / theme() here. The shared classes carry the app's
served values (the app look wins: pill-shaped, black primary):
.btn + the variants (primary / secondary / soft / ghost / link / light /
danger(-outline) / success(-outline) / accent / warning(-outline) /
info(-outline) / glass), the sizes, .btn-icon(-*), .btn-group(-*), and the
loading state: .is-loading (pointer-events: none) + a .btn-spinner glyph in
the markup. Whatever sets .is-loading also sets disabled (or aria-disabled
+ a click guard) and aria-busy="true", since pointer-events alone does not
stop Enter / Space.
Every variant shares ONE base rule (the selector list below), so a new
variant joins that list instead of copying the base.
The DS-only families (tonal / outline / primary-outline / cta / fab / split /
count / block / xl) live in buttons-library.css, which only the DS imports.
========================================================================== */
/* ════════════════════════════════════════════════════════════════
* Reinly button system
* ────────────────────────────────────────────────────────────────
* • All buttons are pill-shaped by default (rounded-full).
* • Sizes scale font-size + padding together for visual harmony.
* • btn-md is the default; sm and lg sit ±1 step from it.
* • Touch targets ≥ 36px on the default (md), ≥ 44px on lg
* (Apple HIG minimum for comfortable tapping).
* • Font-sizes ≥ 14px on btn-md so text reads on phones; the
* iOS auto-zoom threshold (16px) only applies to
, not
* buttons, so we don't need to push every button to 16.
* ════════════════════════════════════════════════════════════════ */
/* Base Button (abstract; not required in markup) */
.btn,
.btn-primary,
.btn-secondary,
.btn-soft,
.btn-ghost,
.btn-light,
.btn-danger,
.btn-danger-outline,
.btn-success,
.btn-success-outline,
.btn-accent,
.btn-warning,
.btn-warning-outline,
.btn-info,
.btn-info-outline,
.btn-glass {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.5rem;
border-radius: 9999px;
border-width: 1px;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 0.8125rem;
line-height: 1.5rem;
font-weight: 500;
outline: 2px solid transparent;
outline-offset: 2px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-soft:disabled,
.btn-ghost:disabled,
.btn-light:disabled,
.btn-danger:disabled,
.btn-danger-outline:disabled,
.btn-success:disabled,
.btn-success-outline:disabled,
.btn-accent:disabled,
.btn-warning:disabled,
.btn-warning-outline:disabled,
.btn-info:disabled,
.btn-info-outline:disabled,
.btn-glass:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn,
.btn-primary,
.btn-secondary,
.btn-soft,
.btn-ghost,
.btn-light,
.btn-danger,
.btn-danger-outline,
.btn-success,
.btn-success-outline,
.btn-accent,
.btn-warning,
.btn-warning-outline,
.btn-info,
.btn-info-outline,
.btn-glass {
-webkit-tap-highlight-color: transparent;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-soft:focus-visible,
.btn-ghost:focus-visible,
.btn-light:focus-visible,
.btn-danger:focus-visible,
.btn-danger-outline:focus-visible,
.btn-success:focus-visible,
.btn-success-outline:focus-visible,
.btn-accent:focus-visible,
.btn-warning:focus-visible,
.btn-warning-outline:focus-visible,
.btn-info:focus-visible,
.btn-info-outline:focus-visible,
.btn-glass:focus-visible {
outline: 2px solid var(--focus-ring); outline-offset: 2px; -webkit-box-shadow: var(--tw-shadow, 0 0 #0000); box-shadow: var(--tw-shadow, 0 0 #0000);
}
/* -----------------------------------------
* Variants (each one includes `.btn`)
* ----------------------------------------- */
/* Primary */
.btn-primary {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
color: var(--text-button-primary);
background-color: var(--bg-button-primary);
border-color: var(--border-button-primary);
}
.btn-primary:hover {
background-color: var(--bg-button-primary-hover);
}
.btn-primary:active {
background-color: var(--bg-button-primary-active);
}
/* Secondary */
.btn-secondary {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
color: var(--text-button-secondary);
background-color: var(--bg-button-secondary);
border-color: var(--border-button-secondary);
}
.btn-secondary:hover {
background-color: var(--bg-button-secondary-hover);
}
.btn-secondary:active {
background-color: var(--bg-button-secondary-active);
}
.btn-secondary.is-active,
.btn-secondary[aria-pressed="true"] {
background-color: var(--bg-button-secondary-active-state);
}
/* Soft */
.btn-soft {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
color: var(--text-button-soft, var(--text-primary));
background-color: var(--bg-button-soft, var(--utility-neutral-50));
border-color: var(--border-button-soft, var(--alpha-0));
}
.btn-soft:hover {
background-color: var(--bg-button-soft-hover, var(--utility-neutral-100));
}
.btn-soft:active {
background-color: var(--bg-button-soft-active, var(--utility-neutral-200));
}
/* Ghost */
.btn-ghost {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
color: var(--text-button-ghost, var(--text-primary));
background-color: var(--bg-button-ghost, var(--alpha-0));
border-color: var(--border-button-ghost, var(--alpha-0));
}
.btn-ghost:hover {
background-color: var(--bg-button-ghost-hover, var(--utility-neutral-100));
}
.btn-ghost:active {
background-color: var(--bg-button-ghost-active, var(--utility-neutral-200));
}
/* The danger ghost (tq-8227 C10; ported from enodia.Design tq-6996 06fc12419b, the DELETE-ACTION rule in buttons.md).
A danger action inside a ghost action list ('Delete listing'), and the icon-only per-row remover:
The danger glyph/label + the existing danger-outline hover/press tint (no new colour); focus ring + disabled come from
.btn-ghost. Close x, Remove-chip and photo-tile overlay controls never use it. */
.btn-ghost.is-danger {
/* the danger-outline button's own token: one danger red across every Delete (--text-danger is paler in dark) */
color: var(--text-button-danger-outline, var(--text-danger));
}
.btn-ghost.is-danger:hover {
background-color: var(--bg-button-danger-outline-hover, var(--utility-red-50, #fef2f2));
}
.btn-ghost.is-danger:active {
background-color: var(--bg-button-danger-outline-active, var(--utility-red-100, #fee2e2));
}
/* Link */
.btn-link {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
border-radius: 0.125rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
text-decoration-line: underline;
text-underline-offset: 4px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.btn-link:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-link {
color: var(--text-button-link, var(--text-primary));
}
.btn-link:hover {
text-decoration-line: none;
}
/* Bare — tq-9151 (A160, ORIGIN for the other DSes; isabella 900068420): a