/* Flodesk's interaction layer, matched to the admin console's.
 *
 * The portal and the console are the two applications Fazinflo ships behind a
 * password, and they were drawn by the same design system — but the console's
 * artboard states its hover and motion behaviour and the portal's does not. Of
 * the portal's forty-two controls, two changed on hover and two carried a
 * transition; the rest snapped between states or gave no answer to the pointer
 * at all. Nothing here invents a look: every value below is either the console's
 * own or a token the design system already publishes for exactly this purpose.
 *
 * It has to be a stylesheet rather than an artboard edit because the portal
 * styles everything inline, from a React tree the canvas owns and re-exports.
 * Inline styles are what these rules override, which is what the !important
 * declarations are for — the same bargain src/admin-links.css already makes for
 * the console. The data attributes are set by src/portal-ui.js, because whether
 * a control is light or dark is a question about its computed background and
 * CSS cannot ask it.
 */

/* --------------------------------------------------------------------------
   Motion.

   tokens/motion.css publishes --transition-hover for this: colour, background,
   border and opacity over --duration-fast on --ease-out. It also zeroes every
   duration under prefers-reduced-motion, so honouring that comes for free and
   stays correct if the tokens are ever retuned.

   This reaches the artboard's own hover handlers too. Three controls change
   their background by assigning to element.style on mouseenter, which used to
   land in one frame; with a transition on the element it eases, and the portal
   did not have to be edited for it.
   ------------------------------------------------------------------------ */
[data-cp] button,
[data-cp] a,
[data-cp] [role="button"],
[data-cp] input,
[data-cp] select,
[data-cp] textarea {
  transition: var(--transition-hover, color .15s ease, background-color .15s ease,
                                     border-color .15s ease, opacity .15s ease);
}

/* --------------------------------------------------------------------------
   Hover.

   The design system ships a hover pair for each of its surface tokens —
   --bg-subtle-hover, --bg-solid-hover, --bg-card-hover — and readme.md notes
   that every interactive element in the source file documents a :hover variant.
   So the answer to "what should this do on hover" is already written down; it
   was only ever missing from the portal.

   Which of the pair applies depends on the control: a light button darkens, a
   dark or transparent one lightens. That is what portal-ui.js decides, once per
   control, by reading its background.
   ------------------------------------------------------------------------ */
[data-cp] [data-fz-control="quiet"]:hover {
  background-color: var(--bg-subtle-hover, rgba(255, 255, 255, .15)) !important;
}
[data-cp] [data-fz-control="solid"]:hover {
  background-color: var(--bg-solid-hover, #eee) !important;
}

/* A pressed control gives way slightly. The console has no equivalent — none of
   its buttons acknowledge the press — but the portal is the half of the product
   a client touches, and a board you drag cards around should say when it has
   taken the pointer. Kept to opacity so it cannot disturb a layout mid-drag. */
[data-cp] [data-fz-control]:active { opacity: .82; }

/* Locked sections are not hoverable, because they are not usable. The artboard
   marks them aria-disabled and gives them cursor:not-allowed; a hover state
   would contradict both. portal-ui.js leaves them unmarked, and this is here to
   say why they are missing rather than to add anything. */

/* An option in a segmented control is the other exception. It is transparent
   and the pill slides underneath it, so the hover pair above would paint over
   the one thing that moves. It brightens its label instead — on the same
   `color .25s ease` the console's options already carry, which is where the
   duration comes from. The current option is white already, so this reads as a
   hover only on the options you can actually move to. */
[data-cp] [data-fz-seg] button:hover { color: #fff !important; }

/* --------------------------------------------------------------------------
   The section heading stays put.

   The console's title bar is sticky and backdrop-blurred, so the module you are
   in and the controls that act on it are readable however far down you have
   scrolled. The portal's heading sat in the normal flow of the pane that
   scrolls, so Assets, Tickets, Subscription and the account screen all scrolled
   their own titles away.

   Values are the console's header, verbatim: rgba(0,0,0,.72), blur(10px), and a
   hairline drawn with an inset shadow rather than a border so it costs no
   layout.
   ------------------------------------------------------------------------ */
[data-cp] [data-fz-head] {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 var(--border-subtle, rgba(255, 255, 255, .1));
  /* The artboard pads the heading 24px from the top of the pane. Sticking it
     there would leave that padding as a transparent gap the content scrolls
     through, so the padding moves below the text. */
  padding: 14px 28px !important;
}

/* --------------------------------------------------------------------------
   Collapsing the rail.

   The console eases its rail's width and the content's margin over .18s. The
   portal's rail changed width in a single frame. Its width and flex-basis are
   both set inline and both change, so both are named here.

   The mobile drawer sets its own transition inline, for transform, and inline
   wins — which is right: on a phone the rail slides in and out rather than
   growing, and it should keep doing that.
   ------------------------------------------------------------------------ */
[data-cp] aside[aria-label="Sections"] {
  transition: width .18s ease, flex-basis .18s ease;
}