/* ============================================================================
XYZ BIM - app.css
v1 - the layer between the header and the content.
Load it AFTER site.css, before the project's own stylesheet:
WHY THIS EXISTS
---------------
Until now the estate shared colour, type and the header, and nothing else.
Measured 2026-09-10 across the four properties that carry a local stylesheet
(competicoes 12,2 KB - quemganha 13,8 KB - anatomia 9,8 KB - precoobra
16,8 KB): ZERO class names in common, and two different naming languages
(.filter-btn / .empty-state against .caixa / .dia / .ev--hoje). Nobody had
forked a token; everybody had reinvented the components. That is why the
properties read as cousins instead of sisters, and why adopting the brand on
a new one was still a visual job done by hand each time.
WHAT IS IN HERE, AND WHY NOT MORE
---------------------------------
Only what the same measurement found in three or four of the four:
shell + measure .section/.w-container - .wrap - .hero
page head .page-header/.page-title - .page-head/.kicker/.lead
figures strip .stats-bar/.stat-item - .stats-row/.stat - .kpis/.kpi
chips .filter-btn - .pill/.pill--on - .chip - .seg/.toggle
text field .search-input - .field
empty / loading .empty-state/.loading - .spin - .qg-map-msg
Cards and data tables recur too (three of four), and they are NOT here yet:
the first property to adopt this layer does not use either, and a component
written without a consumer is a component written wrong. They join when the
migration reaches quemganha. Pagination is in nobody, and is not coming.
THE NAMES START WITH xapp-
--------------------------
Deliberately, like .xsite-. Four properties already use .card, .chip,
.table, .row and .grid for rules of their own; a shared sheet claiming those
names would silently restyle pages the moment it was linked. With a prefix,
adopting a component is an explicit edit in the markup, and grep answers
"who uses this" honestly.
THE CONTRACT IS THE SAME AS EVERYWHERE
--------------------------------------
Not one value is declared here: every colour, size and duration is a token
from brand.css. A project varies by RE-BINDING tokens, never by overriding
these rules. If something does not fit, add a token - do not write
!important against this file.
========================================================================= */
/* ----------------------------------------------------------------- shell -- */
/* One section of a page: the house gutter outside, the house measure inside.
Nesting a container inside a section, which three of the four properties
did, buys nothing once the padding and the max-width live on the same box. */
.xapp{
max-width: var(--max, 1680px);
margin-inline: auto;
padding: clamp(28px, 5vw, 56px) var(--pad, 24px);
}
/* Sections after the first should not pay the top padding twice. */
.xapp + .xapp{ padding-top: 0; }
/* ------------------------------------------------------------- page head -- */
.xapp-head{ margin-bottom: clamp(26px, 4vw, 44px); }
.xapp-head h1{
font-family: var(--f-display, var(--f-sans));
font-size: clamp(24px, 3vw, 38px);
line-height: 1.14;
letter-spacing: -.01em;
font-weight: 400;
margin: 0 0 clamp(12px, 1.6vw, 20px);
}
/* The measure, not the box, is what makes a paragraph readable: 68ch is about
twelve words a line at the base size, which is where the eye stops needing
to hunt for the start of the next one. */
.xapp-head__lede{
max-width: 68ch;
color: var(--ink-2);
font-size: 16.5px;
line-height: 1.65;
}
.xapp-head__lede p{ margin: 0 0 14px; }
.xapp-head__lede p:last-child{ margin-bottom: 0; }
/* ---------------------------------------------------------------- labels -- */
/* A labelled set of controls. The label itself is .mono, which brand.css
already ships and three properties had quietly redeclared. */
.xapp-group{ margin-bottom: 18px; }
.xapp-group > .mono{ display: block; margin-bottom: 9px; }
/* --------------------------------------------------------------- figures -- */
/* The "N results, updated X" strip. Ruled above and below because it is a
measurement, not a heading: the rules say "this is the state of the data". */
.xapp-stats{
display: flex;
flex-wrap: wrap;
gap: clamp(14px, 2.4vw, 32px);
padding: 14px 0;
border-top: 1px solid var(--rule-2);
border-bottom: 1px solid var(--rule-2);
margin-bottom: clamp(22px, 3vw, 34px);
font-size: 13px;
color: var(--ink-3);
}
.xapp-stat span,
.xapp-stat b{ color: var(--ink); font-weight: 500; }
/* ----------------------------------------------------------------- chips -- */
/* One component for every "pick one of these" row: source filters, a language
switcher, a segmented control. Square, because the house style is square.
The chosen chip is INK, not accent. The house rule is one accent element per
screen, and a filter row can have seven chosen at once. */
.xapp-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.xapp-chip{
font: inherit;
font-size: 12px;
line-height: 1.2;
padding: 8px 15px;
border: 1px solid var(--rule);
border-radius: var(--radius, 0);
background: var(--bg);
color: var(--ink-3);
cursor: pointer;
transition: border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.xapp-chip:hover{ border-color: var(--ink); color: var(--ink); }
.xapp-chip:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.xapp-chip.is-on{ background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* The tally on a filter chip is a code, so it takes the mono voice. */
.xapp-chip__n{
margin-left: 6px;
font-family: var(--f-mono);
font-size: 10px;
opacity: .72;
}
/* ----------------------------------------------------------------- field -- */
.xapp-input{
width: 100%;
max-width: 420px;
padding: 11px 14px;
border: 1px solid var(--rule);
border-radius: var(--radius, 0);
background: var(--bg);
color: var(--ink);
font: inherit;
transition: border-color var(--tr-fast);
}
.xapp-input:focus{ outline: none; border-color: var(--ink); }
.xapp-input::placeholder{ color: var(--ink-3); }
/* ----------------------------------------------------------------- empty -- */
/* Loading, no results, and "the map could not draw" are the same box. */
.xapp-empty{
grid-column: 1 / -1;
text-align: center;
padding: clamp(40px, 8vw, 80px) 20px;
color: var(--ink-3);
}
/* ---------------------------------------------------------------- narrow -- */
/* A filter row with a dozen chips wraps to four lines on a phone and pushes
the content off the screen. One scrolling line keeps the page usable, and
the row still reads as a row. */
@media (max-width: 768px){
.xapp-chips{
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: thin;
}
.xapp-chip{ white-space: nowrap; }
.xapp-input{ max-width: 100%; }
}