/* Shared control primitives — buttons, fields, placeholders.
   Loaded by BOTH shells: public/v6/index.html links it directly, and the React
   app pulls it in via the @import at the top of src/components/v6/v6.css. So a
   button looks the same on the canvas and on every React page.

   Every page used to re-inline its own pills, fields and disabled states, so
   they drifted per page and broke on light themes. This file is the ONE
   definition — theme-token driven, legible in all 50 themes, correct in both
   materials. Use these classes; do not re-inline a button or a field.
   Brock 2026-07-29: "This doesn't persist across all buttons (pages either)
   and should." */

.nxs6-pill {
  font-size: 0.78125rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(var(--ink), .14);
  background: rgba(var(--ink), .06);
  color: rgba(var(--ink), .8);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nxs6-pill:hover { background: rgba(var(--ink), .1); }
.nxs6-pill.is-solid {
  background: rgba(var(--ink), .85);
  color: rgb(var(--sheet));
  border-color: transparent;
}
.nxs6-pill.is-solid:hover { background: rgba(var(--ink), .92); }

/* Disabled is quiet but never low-contrast. Opacity on a solid fill drags the
   label and the background toward each other and goes unreadable on light
   themes — so disabled gets its own legible pair instead. */
.nxs6-pill:disabled,
.nxs6-pill[aria-disabled='true'] {
  background: rgba(var(--ink), .06);
  border-color: rgba(var(--ink), .14);
  color: rgba(var(--ink), .55);
  cursor: not-allowed;
}
.nxs6-pill:disabled:hover { background: rgba(var(--ink), .06); }

.nxs6-field {
  width: 100%;
  border: 1px solid rgba(var(--ink), .16);
  border-radius: 11px;
  padding: 7px 10px;
  font-size: 0.75rem;
  background: transparent;
  color: rgba(var(--ink), .9);
  outline: none;
  transition: border-color 160ms ease;
}
.nxs6-field:focus { border-color: rgba(var(--ink), .42); }

/* Placeholders were browser-default grey — invisible on light themes. */
.nxs6-field::placeholder { color: rgba(var(--ink), .38); opacity: 1; }
.nxs6-field::-webkit-input-placeholder { color: rgba(var(--ink), .38); }

/* Native selects and options paint from the OS palette unless told otherwise,
   which is how a dark-theme dropdown ends up black-on-black. */
select.nxs6-field { color-scheme: inherit; }
select.nxs6-field option {
  background: rgb(var(--sheet));
  color: rgba(var(--ink), .9);
}

/* Shared action geometry; semantic controls keep their own interaction. */
:root {--nxs-control-height:44px;--nxs-control-radius:14px;--nxs-control-fill:color-mix(in srgb,var(--linkC,#577fab) 10%,transparent)}
.nxs6-pill {min-height:var(--nxs-control-height);padding:8px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:var(--nxs-control-fill)}
.nxs6-pill.is-solid,.nxs6-pill.is-solid:hover {background:var(--linkC,#577fab);color:rgb(var(--sheet,255 255 255));border-color:transparent}
button[aria-label^='Close' i],button[aria-label^='Dismiss' i],button.nxs-icon-control {
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;
  flex:0 0 44px;border:0;border-radius:var(--nxs-control-radius);background:var(--nxs-control-fill);
  color:var(--linkC,#577fab);box-shadow:none;font-size:22px;line-height:1;
}
button[aria-label^='Close' i] svg,button[aria-label^='Dismiss' i] svg,button.nxs-icon-control svg {width:22px;height:22px;stroke-width:1.7;flex:none}
html input[type='checkbox']:not([role='switch']) {
  appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-grid;place-content:center;
  width:22px;min-width:22px;height:22px;min-height:22px;max-height:22px;flex:0 0 22px;
  padding:0;border:1.5px solid color-mix(in srgb,var(--linkC,#577fab) 55%,transparent);
  border-radius:6px;background:var(--nxs-control-fill);box-shadow:none;vertical-align:middle;
  accent-color:var(--linkC,#577fab);cursor:pointer;
}
html input[type='checkbox']:not([role='switch']):checked,
html input[type='checkbox']:not([role='switch']):indeterminate {background:var(--linkC,#577fab);border-color:var(--linkC,#577fab)}
html input[type='checkbox']:not([role='switch']):checked::after {
  content:'';display:block;width:12px;height:7px;border:solid rgb(var(--sheet,255 255 255));border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);
}
html input[type='checkbox']:not([role='switch']):indeterminate::after {content:'';width:12px;height:2px;background:rgb(var(--sheet,255 255 255))}
html input[type='checkbox']:disabled {opacity:.45;cursor:not-allowed}
html input[type='checkbox']:focus-visible,button.nxs-icon-control:focus-visible {outline:2px solid var(--linkC,#577fab);outline-offset:3px}
html input[type='radio'] {accent-color:var(--linkC,#577fab);width:22px;height:22px;min-width:22px;min-height:22px;padding:0;flex:none}
@media(forced-colors:active) {html input[type='checkbox']:not([role='switch']){appearance:auto;-webkit-appearance:auto}html input[type='checkbox']::after{display:none!important}}

/* Shared unobtrusive icon actions: generous hit area, no drawn circle. */
html :is(button,a).nxs-icon-action,
html button:is([aria-label^="Close" i],[aria-label^="Dismiss" i],[aria-label="Star"],[aria-label="Unstar"],[aria-label="Favorite"],[aria-label="Unfavorite"]),
html button.nxs-icon-control {
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;
  flex:0 0 44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:var(--color-primary)!important;
}
html :is(button,a).nxs-icon-action svg,
html button:is([aria-label^="Close" i],[aria-label^="Dismiss" i],[aria-label="Star"],[aria-label="Unstar"],[aria-label="Favorite"],[aria-label="Unfavorite"]) svg,
html button.nxs-icon-control svg {width:20px!important;height:20px!important;flex:none!important;filter:none!important}
html .nxs-icon-action:focus-visible {outline:2px solid var(--color-primary);outline-offset:2px}
html .nxs-page-filters {width:100%}
html .nxs-page-filter {margin-left:auto;order:1}
html .nxs-page-filter + * {order:2}

/* The Shift menu is the app-wide more-options control. */
html .nxs-more-button {
  box-sizing:border-box; width:44px; min-width:44px; max-width:44px;
  height:44px; min-height:44px; max-height:44px; flex:0 0 44px;
  display:grid; place-items:center; padding:0; margin:0; list-style:none;
  border:1px solid rgba(var(--ink),.16); border-radius:50%;
  background:transparent; color:rgba(var(--ink),.85); box-shadow:none; cursor:pointer;
}
html .nxs-more-button svg {width:18px;height:18px;flex:none;filter:none}
html summary.nxs-more-button::-webkit-details-marker {display:none}
html .nxs-more-button:focus-visible {outline:2px solid var(--linkC);outline-offset:3px}
html .nxs-more-button:disabled {opacity:.5;cursor:not-allowed}