/*
A26 Web Design System — Primitive Components
Version: v1.0.0-alpha.0013-menu-controls
*/

@layer a26.components {
  :root {
    --a26-control-hit-min: 44px;
    --a26-control-compact-visual-min: 28px;
    --a26-pane-bg: var(--a26-bg-pane);
    --a26-pane-border: var(--a26-separator);
    --a26-toolbar-height: 52px;
    --a26-toolbar-padding-x: var(--a26-space-4);
    --a26-toolbar-gap: var(--a26-space-2);
    --a26-toolbar-compact-height: 48px;
    --a26-toolbar-section-gap: 12px;
    --a26-toolbar-title-max: 15ch;
    --a26-toolbar-bg: var(--a26-material-regular-fill);
    --a26-toolbar-blur: var(--a26-material-regular-blur);
    --a26-sidebar-width: 280px;
    --a26-sidebar-bg: var(--a26-material-regular-fill);
    --a26-sidebar-blur: var(--a26-material-regular-blur);
    --a26-group-bg: var(--a26-bg-surface);
    --a26-group-radius: var(--a26-radius-lg);
    --a26-group-border-width: 1px;
    --a26-group-header-padding-x: var(--a26-space-4);
    --a26-group-shadow: none;
    --a26-group-border: var(--a26-separator);
    --a26-row-min-height: 44px;
    --a26-row-padding-x: var(--a26-space-4);
    --a26-row-padding-y: 10px;
    --a26-row-title-color: var(--a26-text-primary);
    --a26-row-subtitle-color: var(--a26-text-secondary);
    --a26-row-meta-color: var(--a26-text-tertiary);
    --a26-row-gap: var(--a26-space-3);
    --a26-row-leading-size: 30px;
    --a26-row-separator: var(--a26-separator);
    --a26-tag-height: 22px;
    --a26-tag-padding-x: 8px;
    --a26-tag-bg: var(--a26-fill-tertiary);
    --a26-tag-text: var(--a26-text-secondary);
    --a26-row-hover-bg: var(--a26-fill-quaternary);
    --a26-row-pressed-bg: var(--a26-fill-tertiary);
    --a26-row-selected-bg: var(--a26-accent);
    --a26-row-selected-text: #ffffff;
    --a26-row-highlight-radius: var(--a26-radius-md);
    --a26-row-stack-gap: 2px;
    --a26-row-list-inset: 6px;
    --a26-button-height: 34px;
    --a26-button-padding-x: 14px;
    --a26-button-radius: var(--a26-radius-pill);
    --a26-button-bg: var(--a26-fill-tertiary);
    --a26-button-bg-hover: var(--a26-fill-secondary);
    --a26-button-text: var(--a26-text-primary);

    --a26-button-border: var(--a26-separator);
    --a26-button-pressed-scale: .975;
    --a26-button-disabled-opacity: .42;
    --a26-button-prominent-bg: var(--a26-accent);
    --a26-button-prominent-text: #ffffff;
    --a26-button-destructive: var(--a26-status-danger);
    --a26-button-cancel-text: var(--a26-text-secondary);
    --a26-button-loading-spinner-size: 14px;
    --a26-split-sidebar-width: 280px;
    --a26-split-secondary-width: 360px;
    --a26-split-tertiary-min-width: 420px;
    --a26-split-divider: 1px solid var(--a26-separator);
  }
  .a26-app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--a26-sidebar-width) minmax(0, 1fr); background: var(--a26-bg-app); color: var(--a26-text-primary); }
  .a26-pane { min-width: 0; min-height: 100vh; background: var(--a26-pane-bg); border-inline-start: 1px solid var(--a26-pane-border); display: flex; flex-direction: column; }
  .a26-pane__content { flex: 1; min-width: 0; padding: var(--a26-space-5); overflow: auto; }
  .a26-toolbar { min-height: var(--a26-toolbar-height); padding-inline: var(--a26-toolbar-padding-x); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--a26-toolbar-gap); background: var(--a26-toolbar-bg); backdrop-filter: var(--a26-toolbar-blur); -webkit-backdrop-filter: var(--a26-toolbar-blur); border-bottom: 1px solid var(--a26-separator); }
  .a26-toolbar__leading, .a26-toolbar__center, .a26-toolbar__trailing { display: flex; align-items: center; gap: var(--a26-space-2); min-width: 0; }
  .a26-toolbar__center { justify-content: center; }
  .a26-toolbar__trailing { justify-content: flex-end; }
  .a26-toolbar__title { margin: 0; font: var(--a26-font-headline); color: var(--a26-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a26-sidebar { min-height: 100vh; padding: var(--a26-space-5) var(--a26-space-4); background: var(--a26-sidebar-bg); backdrop-filter: var(--a26-sidebar-blur); -webkit-backdrop-filter: var(--a26-sidebar-blur); display: flex; flex-direction: column; gap: var(--a26-space-4); }
  .a26-sidebar__title { margin: 0; font: var(--a26-font-title-3); font-weight: var(--a26-type-title-3-weight-bold); }
  .a26-sidebar__section-title { margin: var(--a26-space-3) var(--a26-space-2) var(--a26-space-1); font: var(--a26-font-caption-1); color: var(--a26-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .a26-sidebar__item { min-height: var(--a26-control-hit-min); padding: 8px 10px; display: flex; align-items: center; gap: var(--a26-space-2); border-radius: var(--a26-radius-md); color: var(--a26-text-primary); text-decoration: none; }
  .a26-sidebar__item:hover { background: var(--a26-fill-quaternary); }
  .a26-sidebar__item[aria-current="page"], .a26-sidebar__item[aria-selected="true"] { background: var(--a26-accent); color: #ffffff; }
  .a26-group { background: var(--a26-group-bg); border: 1px solid var(--a26-group-border); border-radius: var(--a26-group-radius); overflow: hidden; }
  .a26-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--a26-row-stack-gap); }
  .a26-list-row { min-height: var(--a26-row-min-height); padding: var(--a26-row-padding-y) var(--a26-row-padding-x); display: flex; align-items: center; gap: var(--a26-space-3); color: var(--a26-row-title-color); border-radius: var(--a26-row-highlight-radius); }
  .a26-list-row + .a26-list-row { border-top: 0; }
  .a26-list-row:hover { background: var(--a26-row-hover-bg); }
  .a26-list-row[aria-current="page"], .a26-list-row[aria-selected="true"], .a26-list-row[data-selected="true"], .a26-list-row[data-state="selected"] { background: var(--a26-row-selected-bg); color: var(--a26-row-selected-text); }
  .a26-list-row__content { min-width: 0; flex: 1; }
  .a26-list-row__title { margin: 0; font: var(--a26-font-body); color: var(--a26-row-title-color); }
  .a26-list-row__subtitle { margin: 2px 0 0; font: var(--a26-font-subheadline); color: var(--a26-row-subtitle-color); }
  .a26-list-row__meta { margin: 0; font: var(--a26-font-footnote); color: var(--a26-row-meta-color); white-space: nowrap; }
  .a26-button, .a26-icon-button { min-height: var(--a26-control-hit-min); min-width: var(--a26-control-hit-min); border: 0; border-radius: var(--a26-button-radius); font: var(--a26-font-callout); color: var(--a26-button-text); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--a26-space-2); cursor: pointer; }
  .a26-button { min-height: var(--a26-button-height); padding-inline: var(--a26-button-padding-x); background: var(--a26-button-bg); }
  .a26-button:hover, .a26-icon-button:hover { background: var(--a26-button-bg-hover); }
  .a26-button:active, .a26-icon-button:active { transform: scale(.98); }
  .a26-button:focus-visible, .a26-icon-button:focus-visible, .a26-sidebar__item:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent); outline-offset: 2px; }
  .a26-button[data-variant="plain"] { background: transparent; color: var(--a26-accent); }
  .a26-button[data-variant="tinted"] { background: var(--a26-fill-secondary); color: var(--a26-accent); }
  .a26-button[data-variant="prominent"] { background: var(--a26-accent); color: white; }
  .a26-button[data-role="destructive"] { color: var(--a26-status-danger); }
  .a26-button[data-variant="prominent"][data-role="destructive"] { background: var(--a26-status-danger); color: white; }
  @media (max-width: 760px) { .a26-app-shell { grid-template-columns: 1fr; } .a26-sidebar { min-height: auto; } .a26-pane { border-inline-start: 0; } .a26-toolbar { grid-template-columns: 1fr auto; } .a26-toolbar__center { display: none; } }
}


/* Search and text input tokens · v1.0.0-alpha.0011 */
:root {
  --a26-search-field-height: 36px;
  --a26-search-field-width: 260px;
  --a26-search-field-radius: 13px;
  --a26-search-field-padding-x: 11px;
  --a26-search-field-bg: var(--a26-fill-quaternary);
  --a26-search-field-bg-focus: var(--a26-bg-elevated);
  --a26-search-field-border: transparent;

  --a26-text-field-height: 38px;
  --a26-text-field-radius: 12px;
  --a26-text-field-bg: var(--a26-bg-surface);
  --a26-text-field-border: var(--a26-separator);
  --a26-focus-ring-color: var(--a26-accent);
}


/* Selection control tokens · v1.0.0-alpha.0012 */
:root {
  --a26-segmented-height: 36px;
  --a26-segmented-compact-height: 32px;
  --a26-segmented-radius: 12px;
  --a26-segmented-bg: var(--a26-fill-tertiary);
  --a26-segmented-selected-bg: var(--a26-bg-elevated);
  --a26-segmented-selected-shadow: 0 1px 2px #00000044, 0 6px 18px #00000044;
  --a26-segmented-divider: var(--a26-separator);

  --a26-switch-width: 51px;
  --a26-switch-height: 31px;
  --a26-switch-thumb-size: 27px;
  --a26-switch-track-off: var(--a26-fill-secondary);
  --a26-switch-track-on: var(--a26-accent-green);

  --a26-choice-size: 18px;
  --a26-choice-border: var(--a26-separator-opaque);
  --a26-choice-fill: var(--a26-accent);

  --a26-picker-height: 38px;
  --a26-picker-radius: 12px;
  --a26-picker-bg: var(--a26-bg-surface);

  --a26-slider-track-height: 5px;
  --a26-slider-thumb-size: 24px;
  --a26-slider-track-bg: var(--a26-fill-tertiary);
  --a26-slider-fill: var(--a26-accent);

  --a26-stepper-height: 32px;
  --a26-stepper-width: 68px;
  --a26-stepper-radius: 10px;
  --a26-stepper-bg: var(--a26-fill-tertiary);
}


/* Menu control tokens · v1.0.0-alpha.0013 */
:root {
  --a26-menu-min-width: 210px;
  --a26-menu-radius: 14px;
  --a26-menu-padding-y: 6px;
  --a26-menu-bg: var(--a26-material-regular-fill);
  --a26-menu-blur: var(--a26-material-regular-blur);
  --a26-menu-border: var(--a26-separator);
  --a26-menu-shadow: 0 16px 44px #00000044, 0 2px 8px #00000042;
  --a26-menu-item-height: 34px;
  --a26-menu-item-padding-x: 12px;
  --a26-menu-item-hover-bg: var(--a26-fill-tertiary);
  --a26-menu-separator: var(--a26-separator);

  --a26-popup-button-height: 38px;
  --a26-popup-button-radius: 12px;
  --a26-popup-button-bg: var(--a26-bg-surface);
  --a26-popup-button-border: var(--a26-separator);

  --a26-pulldown-button-height: 34px;
  --a26-pulldown-button-radius: var(--a26-radius-pill);
  --a26-pulldown-button-bg: var(--a26-fill-tertiary);
}


/* Presentation surfaces — alpha.0014 */
:root {
  --a26-presentation-radius: 22px;
  --a26-popover-radius: 18px;
  --a26-alert-width: 420px;
  --a26-action-sheet-width: 520px;
  --a26-presentation-shadow: 0 24px 70px rgba(0,0,0,.28);
  --a26-presentation-backdrop: rgba(0,0,0,.22);
}


/* Content structure tokens · v1.0.0-alpha.0016 */
:root {
  --a26-box-bg: var(--a26-bg-surface);
  --a26-box-border: var(--a26-separator);
  --a26-box-radius: var(--a26-radius-lg);
  --a26-box-padding: var(--a26-space-4);
  --a26-collection-gap: var(--a26-space-3);
  --a26-collection-radius: var(--a26-radius-lg);
}