/*
  Panel components. Requires tokens.css.
  Scope: everything applies inside an element with class "pn".
  States: :hover, :focus-visible, :disabled, and aria-invalid="true" are the real states.
  data-force="hover" and data-force="focus" exist only so the living page can show a state statically.
  Status: Proposed (philosophy-dependent).
*/

/* Base */

.pn {
  font-family: var(--pn-font-sans);
  font-size: var(--pn-text-sm);
  line-height: var(--pn-leading-normal);
  color: var(--pn-color-text);
  background: var(--pn-color-bg);
  -webkit-font-smoothing: antialiased;
}

.pn [hidden] {
  display: none !important;
}

/* The one rule outside .pn: a page that holds the panel layout gives it the whole viewport */
body:has(.pn-layout) {
  margin: 0;
  background: var(--pn-color-bg);
}

.pn *,
.pn *::before,
.pn *::after {
  box-sizing: border-box;
}

.pn :focus-visible,
.pn [data-force="focus"] {
  outline: var(--pn-focus-width) solid var(--pn-color-focus);
  outline-offset: var(--pn-focus-offset);
}

.pn-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Icon */

.pn-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Button */

.pn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pn-space-2);
  height: var(--pn-control-height);
  padding: 0 var(--pn-space-2);
  font: inherit;
  font-size: var(--pn-text-sm);
  font-weight: var(--pn-weight-medium);
  line-height: 1;
  color: var(--pn-color-text);
  text-decoration: none;
  white-space: nowrap;
  background: var(--pn-color-fill);
  border: 0;
  border-radius: var(--pn-radius-md);
  cursor: pointer;
  transition: background-color var(--pn-duration), border-color var(--pn-duration), color var(--pn-duration);
}

.pn-button:hover,
.pn-button[data-force="hover"] {
  background: var(--pn-color-fill-hover);
}

.pn-button[data-variant="primary"] {
  color: var(--pn-color-positive);
  background: var(--pn-color-positive-soft);
}

.pn-button[data-variant="primary"]:hover,
.pn-button[data-variant="primary"][data-force="hover"] {
  background: color-mix(in srgb, var(--pn-color-positive-soft), var(--pn-color-positive) 12%);
}

.pn-button[data-variant="negative"] {
  color: var(--pn-color-negative);
  background: transparent;
}

.pn-button[data-variant="negative"]:hover,
.pn-button[data-variant="negative"][data-force="hover"] {
  background: var(--pn-color-negative-soft);
}

.pn-button[data-variant="quiet"] {
  background: transparent;
}

.pn-button[data-variant="quiet"]:hover,
.pn-button[data-variant="quiet"][data-force="hover"] {
  background: var(--pn-color-surface-hover);
}

.pn-button[data-size="sm"] {
  height: var(--pn-control-height-sm);
  padding: 0 var(--pn-space-2);
  font-size: var(--pn-text-xs);
}

.pn-button[data-icon-only] {
  width: var(--pn-control-height);
  padding: 0;
}

.pn-button[data-icon-only][data-size="sm"] {
  width: var(--pn-control-height-sm);
}

.pn-button:disabled,
.pn-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Field: label, help, error, and the control between them */

.pn-field {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-2);
  min-width: 0;
}

.pn-label {
  font-size: var(--pn-text-sm);
  font-weight: var(--pn-weight-medium);
  color: var(--pn-color-text);
}

.pn-label[data-required="true"]::after {
  content: "*";
  margin-left: var(--pn-space-1);
  font-size: var(--pn-text-xs);
  color: var(--pn-color-text-muted);
}

.pn-help {
  margin: 0;
  font-size: var(--pn-text-xs);
  color: var(--pn-color-text-muted);
}

.pn-error {
  margin: 0;
  font-size: var(--pn-text-xs);
  font-weight: var(--pn-weight-medium);
  color: var(--pn-color-negative);
}

.pn-error:empty {
  display: none;
}

/* Text input, textarea, select */

.pn-input,
.pn-textarea,
.pn-select {
  display: block;
  width: 100%;
  min-height: var(--pn-input-height);
  margin: 0;
  padding: var(--pn-space-2);
  font: inherit;
  font-size: var(--pn-text-sm);
  line-height: var(--pn-leading-tight);
  color: var(--pn-color-text);
  background: var(--pn-color-surface);
  border: var(--pn-border-width) solid var(--pn-color-border-control);
  border-radius: var(--pn-radius-md);
  transition: border-color var(--pn-duration);
}

.pn-input:focus-visible,
.pn-textarea:focus-visible,
.pn-select:focus-visible,
.pn-input[data-force="focus"],
.pn-textarea[data-force="focus"],
.pn-select[data-force="focus"] {
  outline-offset: -1px;
  border-color: var(--pn-color-focus);
}

.pn-input::placeholder,
.pn-textarea::placeholder {
  color: var(--pn-color-text-muted);
  opacity: 1;
}

.pn-input:hover,
.pn-textarea:hover,
.pn-select:hover,
.pn-input[data-force="hover"],
.pn-textarea[data-force="hover"],
.pn-select[data-force="hover"] {
  border-color: color-mix(in srgb, var(--pn-color-border-control), var(--pn-color-text) 18%);
}

.pn-textarea {
  min-height: 7rem;
  line-height: var(--pn-leading-normal);
  resize: vertical;
}

.pn-select {
  padding-right: var(--pn-space-6);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 1rem center,
    right calc(1rem - 5px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.pn-input[aria-invalid="true"],
.pn-textarea[aria-invalid="true"],
.pn-select[aria-invalid="true"] {
  border-color: var(--pn-color-negative);
}

.pn-input:disabled,
.pn-textarea:disabled,
.pn-select:disabled {
  color: var(--pn-color-text-muted);
  background: var(--pn-color-surface-sunken);
  border-color: var(--pn-color-border);
  cursor: not-allowed;
}

.pn-input[data-mono] {
  font-family: var(--pn-font-mono);
  font-size: var(--pn-text-xs);
}

/* Checkbox and radio */

.pn-choices {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pn-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-2);
  font-size: var(--pn-text-md);
  cursor: pointer;
}

.pn-checkbox,
.pn-radio {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  appearance: none;
  background: var(--pn-color-surface);
  border: var(--pn-border-width) solid var(--pn-color-border-control);
  border-radius: var(--pn-radius-sm);
  cursor: pointer;
}

.pn-radio {
  border-radius: 50%;
}

.pn-checkbox::before {
  content: "";
  width: 0.5rem;
  height: 0.3rem;
  margin-top: -0.15rem;
  border-left: 2px solid var(--pn-color-on-accent);
  border-bottom: 2px solid var(--pn-color-on-accent);
  transform: rotate(-45deg) scale(0);
}

.pn-radio::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pn-color-on-accent);
  transform: scale(0);
}

.pn-checkbox:hover,
.pn-radio:hover,
.pn-checkbox[data-force="hover"],
.pn-radio[data-force="hover"] {
  border-color: var(--pn-color-text);
}

.pn-checkbox:checked,
.pn-radio:checked {
  background: var(--pn-color-accent);
  border-color: var(--pn-color-accent);
}

.pn-checkbox:checked::before {
  transform: rotate(-45deg) scale(1);
}

.pn-radio:checked::before {
  transform: scale(1);
}

.pn-checkbox[aria-invalid="true"],
.pn-radio[aria-invalid="true"],
.pn-choices[aria-invalid="true"] .pn-checkbox,
.pn-choices[aria-invalid="true"] .pn-radio {
  border-color: var(--pn-color-negative);
}

.pn-checkbox:disabled,
.pn-radio:disabled {
  background: var(--pn-color-surface-sunken);
  opacity: 0.55;
  cursor: not-allowed;
}

.pn-checkbox:disabled:checked,
.pn-radio:disabled:checked {
  background: var(--pn-color-text-muted);
}

.pn-choice:has(:disabled) {
  color: var(--pn-color-text-muted);
  cursor: not-allowed;
}

/* Toggle: <input type="checkbox" role="switch" class="pn-toggle"> */

.pn-toggle {
  flex: none;
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  appearance: none;
  background: var(--pn-color-surface-sunken);
  border: var(--pn-border-width) solid var(--pn-color-border-control);
  border-radius: var(--pn-radius-pill);
  cursor: pointer;
  transition: background-color var(--pn-duration);
}

.pn-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 6px);
  height: calc(1.25rem - 6px);
  border-radius: 50%;
  background: var(--pn-color-text-muted);
  transition: transform var(--pn-duration);
}

.pn-toggle:hover,
.pn-toggle[data-force="hover"] {
  border-color: var(--pn-color-text);
}

.pn-toggle:checked {
  background: var(--pn-color-accent);
  border-color: var(--pn-color-accent);
}

.pn-toggle:checked::before {
  background: var(--pn-color-on-accent);
  transform: translateX(1rem);
}

.pn-toggle[aria-invalid="true"] {
  border-color: var(--pn-color-negative);
}

.pn-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tag */

.pn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-1);
  height: 1.5rem;
  padding: 0 var(--pn-space-2);
  font-size: var(--pn-text-sm);
  line-height: 1;
  color: var(--pn-color-on-tag);
  background: var(--pn-color-tag);
  border: var(--pn-border-width) solid var(--pn-color-tag);
  border-radius: var(--pn-radius-sm);
}

.pn-tag-remove {
  display: inline-grid;
  place-content: center;
  width: 1rem;
  height: 1rem;
  margin-right: calc(var(--pn-space-1) * -1);
  padding: 0;
  font-size: var(--pn-text-xs);
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--pn-radius-sm);
  cursor: pointer;
}

.pn-tag-remove:hover,
.pn-tag-remove[data-force="hover"] {
  color: var(--pn-color-tag);
  background: var(--pn-color-on-tag);
}

.pn-tag[aria-invalid="true"] {
  color: var(--pn-color-negative);
  background: var(--pn-color-negative-soft);
  border-color: var(--pn-color-negative);
}

.pn-tag[aria-disabled="true"] {
  color: var(--pn-color-text-muted);
  background: var(--pn-color-surface-sunken);
  border-color: var(--pn-color-border);
}

.pn-tag[aria-disabled="true"] .pn-tag-remove {
  display: none;
}

/* Tags input: tags plus an inline text input, styled as one control */

.pn-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pn-space-1);
  min-height: var(--pn-input-height);
  padding: calc(var(--pn-space-1) + 1px) var(--pn-space-1);
  background: var(--pn-color-surface);
  border: var(--pn-border-width) solid var(--pn-color-border-control);
  border-radius: var(--pn-radius-md);
  cursor: text;
}

.pn-tags-input:hover,
.pn-tags-input[data-force="hover"] {
  border-color: color-mix(in srgb, var(--pn-color-border-control), var(--pn-color-text) 18%);
}

.pn-tags-input:focus-within,
.pn-tags-input[data-force="focus"] {
  border-color: var(--pn-color-focus);
  outline: var(--pn-focus-width) solid var(--pn-color-focus);
  outline-offset: -1px;
}

.pn-tags-input-field {
  flex: 1 1 6rem;
  min-width: 6rem;
  height: 1.5rem;
  padding: 0 var(--pn-space-1);
  font: inherit;
  color: var(--pn-color-text);
  background: transparent;
  border: 0;
}

.pn-tags-input-field:focus-visible {
  outline: none;
}

.pn-tags-input[aria-invalid="true"] {
  border-color: var(--pn-color-negative);
}

.pn-tags-input[aria-disabled="true"] {
  background: var(--pn-color-surface-sunken);
  border-color: var(--pn-color-border);
  cursor: not-allowed;
}

/* Status: a fixed workflow state. Use a <button> when it changes the state. */

.pn-status {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-2);
  height: 1.5rem;
  padding: 0 var(--pn-space-2);
  font: inherit;
  font-size: var(--pn-text-sm);
  font-weight: var(--pn-weight-medium);
  line-height: 1;
  color: var(--pn-color-text);
  background: transparent;
  border: var(--pn-border-width) solid transparent;
  border-radius: var(--pn-radius-sm);
}

.pn-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--pn-color-text-muted);
}

.pn-status[data-tone="positive"]::before {
  background: var(--pn-color-positive);
  border-color: var(--pn-color-positive);
}

.pn-status[data-tone="notice"]::before {
  background: var(--pn-color-notice);
  border-color: var(--pn-color-notice);
}

.pn-status[data-tone="negative"]::before {
  background: var(--pn-color-negative);
  border-color: var(--pn-color-negative);
}

button.pn-status {
  height: var(--pn-control-height);
  background: var(--pn-color-fill);
  border-color: transparent;
  border-radius: var(--pn-radius-md);
  cursor: pointer;
}

button.pn-status:hover,
button.pn-status[data-force="hover"] {
  background: var(--pn-color-fill-hover);
}

.pn-status:disabled {
  color: var(--pn-color-text-muted);
  cursor: not-allowed;
}

.pn-status[aria-invalid="true"] {
  color: var(--pn-color-negative);
  border-color: var(--pn-color-negative);
}

/* Tabs */

.pn-tabs {
  display: flex;
  gap: var(--pn-space-1);
  overflow-x: auto;
  border-bottom: var(--pn-border-width) solid var(--pn-color-border);
}

.pn-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-2);
  height: var(--pn-control-height);
  padding: 0 var(--pn-space-3);
  font: inherit;
  font-size: var(--pn-text-sm);
  font-weight: var(--pn-weight-medium);
  color: var(--pn-color-text-muted);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.pn-tab:hover,
.pn-tab[data-force="hover"] {
  color: var(--pn-color-text);
}

.pn-tab[aria-selected="true"] {
  color: var(--pn-color-text);
  border-bottom-color: var(--pn-color-text);
}

.pn-tab:focus-visible,
.pn-tab[data-force="focus"] {
  outline-offset: -2px;
}

.pn-tab[data-invalid]::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--pn-color-negative);
}

.pn-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Breadcrumb: <nav aria-label="Breadcrumb"><ol class="pn-breadcrumb"> */

.pn-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pn-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--pn-text-sm);
  list-style: none;
}

.pn-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-1);
  min-width: 0;
}

.pn-breadcrumb li + li::before {
  content: "/";
  color: var(--pn-color-text);
  opacity: 0.2;
}

.pn-breadcrumb a {
  display: inline-flex;
  align-items: center;
  height: var(--pn-control-height);
  padding: 0 var(--pn-space-2);
  color: var(--pn-color-text);
  text-decoration: none;
  border-radius: var(--pn-radius-md);
}

.pn-breadcrumb a:hover,
.pn-breadcrumb a[data-force="hover"] {
  background: var(--pn-color-fill);
}

.pn-breadcrumb [aria-current="page"] {
  padding: 0 var(--pn-space-2);
  overflow: hidden;
  font-weight: var(--pn-weight-medium);
  color: var(--pn-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toolbar: a compact group of buttons */

.pn-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--pn-color-surface);
  border: var(--pn-border-width) solid var(--pn-color-border);
  border-radius: var(--pn-radius-md);
}

.pn-toolbar .pn-button {
  border-color: transparent;
  background: transparent;
}

.pn-toolbar .pn-button:hover,
.pn-toolbar .pn-button[data-force="hover"] {
  background: var(--pn-color-surface-hover);
}

.pn-toolbar .pn-button[aria-pressed="true"] {
  background: var(--pn-color-surface-sunken);
  border-color: var(--pn-color-border);
}

/* List of rows: collections, pickers, recent activity */

.pn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-list-item {
  overflow: hidden;
  background: var(--pn-color-surface);
  border-radius: var(--pn-radius-md);
  box-shadow: var(--pn-shadow-card);
}

.pn-list-row {
  display: flex;
  align-items: center;
  gap: var(--pn-space-3);
  min-height: 2.375rem;
  padding: var(--pn-space-2) var(--pn-space-3);
  line-height: var(--pn-leading-tight);
  color: inherit;
  text-decoration: none;
}

a.pn-list-row:hover,
a.pn-list-row[data-force="hover"],
button.pn-list-row:hover {
  background: var(--pn-color-surface-hover);
}

button.pn-list-row {
  width: 100%;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.pn-list-row:focus-visible,
.pn-list-row[data-force="focus"] {
  outline-offset: -2px;
}

.pn-list-text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--pn-space-4);
  min-width: 0;
}

.pn-list-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-list-subtitle {
  overflow: hidden;
  font-size: var(--pn-text-sm);
  color: var(--pn-color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-list-meta {
  flex: none;
  font-size: var(--pn-text-xs);
  color: var(--pn-color-text-muted);
}

.pn-list-item[aria-disabled="true"] .pn-list-row {
  color: var(--pn-color-text-muted);
  pointer-events: none;
}

.pn-list-item[aria-invalid="true"] .pn-list-row {
  box-shadow: inset 3px 0 0 var(--pn-color-negative);
}

/* Spinner */

.pn-spinner {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pn-spin 0.7s linear infinite;
}

@keyframes pn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-spinner {
    animation-duration: 2s;
  }
}

/* Dropzone and file row */

.pn-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pn-space-2);
  min-height: 7rem;
  padding: var(--pn-space-4);
  font-size: var(--pn-text-sm);
  color: var(--pn-color-text-muted);
  text-align: center;
  background: var(--pn-color-surface);
  border: var(--pn-border-width) dashed var(--pn-color-border-control);
  border-radius: var(--pn-radius-md);
  cursor: pointer;
}

.pn-dropzone:hover,
.pn-dropzone[data-force="hover"],
.pn-dropzone[data-dragover] {
  color: var(--pn-color-text);
  background: var(--pn-color-surface-hover);
  border-color: var(--pn-color-text-muted);
}

.pn-dropzone:focus-within,
.pn-dropzone[data-force="focus"] {
  outline: var(--pn-focus-width) solid var(--pn-color-focus);
  outline-offset: var(--pn-focus-offset);
}

.pn-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pn-dropzone[aria-invalid="true"] {
  color: var(--pn-color-negative);
  border-color: var(--pn-color-negative);
}

.pn-dropzone[aria-disabled="true"] {
  background: var(--pn-color-surface-sunken);
  border-color: var(--pn-color-border);
  cursor: not-allowed;
}

.pn-file {
  display: flex;
  align-items: center;
  gap: var(--pn-space-3);
  padding: var(--pn-space-2);
  background: var(--pn-color-surface);
  border: var(--pn-border-width) solid var(--pn-color-border);
  border-radius: var(--pn-radius-md);
}

.pn-file-thumb {
  flex: none;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  background: var(--pn-color-surface-sunken);
  border-radius: var(--pn-radius-sm);
}

.pn-file-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pn-file-name {
  overflow: hidden;
  font-size: var(--pn-text-sm);
  font-weight: var(--pn-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-file-meta {
  font-family: var(--pn-font-mono);
  font-size: var(--pn-text-xs);
  color: var(--pn-color-text-muted);
}

/* Form grid: <div class="pn-grid"> with children carrying data-width from the schema */

.pn-grid {
  display: grid;
  grid-template-columns: repeat(var(--pn-grid-columns), minmax(0, 1fr));
  gap: var(--pn-grid-gap);
}

.pn-grid > * {
  grid-column: span 6;
}

.pn-grid > [data-width="1/2"] {
  grid-column: span 3;
}

.pn-grid > [data-width="1/3"] {
  grid-column: span 2;
}

.pn-grid > [data-width="2/3"] {
  grid-column: span 4;
}

@media (max-width: 40rem) {
  .pn-grid > [data-width] {
    grid-column: span 6;
  }
}

/* Dialog: <dialog class="pn-dialog"> */

.pn-dialog {
  width: min(30rem, calc(100vw - 2 * var(--pn-space-4)));
  max-height: calc(100vh - 2 * var(--pn-space-4));
  padding: 0;
  color: var(--pn-color-text);
  background: var(--pn-color-bg);
  border: 0;
  border-radius: var(--pn-radius-lg);
  box-shadow: var(--pn-shadow-raised);
}

.pn-dialog::backdrop,
.pn-drawer::backdrop {
  background: var(--pn-color-overlay);
}

.pn-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-4);
  padding: var(--pn-space-6) var(--pn-space-6) var(--pn-space-5);
}

.pn-dialog-title {
  margin: 0;
  font-size: var(--pn-text-lg);
  font-weight: var(--pn-weight-medium);
  line-height: var(--pn-leading-tight);
}

.pn-dialog-text {
  margin: 0;
  color: var(--pn-color-text-muted);
}

.pn-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--pn-space-2);
  padding: 0 var(--pn-space-6) var(--pn-space-6);
}

/* Drawer (slide-over): <dialog class="pn-drawer"> */

.pn-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(32rem, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  color: var(--pn-color-text);
  background: var(--pn-color-bg);
  border: 0;
  border-left: var(--pn-border-width) solid var(--pn-color-border);
  box-shadow: var(--pn-shadow-raised);
}

.pn-drawer[open] {
  display: flex;
  flex-direction: column;
}

.pn-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pn-space-3);
  padding: var(--pn-space-3) var(--pn-space-4);
  background: var(--pn-color-surface);
  border-bottom: var(--pn-border-width) solid var(--pn-color-border);
}

.pn-drawer-title {
  margin: 0;
  font-size: var(--pn-text-md);
  font-weight: var(--pn-weight-bold);
}

.pn-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--pn-space-5) var(--pn-space-4);
}

.pn-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--pn-space-2);
  padding: var(--pn-space-3) var(--pn-space-4);
  background: var(--pn-color-surface);
  border-top: var(--pn-border-width) solid var(--pn-color-border);
}

/* Static display of dialogs and drawers, for the living page and the playground */

.pn-dialog[data-static],
.pn-drawer[data-static] {
  position: static;
  inset: auto;
  z-index: auto;
  margin: 0;
}

.pn-dialog[data-static] {
  width: 100%;
  max-width: 100%;
}

.pn-drawer[data-static] {
  width: 100%;
  height: auto;
  border: var(--pn-border-width) solid var(--pn-color-border);
}

.pn-dialog:modal {
  z-index: var(--pn-layer-dialog);
}

.pn-drawer:modal {
  z-index: var(--pn-layer-drawer);
}

/* Toast: <div class="pn-toast" role="status"> inside a .pn-toasts region */

.pn-toasts {
  position: fixed;
  right: var(--pn-space-4);
  bottom: var(--pn-space-4);
  left: var(--pn-space-4);
  z-index: var(--pn-layer-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pn-space-2);
  pointer-events: none;
}

.pn-toasts[data-static] {
  position: static;
  align-items: stretch;
}

.pn-toast {
  display: flex;
  align-items: center;
  gap: var(--pn-space-3);
  width: min(24rem, 100%);
  padding: var(--pn-space-2) var(--pn-space-2) var(--pn-space-2) var(--pn-space-4);
  font-size: var(--pn-text-sm);
  color: var(--pn-color-on-accent);
  background: var(--pn-color-accent);
  border: 0;
  border-radius: var(--pn-radius-md);
  box-shadow: var(--pn-shadow-raised);
  pointer-events: auto;
}

.pn-toast .pn-button {
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.pn-toast .pn-button:hover {
  background: rgb(127 127 127 / 0.25);
}

.pn-toast-text {
  flex: 1;
  margin: 0;
}

.pn-toast[data-tone] {
  box-shadow: var(--pn-shadow-card);
}

.pn-toast[data-tone="positive"] {
  color: var(--pn-color-positive);
  background: var(--pn-color-positive-soft);
}

.pn-toast[data-tone="notice"] {
  color: var(--pn-color-notice);
  background: var(--pn-color-notice-soft);
}

.pn-toast[data-tone="negative"] {
  color: var(--pn-color-negative);
  background: var(--pn-color-negative-soft);
}

/* Empty state */

.pn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pn-space-3);
  padding: var(--pn-space-7) var(--pn-space-4);
  text-align: center;
  color: var(--pn-color-text-muted);
  background: transparent;
  border: var(--pn-border-width) dashed color-mix(in srgb, var(--pn-color-border-control), var(--pn-color-text) 15%);
  border-radius: var(--pn-radius-md);
}

.pn-empty-icon {
  font-size: var(--pn-text-xl);
}

.pn-empty-title {
  margin: 0;
  font-size: var(--pn-text-md);
  font-weight: var(--pn-weight-medium);
  color: var(--pn-color-text);
}

.pn-empty-text {
  max-width: 28rem;
  margin: 0;
  font-size: var(--pn-text-sm);
}

.pn-empty[data-tone="negative"] {
  border-color: var(--pn-color-negative);
}

.pn-empty[data-tone="negative"] .pn-empty-icon {
  color: var(--pn-color-negative);
}

/* ---------------------------------------------------------------
   Shell and screens (Phase 2). Used by panel/templates.
   --------------------------------------------------------------- */

/* Help text and the empty error both collapse when there is nothing to say */

.pn-help:empty {
  display: none;
}

/* Layout: nav beside the main column; nav stacks on top at phone width */

.pn-layout {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.pn-layout-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--pn-color-rail);
  border-right: var(--pn-border-width) solid var(--pn-color-rail-border);
}

.pn-layout-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pn-layout-body {
  flex: 1;
  width: 100%;
  padding: 0 clamp(1.5rem, 5vw, 6rem) var(--pn-space-7);
}

@media (max-width: 40rem) {
  .pn-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pn-layout-nav {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: var(--pn-border-width) solid var(--pn-color-rail-border);
  }

  .pn-layout-body {
    padding: var(--pn-space-4) var(--pn-space-4) var(--pn-space-7);
  }
}

/* Nav */

.pn-nav {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-4);
  height: 100%;
  padding: var(--pn-space-3);
}

.pn-nav-brand {
  margin: 0;
  padding: var(--pn-space-1) var(--pn-space-2);
  font-size: var(--pn-text-md);
  font-weight: var(--pn-weight-bold);
}

.pn-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-nav-link {
  display: flex;
  align-items: center;
  min-height: var(--pn-control-height);
  padding: 0 var(--pn-space-2);
  font-size: var(--pn-text-sm);
  color: var(--pn-color-text);
  text-decoration: none;
  border-radius: var(--pn-radius-md);
}

.pn-nav-link:hover,
.pn-nav-link[data-force="hover"] {
  background: var(--pn-color-rail-hover);
}

.pn-nav-link[aria-current="page"] {
  font-weight: var(--pn-weight-medium);
  background: var(--pn-color-surface);
  box-shadow: var(--pn-shadow-card);
}

.pn-nav-account {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pn-space-1);
  margin-top: auto;
  padding: var(--pn-space-3) var(--pn-space-2) 0;
  font-size: var(--pn-text-xs);
  color: var(--pn-color-text-muted);
  border-top: var(--pn-border-width) solid var(--pn-color-rail-line);
}

.pn-nav-user {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .pn-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pn-space-2);
    padding: var(--pn-space-2) var(--pn-space-3);
  }

  .pn-nav-list {
    flex-direction: row;
    flex: 1 1 100%;
    order: 3;
    overflow-x: auto;
  }

  .pn-nav-link {
    white-space: nowrap;
  }

  .pn-nav-account {
    flex-direction: row;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
  }

  .pn-nav-user {
    display: none;
  }

  .pn-nav-account-slot {
    margin: 0 0 0 auto;
  }
}

/* Top bar: breadcrumb */

.pn-topbar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--pn-control-height);
  padding: var(--pn-space-3) clamp(1.5rem, 5vw, 6rem) var(--pn-space-5);
}

@media (max-width: 40rem) {
  .pn-topbar {
    padding: var(--pn-space-2) var(--pn-space-4);
  }
}

/* Screen: a header row, then regions chosen by data-state */

.pn-screen {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-5);
}

.pn-screen-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pn-space-3);
  padding-bottom: var(--pn-space-3);
  margin-bottom: var(--pn-space-4);
  border-bottom: var(--pn-border-width) solid var(--pn-color-border);
}

.pn-screen-title {
  margin: 0;
  font-size: var(--pn-text-xl);
  font-weight: var(--pn-weight-medium);
  line-height: 1.125;
  overflow-wrap: anywhere;
}

.pn-screen-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pn-space-2);
}

.pn-section-title {
  margin: 0 0 var(--pn-space-2);
  font-size: var(--pn-text-sm);
  font-weight: var(--pn-weight-medium);
  color: var(--pn-color-text);
}

.pn-region-loading {
  display: flex;
  align-items: center;
  gap: var(--pn-space-2);
  padding: var(--pn-space-6) 0;
  color: var(--pn-color-text-muted);
}

.pn-screen > .pn-region-loading,
.pn-screen > .pn-region-ready,
.pn-screen > .pn-region-empty,
.pn-screen > .pn-region-error {
  display: none;
}

.pn-screen[data-state="loading"] > .pn-region-loading {
  display: flex;
}

.pn-screen[data-state="ready"] > .pn-region-ready,
.pn-screen[data-state="empty"] > .pn-region-empty,
.pn-screen[data-state="error"] > .pn-region-error {
  display: block;
}

/* Collection tools: search and sort above the list */

.pn-collection-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pn-space-2);
  margin-bottom: var(--pn-space-3);
}

.pn-collection-tools .pn-input {
  flex: 1 1 14rem;
  width: auto;
}

.pn-collection-tools .pn-select {
  flex: 0 1 12rem;
  width: auto;
}

/* Home: a list of everything that can be managed, then recent changes */

.pn-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--pn-space-5);
}

/* Item: fields in the main column, status and meta in a sidebar */

.pn-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: start;
  gap: var(--pn-space-6);
}

.pn-item[data-kind="singleton"] {
  grid-template-columns: minmax(0, 1fr);
}

.pn-item-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-4);
  padding: var(--pn-space-4);
  font-size: var(--pn-text-sm);
  background: var(--pn-color-surface);
  border-radius: var(--pn-radius-md);
  box-shadow: var(--pn-shadow-card);
}

.pn-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pn-space-1) var(--pn-space-3);
  margin: 0;
}

.pn-meta dt {
  color: var(--pn-color-text-muted);
}

.pn-meta dd {
  margin: 0;
  text-align: right;
}

@media (max-width: 52rem) {
  .pn-item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Save bar: sticky at the bottom of the main column; data-state follows the save-state table */

.pn-savebar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pn-space-3);
  padding: var(--pn-space-2) clamp(1.5rem, 5vw, 6rem);
  font-size: var(--pn-text-sm);
  background: var(--pn-color-bg);
  border-top: var(--pn-border-width) solid var(--pn-color-border);
  transition: background-color var(--pn-duration);
}

.pn-savebar[data-state="dirty"],
.pn-savebar[data-state="saving"] {
  color: var(--pn-color-notice);
}

.pn-savebar[data-state="error"] {
  color: var(--pn-color-negative);
}

.pn-savebar[data-state="dirty"] .pn-button,
.pn-savebar[data-state="saving"] .pn-button {
  color: var(--pn-color-notice);
  background: var(--pn-color-notice-soft);
}

.pn-savebar[data-state="error"] .pn-button {
  color: var(--pn-color-negative);
  background: var(--pn-color-negative-soft);
}

.pn-savebar[data-state="dirty"] .pn-button:hover,
.pn-savebar[data-state="error"] .pn-button:hover {
  background: color-mix(in srgb, currentColor 14%, var(--pn-color-bg));
}

.pn-savebar-message {
  display: flex;
  align-items: center;
  gap: var(--pn-space-2);
  margin: 0;
  color: var(--pn-color-text-muted);
}

.pn-savebar-message::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pn-color-positive);
}

.pn-savebar[data-state="dirty"] .pn-savebar-message,
.pn-savebar[data-state="saving"] .pn-savebar-message,
.pn-savebar[data-state="error"] .pn-savebar-message {
  font-weight: var(--pn-weight-medium);
  color: inherit;
}

.pn-savebar[data-state="dirty"] .pn-savebar-message::before,
.pn-savebar[data-state="saving"] .pn-savebar-message::before,
.pn-savebar[data-state="error"] .pn-savebar-message::before {
  background: currentColor;
}

.pn-savebar-actions {
  display: flex;
  gap: 1px;
}

.pn-savebar-actions .pn-button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pn-savebar-actions .pn-button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pn-savebar .pn-spinner {
  display: none;
}

.pn-savebar[data-state="saving"] .pn-spinner {
  display: inline-block;
}

@media (max-width: 40rem) {
  .pn-savebar {
    padding: var(--pn-space-2) var(--pn-space-4);
  }
}

/* Fields with an upload: data-state="empty" shows the dropzone, "filled" shows the file */

.pn-field[data-state="empty"] .pn-file,
.pn-field[data-state="filled"] .pn-dropzone {
  display: none;
}

.pn-field-controls {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-2);
}

/* Login: one centered card, no layout */

.pn-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--pn-space-4);
}

.pn-login-card {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-4);
  width: min(24rem, 100%);
  padding: var(--pn-space-6);
  background: var(--pn-color-surface);
  border-radius: var(--pn-radius-lg);
  box-shadow: var(--pn-shadow-card);
}

.pn-login-title {
  margin: 0;
  font-size: var(--pn-text-lg);
  font-weight: var(--pn-weight-medium);
}

.pn-login-text {
  margin: 0;
  font-size: var(--pn-text-sm);
  color: var(--pn-color-text-muted);
}

.pn-login-methods {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-2);
}

.pn-login-methods .pn-button {
  width: 100%;
}

.pn-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-4);
}

/* System screens: an empty or error block placed straight in the body */

.pn-layout-body > .pn-empty {
  max-width: 32rem;
  margin: var(--pn-space-7) auto 0;
}

.pn-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pn-space-2);
}

.pn-empty-actions:empty {
  display: none;
}

/* Slot wrappers that must not create a box (keeps the save bar sticky) */

.pn-layout-slot,
.pn-tags-list,
.pn-drawer-form {
  display: contents;
}

.pn-nav-account-slot {
  margin-top: auto;
}

/* Status with no workflow renders nothing */

.pn-status:empty,
.pn-status:has(> .pn-status-text:empty) {
  display: none;
}

/* Skip link: hidden until focused */

.pn-skip {
  position: absolute;
  top: var(--pn-space-2);
  left: var(--pn-space-2);
  z-index: var(--pn-layer-toast);
  padding: var(--pn-space-2) var(--pn-space-3);
  font-size: var(--pn-text-sm);
  color: var(--pn-color-on-accent);
  background: var(--pn-color-accent);
  border-radius: var(--pn-radius-md);
  transform: translateY(-200%);
}

.pn-skip:focus-visible {
  transform: none;
}