/* The controls Draconia, the hatchery and the Poola creator share (UI-22),
   on PerzKit's flat kit (vendor/perzkit, unedited). This file is the one place
   the button system is set. All three pages load it after the kit, before
   their own style.css (the creator's build copies it into its dist).

   Flat, as the kit is: one fill per control, 1 px borders, no built depth,
   and every state a colour change. Fredoka for everything; no hover star.

   Primary     the kit's .tactile: 40 tall, r10, 15/600, a 44 px touch target.
               One per decision area.
   Secondary   the kit's .secondary: 40 tall, 0/14, 15/500, a 1 px strong
               border, r10, transparent.
   Compact     .secondary.compact: 32 tall, 0/10, 13/500, r10, still a 44 px
               target. Inside panels and toolbars only, never over the world.
   Icon        .secondary.icon-button: the kit's 40 px square; a 32 px square
               when compact, inside panels.
   Floating    .float: a control over the 3D world (not in a panel) gets the
               surface fill and the 3:1 control border, so it reads on a noon
               sky and at night. Controls inside panels stay transparent.
   Panels      every panel here floats over a 3D scene: raised fill, the
               strong border and a soft drop shadow, as the kit's dialog.
   Selected    the blue fill and border with the cream label, for every
               pressed or selected control.
   Disabled    the kit's 45 % for .tactile and .secondary alike.
   Fields      the kit's .field: 40 tall, r10; 17 px for names, 16 for search.
   Radii       10 controls, 12 tiles and artwork, 16 panels; pills for tabs,
               title pills, toasts, nameplates and step indicators. */

.perz .secondary.compact { min-height: 32px; padding: 0 10px; gap: 6px; font-size: var(--perz-type-metadata); }
.perz .secondary.compact::after { inset: calc((32px - var(--perz-control-target)) / 2) 0; }
.perz .secondary[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* icon buttons: the kit's square, and a smaller one inside panels */
.perz .secondary.icon-button { width: var(--perz-control-height); min-width: var(--perz-control-height); padding: 0; }
.perz .secondary.compact.icon-button { width: 32px; min-width: 32px; }
.perz .secondary.compact.icon-button::after { inset: calc((32px - var(--perz-control-target)) / 2); }
/* every line icon: one stroke (Phosphor bold at 18 to 20 px) */
.perz .secondary svg, .perz .tool svg, .sound svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.perz .secondary svg { width: 18px; height: 18px; flex: none; }
.perz .secondary.icon-button svg { width: 20px; height: 20px; }
.perz .secondary.compact.icon-button svg { width: 16px; height: 16px; }
/* the kit's own icons (Phosphor bold, and the Discord mark from kit/icons/brands) are filled, not stroked */
.perz .secondary svg.solid { fill: currentColor; stroke: none; }

/* over the world */
.perz .float { background: var(--perz-surface); border-color: var(--perz-control-border); }
@media (hover: hover) and (pointer: fine) { .perz .float:hover:not(:disabled) { background: var(--perz-raised); border-color: var(--perz-text-secondary); } }

/* panels over a 3D scene */
.perz .panel { background: var(--perz-raised); border-color: var(--perz-border-strong); box-shadow: 0 12px 32px rgb(0 0 0 / .32); }

/* selected */
.perz .secondary[aria-pressed="true"], .perz .secondary[aria-selected="true"], .perz .tab[aria-selected="true"], .perz .tool[aria-pressed="true"] { background: var(--perz-blue-face); border-color: var(--perz-blue-face); color: var(--perz-on-accent); }

/* fields: the kit's, without its block margin where a card sets the spacing */
.perz .field.tight { margin: 0; }
.perz .field.name input { font-size: 17px; line-height: 22px; font-weight: 500; }
.perz .field.query input { font-size: 16px; }

/* one row, one height class: everything centred on the row */
.perz .card-foot, .perz .hud, .perz .dc-buttons, .perz .me-actions { align-items: center; }

/* .muted: one size */
.perz .muted { font-size: var(--perz-type-metadata); }

/* title pills: one size, the page's name in Fredoka 600, as tall as a control */
.perz .title-pill { display: flex; align-items: center; min-height: var(--perz-control-height); margin: 0; padding: 0 16px; border-radius: 999px; background: var(--perz-surface); border: 1px solid var(--perz-control-border); color: var(--perz-text); font: 600 var(--perz-type-subsection)/1.2 var(--perz-font-body); letter-spacing: 0; white-space: nowrap; }

/* the step indicator: dots and "n of N" in a pill (the creator's, now the hatchery's too) */
.progress { display: flex; align-items: center; gap: 10px; min-height: var(--perz-control-height); padding: 0 14px; border-radius: 999px; background: var(--perz-surface); border: 1px solid var(--perz-control-border); }
.steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.steps li { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 1px solid var(--perz-control-border); }
.steps li.past { background: var(--perz-blue-face); border-color: var(--perz-blue-face); }
.steps li.now { background: var(--perz-text); border-color: var(--perz-text); }
.step-count { font-size: var(--perz-type-metadata); font-weight: 500; color: var(--perz-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* toasts: one style, a pill at the top centre in Fredoka 15/500, the star on
   the left, a name in 600 (.toast-name). Each page sets top. */
.toast-pill { position: fixed; z-index: 8; left: 50%; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); min-height: var(--perz-control-height); padding: 0 16px; border-radius: 999px; background: var(--perz-raised); border: 1px solid var(--perz-control-border); box-shadow: 0 12px 32px rgb(0 0 0 / .32); color: var(--perz-text); font: 500 var(--perz-type-body)/1.3 var(--perz-font-body); white-space: nowrap; opacity: 0; translate: -50% -6px; pointer-events: none; transition: opacity var(--perz-feedback-duration) var(--perz-ease-out), translate var(--perz-feedback-duration) var(--perz-ease-out); }
.toast-pill[hidden] { display: none; }
.toast-pill.show { opacity: 1; translate: -50% 0; }
.toast-pill .star { width: 12px; height: 12px; color: var(--perz-focus); flex: none; }
.toast-pill .toast-name { font-weight: 600; }
.toast-pill > span { overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .toast-pill { transition: opacity var(--perz-feedback-duration) linear; translate: -50% 0; } }

/* the account button (account-chip.js) in the hatchery's and the creator's bar */
.acct { position: relative; }
.acct[hidden] { display: none; }
.acct .avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; color: #121316; font: 600 14px/1 var(--perz-font-body); }
.acct .avatar img { width: 100%; height: 100%; object-fit: cover; }
.perz .acct-btn { overflow: hidden; }
.perz .acct-btn.signed { padding: 0; }
.acct-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 9; width: 240px; padding: 14px 16px; }
.acct-pop[hidden] { display: none; }
.perz .acct-pop h2 { font-size: var(--perz-type-subsection); margin: 0 0 4px; overflow-wrap: anywhere; }
.acct-pop p { margin: 0 0 12px; }

/* the sound control at the bottom left, above a bottom card (sound.js dockSound) */
.sound.sound-dock { position: fixed; z-index: 7; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(var(--sound-bottom, 12px) + env(safe-area-inset-bottom, 0px)); }

/* a primary that waits (Next before the step is done): the kit's disabled
   45 %, but still focusable, so pressing it can say why */
.perz .tactile.blocked { opacity: .45; cursor: not-allowed; }