/* One button, everywhere.
 *
 * "I'm on all buttons in the Atlas to look and behave like these ones"
 * (2026-09-03), said of the Print / Email / Text / Download row on an invoice.
 * Those are the app's own .btn: a pill with a light gloss over it. Twenty-odd
 * modules had grown their own button styling instead, and from 2026-09-03 to
 * 2026-09-20 this file carried an ADOPTION LAYER: it named each bespoke
 * control and dressed it as the pill with !important, to beat the stylesheet
 * the module injected later. That layer is gone. Every one of those controls
 * wears the shared .btn class in its own markup now -- restore-primary for a
 * filled one, restore-danger for a delete -- and its module draws no face,
 * border, radius or hover of its own, so there is nothing left to override.
 * A control drawn without .btn is a plain browser button, visibly, which is
 * the point: tests/no-button-is-adopted.test.js fails on one, and so does the
 * eye. The class of bug the layer bred -- an adopted control whose glow, ink
 * or weight drifted from the button beside it because two rules with
 * !important fought over it -- cannot come back through a file that no
 * longer names any control.
 *
 * What this file still decides, for .btn itself:
 *   - the press, which a primary's hover used to beat;
 *   - a thumb's room on a phone;
 *   - the two other shapes and the size scale, below.
 * What it deliberately does not touch is unchanged: colour intent (a primary
 * stays blue, a danger red, EQ Pulse keeps its own face); round icon
 * controls; tab strips and segmented pickers; anything inside .nav.
 */

/* The shape and surface, in one place, so a future control can opt in by name
 * rather than by copying pixels. */
:root{
  --atlas-btn-radius:999px;
  --atlas-btn-pad:6px 13px;
  --atlas-btn-size:11px;
  --atlas-btn-weight:700;
  --atlas-btn-face:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.057) 44%,rgba(255,255,255,0) 47%),
    linear-gradient(165deg,color-mix(in srgb,var(--surface-2,#eef3f8) 72%,white) 0%,var(--surface-2,#eef3f8) 46%,color-mix(in srgb,var(--surface-2,#eef3f8) 78%,#000) 100%),
    var(--surface-2,#eef3f8);
  --atlas-btn-line:var(--line-strong,#c6d3de);
  --atlas-btn-ink:var(--navy,#102a43);
}

/* The press. "None of the buttons on this page are working properly. They
 * don't have the animation when you press them in" (2026-09-12, on Atlas ID).
 *
 * The shared .btn has a press -- .btn:active, the inset shadow -- but on a
 * primary the hover glow is written as button.restore-primary:hover, one tag
 * more specific than .btn:active, and a button being pressed is still being
 * hovered. So the glow won and the press never painted. This rule is the
 * press for both, marked important so it beats the hover. */
.atlas-buttons .btn:active,
.atlas-buttons .restore-primary:active{
  transform:translateY(0)!important;
  box-shadow:inset 0 2px 4px rgba(16,42,67,.22)!important;
}

/* ==========================================================================
 * Two more shapes, and a size scale.
 *
 * "C and H" (2026-09-13), picked off the shape mockup. The capsule stays the
 * default and nothing already drawn changes: these are opt-in, by name, on top
 * of .btn. What they change is GEOMETRY ONLY -- the face, the border, the ink,
 * the hover glow, the press and the focus ring all still come from .btn, which
 * is the whole point of having a signature button at all.
 *
 * C, the square cut, is for a row of controls that belong to one instrument --
 * a toolbar, a joined run -- where capsules read as scattered lozenges.
 * H, the disc, is the capsule with the label taken out, so the icon is the
 * whole word.
 *
 * browser-checks/buttons-are-pills.check.js knows these two by name. Anything
 * else with a corner smaller than half its height is still a rectangle and
 * still fails there, which is what keeps this a vocabulary of three rather
 * than a licence to draw any shape.
 * ========================================================================== */
:root{
  --atlas-btn-radius-square:4px;
  /* Heights, from the mockup's table. A PILL with no size class is the slim
     modal size now -- "I want all buttons to be slim like the customer
     modal" (2026-09-20) -- so it measures like Save Customer, and .btn-sm
     names the same size. Two things keep their height on purpose: the 40px
     topbar chrome and the account menu's rows, and a disc, whose 38px is a
     hit target (the drawer heads' discs are measured against 36px, and a
     disc on a phone never goes under 40px). A disc inside a modal is still
     the small one, by the modal rule below. */
  --atlas-btn-pad-xs:4px 10px;   --atlas-btn-size-xs:10px;   --atlas-btn-h-xs:26px;
  --atlas-btn-pad-sm:6px 13px;   --atlas-btn-size-sm:11px;   --atlas-btn-h-sm:31px;
  --atlas-btn-h-md:38px;
  --atlas-btn-pad-lg:12px 21px;  --atlas-btn-size-lg:13.5px; --atlas-btn-h-lg:45px;
  --atlas-btn-pad-xl:15px 27px;  --atlas-btn-size-xl:15px;   --atlas-btn-h-xl:52px;
}

/* Inside a modal every button is the small size, discs included -- Save,
   Cancel, Add Contact, a row's Edit and Remove, the close -- and every one
   is still the shared .btn, so the face, the glow, the press and the ring
   are the signature ("I want all modal buttons to be this size. But with
   the signature Atlas behaviors", 2026-09-15, pointing at a contact row's
   Edit and Remove). A size named on the button itself (xs, lg, xl) is kept.
   Desktop only: on a phone a button in a sheet still needs a thumb's room. */
@media(min-width:851px){
  .restore-modal .btn:not(.btn-disc):not(.btn-xs):not(.btn-lg):not(.btn-xl),
  .customer-modal .btn:not(.btn-disc):not(.btn-xs):not(.btn-lg):not(.btn-xl),
  .modal .btn:not(.btn-disc):not(.btn-xs):not(.btn-lg):not(.btn-xl),
  .parity-side-panel .btn:not(.btn-disc):not(.btn-xs):not(.btn-lg):not(.btn-xl),
  [role="dialog"]:not(aside) .btn:not(.btn-disc):not(.btn-xs):not(.btn-lg):not(.btn-xl){padding:var(--atlas-btn-pad-sm);font-size:var(--atlas-btn-size-sm);min-height:var(--atlas-btn-h-sm)}
  .restore-modal .btn.btn-disc:not(.btn-xs):not(.btn-lg):not(.btn-xl),
  .customer-modal .btn.btn-disc:not(.btn-xs):not(.btn-lg):not(.btn-xl),
  .modal .btn.btn-disc:not(.btn-xs):not(.btn-lg):not(.btn-xl),
  .parity-side-panel .btn.btn-disc:not(.btn-xs):not(.btn-lg):not(.btn-xl),
  [role="dialog"]:not(aside) .btn.btn-disc:not(.btn-xs):not(.btn-lg):not(.btn-xl){width:var(--atlas-btn-h-sm);height:var(--atlas-btn-h-sm);min-height:var(--atlas-btn-h-sm)}
}

/* C -- the square cut. */
.btn.btn-square,
.atlas-buttons .btn.btn-square{border-radius:var(--atlas-btn-radius-square)!important}

/* A run of square-cut buttons joined edge to edge reads as one instrument.
   Only the outer corners are cut; the seams are shared, so there is one line
   between two buttons rather than two sitting side by side. */
.btn-run{display:inline-flex}
/* Each rule twice, the second under .atlas-buttons (the app's body), so a
   .btn-square in a run is joined too: the square cut above is written at that
   weight, and against the bare rule it kept 4px on every corner. */
.btn-run>.btn,.atlas-buttons .btn-run>.btn{border-radius:0!important;margin:0}
.btn-run>.btn+.btn{border-left-width:0!important}
.btn-run>.btn:first-child,.atlas-buttons .btn-run>.btn:first-child{border-start-start-radius:var(--atlas-btn-radius-square)!important;border-end-start-radius:var(--atlas-btn-radius-square)!important}
.btn-run>.btn:last-child,.atlas-buttons .btn-run>.btn:last-child{border-start-end-radius:var(--atlas-btn-radius-square)!important;border-end-end-radius:var(--atlas-btn-radius-square)!important}
/* A button in a run lifts on hover like any other, and a lift inside a joined
   row would tear the seam -- so the run trades the lift for the glow alone. */
.btn-run>.btn:hover{transform:none!important;z-index:1;position:relative}
/* The focus ring sits 2px outside the button, over its neighbour, which paints
   later and covered that side of it. The focused one is raised over the run,
   a hovered neighbour included. */
.btn-run>.btn:focus-visible{z-index:2;position:relative}

/* H -- the disc. Square by construction, so the capsule radius makes a circle.
   The label is an icon; any text inside is the accessible name and is not
   drawn wider than the control. */
.btn.btn-disc,
.atlas-buttons .btn.btn-disc{
  border-radius:999px!important;
  /* The disc gave its icon a size and a circle and never said where inside the
     circle to put it. A button is display:block, so the icon was laid out as an
     inline box sitting on a text baseline -- which put every disc's glyph one
     pixel above the middle, everywhere in Atlas ("center both icons",
     2026-09-18, on the Takeoff bar, where three of them sit in a row and it
     shows). .icon-btn in atlas-rebuild.css has always centred its contents
     this way; the disc never did. A grid with place-items:center also centres
     the discs whose label is a character rather than an icon -- the sheet
     arrows and the zoom controls -- which were off by the same pixel and by
     however much the glyph's own metrics added. */
  display:grid;
  place-items:center;
  width:var(--atlas-btn-h-md);
  height:var(--atlas-btn-h-md);
  min-height:var(--atlas-btn-h-md);
  padding:0!important;
  gap:0;
  flex:0 0 auto;
  overflow:hidden;
}

/* z-index 1000, not 5: at 5 the name lost to anything the app stacks above it
   -- a panel, a sheet, the body of the dialog a disc sits in the head of -- and
   the name simply did not appear, with nothing to say why (2026-09-16, "popup
   is behing modal"). 1000 clears every in-page sibling while still sitting
   under the modal layer at 10040, so a disc in the page behind a dialog does
   not shine through it.
   A named disc. The label a disc gave up comes back as a pop-up: data-name is
   drawn under the disc on hover and on keyboard focus, in the same pill the
   top bar's five discs wear, so nothing is lost for a reader who cannot hover.
   The disc's overflow opens for it -- a disc with text inside stays clipped.
   data-name-side="end" hangs the pop-up off the disc's right edge, for a disc
   at the edge of a panel that scrolls, where a centred pop-up would be cut
   or would give the panel a sideways scroll. */
.btn.btn-disc[data-name],.atlas-buttons .btn.btn-disc[data-name]{position:relative;overflow:visible}
/* The lift is what buried the label. A disc rises 1px on hover -- the Atlas
   Button signature -- and a transform makes the element a STACKING CONTEXT, so
   the label's z-index:1000 stopped meaning "above the page" and started
   meaning "above the other 30 pixels of this button". The whole context then
   sits in the root at the button's own z-index, which is auto, so any
   positioned element later in the document paints straight over it: on Takeoff
   that is .tk-stage, and the label appeared for a moment underneath the plan
   ("popup getting buried", 2026-09-18). It is exactly coincident with the
   label being shown, because the same hover does both.

   Raising the BUTTON while it is hovered lifts its whole context with it.
   Named on the states rather than set always, so a disc at rest keeps its
   place in the page's own order. */
.btn-disc[data-name]:hover,.btn-disc[data-name]:focus-visible{z-index:1000}
.btn.btn-disc[data-name]::after{content:attr(data-name);position:absolute;z-index:1000;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px) scale(.96);opacity:0;pointer-events:none;white-space:nowrap;padding:6px 10px;border-radius:999px;font:700 11px/1 var(--font-body);letter-spacing:.02em;text-transform:none;color:var(--ink-inverse);background:var(--chrome-navy);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(0,0,0,.35);transition:opacity .16s ease,transform .16s ease}
.btn.btn-disc[data-name]:hover::after,.btn.btn-disc[data-name]:focus-visible::after{opacity:1;transform:translate(-50%,0) scale(1)}
.btn.btn-disc[data-name][data-name-side="end"]::after{left:auto;right:0;transform:translate(0,-4px) scale(.96)}
.btn.btn-disc[data-name][data-name-side="end"]:hover::after,.btn.btn-disc[data-name][data-name-side="end"]:focus-visible::after{transform:translate(0,0) scale(1)}
/* A disc at the bottom of the window pops its name up, not down: the label
   hung 28px under the Takeoff underbar's discs even while invisible, which
   was the only thing left for the page to scroll by (2026-09-20). */
.btn.btn-disc[data-name][data-name-place="above"]::after{top:auto;bottom:calc(100% + 8px);transform:translate(-50%,4px) scale(.96)}
.btn.btn-disc[data-name][data-name-place="above"]:hover::after,.btn.btn-disc[data-name][data-name-place="above"]:focus-visible::after{transform:translate(-50%,0) scale(1)}
@media(prefers-reduced-motion:reduce){.btn.btn-disc[data-name]::after{transition:none}}

/* The size scale. Padding and type move together; nothing else does. */
/* The default, said once: every pill with no size of its own is the slim
   size, wherever it sits -- a page, a card, a toolbar, a modal. */
.atlas-buttons .btn:not(.btn-xs):not(.btn-lg):not(.btn-xl):not(.btn-disc){padding:var(--atlas-btn-pad-sm);font-size:var(--atlas-btn-size-sm);min-height:var(--atlas-btn-h-sm)}
/* Except in the 40px chrome: the bar's own controls and the rows of the
   name's menu stand at the bar's height, which is the line the bar holds. */
.atlas-buttons .topbar .btn:not(.btn-xs):not(.btn-lg):not(.btn-xl):not(.btn-disc),
.atlas-buttons #accountMenu .btn:not(.btn-xs):not(.btn-lg):not(.btn-xl):not(.btn-disc){min-height:40px}
.btn.btn-xs,.atlas-buttons .btn.btn-xs{padding:var(--atlas-btn-pad-xs);font-size:var(--atlas-btn-size-xs);min-height:var(--atlas-btn-h-xs)}
.btn.btn-sm,.atlas-buttons .btn.btn-sm{padding:var(--atlas-btn-pad-sm);font-size:var(--atlas-btn-size-sm);min-height:var(--atlas-btn-h-sm)}
.btn.btn-lg,.atlas-buttons .btn.btn-lg{padding:var(--atlas-btn-pad-lg);font-size:var(--atlas-btn-size-lg);min-height:var(--atlas-btn-h-lg)}
.btn.btn-xl,.atlas-buttons .btn.btn-xl{padding:var(--atlas-btn-pad-xl);font-size:var(--atlas-btn-size-xl);min-height:var(--atlas-btn-h-xl)}
/* A disc is square, so a size class sets both of its sides rather than its
   padding -- otherwise .btn-disc.btn-lg would be a 38px circle with 12px of
   padding inside it and the icon would be clipped. */
.btn.btn-disc.btn-xs,.atlas-buttons .btn.btn-disc.btn-xs{width:var(--atlas-btn-h-xs);height:var(--atlas-btn-h-xs);min-height:var(--atlas-btn-h-xs);padding:0!important}
.btn.btn-disc.btn-sm,.atlas-buttons .btn.btn-disc.btn-sm{width:var(--atlas-btn-h-sm);height:var(--atlas-btn-h-sm);min-height:var(--atlas-btn-h-sm);padding:0!important}
.btn.btn-disc.btn-lg,.atlas-buttons .btn.btn-disc.btn-lg{width:var(--atlas-btn-h-lg);height:var(--atlas-btn-h-lg);min-height:var(--atlas-btn-h-lg);padding:0!important}
.btn.btn-disc.btn-xl,.atlas-buttons .btn.btn-disc.btn-xl{width:var(--atlas-btn-h-xl);height:var(--atlas-btn-h-xl);min-height:var(--atlas-btn-h-xl);padding:0!important}

/* On a phone a disc is pressed with a thumb, the same rule the run above has:
   nothing smaller than 40px, whatever size it was asked for. */
@media(max-width:850px){
  .btn.btn-disc,.atlas-buttons .btn.btn-disc{width:max(40px,var(--atlas-btn-h-md));height:max(40px,var(--atlas-btn-h-md));min-height:40px}
  /* The two sizes under 40px are named, with the selectors that size them,
     so they lose here on order: .btn-disc.btn-sm out-weighed the line above
     and drew a 31px disc on a phone (2026-10-01). lg and xl are over 40
     already and keep their size. */
  .btn.btn-disc.btn-xs,.atlas-buttons .btn.btn-disc.btn-xs,
  .btn.btn-disc.btn-sm,.atlas-buttons .btn.btn-disc.btn-sm{width:40px;height:40px;min-height:40px}
}

/* On a phone a pill is pressed with a thumb, so it gets the room to be:
   nothing under 40px, whatever the slim default above says. Written with the
   default's own selector and after it, so it wins on order and not on a
   fight; a size named on the button itself is kept, as everywhere. */
@media(max-width:850px){
  .atlas-buttons .btn:not(.btn-xs):not(.btn-lg):not(.btn-xl):not(.btn-disc){min-height:40px;padding:10px 16px}
}