/* The shared parts: buttons, rows, menus, dialogs, fields, switches, banners, skeletons. SPDX-License-Identifier: Apache-2.0 */

@layer components {
  .panel {
    --panel-pad-y: var(--space-8);
    --panel-pad-x: var(--space-6);
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--panel-pad-y) var(--panel-pad-x);
  }

  .btn {
    --btn-bg: var(--panel);
    --btn-ink: var(--ink-soft);
    --btn-line: var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border: var(--hairline) solid var(--btn-line);
    border-radius: var(--radius-btn);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-size: var(--text-menu);
    text-decoration: none;
  }
  .btn:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--btn-ink)); }
  .btn-primary {
    --btn-bg: var(--accent);
    --btn-ink: var(--on-accent);
    --btn-line: var(--accent);
  }
  .btn-primary:hover { background: var(--accent-hover); }

  .btn-quiet {
    --btn-ink: var(--accent);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-md);
  }

  .btn:disabled, .btn:disabled:hover {
    --btn-bg: var(--panel);
    --btn-ink: var(--ink-faint);
    --btn-line: var(--line);
    background: var(--btn-bg);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .field-label {
    color: var(--ink-soft);
    font-size: var(--text-sm);
  }
  .field-input {
    padding: var(--input-pad-y) var(--space-5);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-md);
  }
  .field-input::placeholder { color: var(--ink-faint); }
  textarea.field-input { resize: vertical; line-height: var(--leading); }

  .icon-btn {
    --icon-btn-ink: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hit-target);
    min-height: var(--hit-target);
    padding: var(--space-3);
    border-radius: var(--radius-btn);
    color: var(--icon-btn-ink);
    flex: 0 0 auto;
  }
  .icon-btn:hover { background: var(--mist); color: var(--ink); }
  .icon, .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    flex: 0 0 auto;
  }

  .row {
    --row-ink: var(--ink-soft);
    --row-bg: transparent;
    --row-font: var(--text-base);
    --row-pad-left: var(--row-pad-x);
    display: flex;
    align-items: center;
    gap: var(--row-pad-x);
    width: 100%;
    padding: var(--row-pad-y) var(--row-pad-x) var(--row-pad-y) var(--row-pad-left);
    border-radius: var(--radius-sm);
    background: var(--row-bg);
    color: var(--row-ink);
    font-size: var(--row-font);
    text-align: left;
  }
  button.row:hover { --row-bg: var(--mist); --row-ink: var(--ink); }
  .row-nested {
    --row-font: var(--text-row);
    --row-pad-left: var(--row-indent);
  }
  .row-current, .row[aria-current="page"] {
    --row-bg: var(--accent-soft);
    --row-ink: var(--accent);
  }
  .row-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    color: var(--ink-faint);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .menu {
    --menu-pad: var(--space-2);
    --menu-radius: var(--radius-btn);
    position: fixed;
    inset: auto;
    margin: 0;
    top: var(--menu-top, 0);
    left: var(--menu-left, 0);
    min-width: var(--menu-min-width);
    padding: var(--menu-pad);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--menu-radius);
    box-shadow: var(--shadow);
    color: var(--ink-soft);
  }
  .menu:not(:popover-open) { display: none; }
  .menu-item {
    --menu-item-ink: var(--ink-soft);
    --menu-item-bg: transparent;
    --menu-item-pad-y: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--menu-item-pad-y) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--menu-item-bg);
    color: var(--menu-item-ink);
    font-size: var(--text-menu);
    text-align: left;
    white-space: nowrap;
  }
  .menu-item:hover, .menu-item:focus-visible {
    --menu-item-bg: var(--mist);
    --menu-item-ink: var(--ink);
  }
  .menu-item[data-tone="danger"] { --menu-item-ink: var(--warn); }

  .menu-note {
    padding: var(--space-3) var(--space-5);
    color: var(--ink-faint);
    font-size: var(--text-note);
  }

  .menu-choice-words { display: flex; flex-direction: column; gap: var(--space-1); white-space: normal; }

  .menu-footnote {
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-2);
    border-top: var(--hairline) solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: var(--leading);
    white-space: normal;
  }
  .menu-heading {
    padding: var(--space-4) var(--space-5) var(--space-2);
    color: var(--ink-faint);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .menu-item[data-tone="danger"]:hover,
  .menu-item[data-tone="danger"]:focus-visible { --menu-item-ink: var(--warn); }

  .menu-item[aria-haspopup] > .icon { margin-left: auto; color: var(--ink-faint); }
  .menu-item[aria-haspopup] > .icon, .menu-item[aria-haspopup] > .icon svg { width: var(--icon-sm); height: var(--icon-sm); }

  .dialog {
    width: min(var(--dialog-width), calc(100vw - var(--space-11)));
    max-height: calc(100vh - var(--space-12) - var(--space-12));
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dialog);
    color: var(--ink);
    overflow: hidden;
  }
  .dialog[open] { display: flex; flex-direction: column; }
  .dialog::backdrop { background: var(--scrim); }
  .dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-8);
    border-bottom: var(--hairline) solid var(--line);
  }
  .dialog-title {
    font-size: var(--text-base);
    font-weight: var(--weight-strong);
  }
  .dialog-body {
    padding: var(--space-8);
    overflow-y: auto;
    color: var(--ink-soft);
  }
  .dialog-body p { margin-bottom: var(--space-6); }
  .note-faint {
    color: var(--ink-faint);
    font-size: var(--text-note);
  }

  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ink);
    font-size: var(--text-md);
  }

  .view-switch {
    --knob-x: 0%;
    position: relative;
    display: inline-grid;
    grid-template-columns: var(--view-switch-half) var(--view-switch-half);
    padding: var(--view-switch-pad);
    border-radius: var(--radius-pill);
    background: var(--view-switch-track);
  }
  .view-switch[data-state="second"] { --knob-x: 100%; }
  .view-switch::before {
    content: "";
    position: absolute;
    top: var(--view-switch-pad);
    bottom: var(--view-switch-pad);
    left: var(--view-switch-pad);
    width: var(--view-switch-half);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--panel);
    transform: translateX(var(--knob-x));
    transition: transform var(--motion-slide);
  }
  .view-switch-half {
    position: relative;
    padding: var(--space-3) 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    cursor: pointer;
  }
  .view-switch-half[aria-selected="true"] { color: var(--accent); font-weight: var(--weight-medium); cursor: default; }
  .view-switch-half[aria-disabled="true"] { cursor: not-allowed; }
  .view-switch-half:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-radius: var(--radius-pill); }

  .banner {
    padding: var(--space-5) var(--space-7);
    border: var(--hairline) solid var(--warn-line);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--warn);
    overflow-wrap: anywhere;
  }

  .skeleton {
    display: block;
    height: var(--skeleton-line);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer var(--motion-shimmer) ease-in-out infinite;
  }

  .skeleton-row { width: 70%; margin: var(--row-pad-y) var(--row-pad-x); }
  @keyframes skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }
}