@import url('css/v3/01-buttons.css');
@import url('css/v3/02-link.css');
@import url('css/v3/03-focus.css');
@import url('css/v3/06-check.css');
@import url('css/v3/13-badges.css');
@import url('css/v3/14-fields.css');
@import url('css/v3/24-skeletons.css');
@import url('css/v3/26-tape.css');
@import url('css/v3/27-hero-video.css');
@import url('css/v3/28-marker.css');


.cta-button--danger-soft { background: var(--pp-color-semantic-danger-soft); color: var(--pp-color-semantic-danger-text); border-color: transparent; }


.pp-field { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.pp-field__label { font: var(--pp-type-label-weight) var(--pp-type-label-size)/var(--pp-type-label-line) var(--pp-font-body); color: var(--pp-color-text-ink); }
.pp-field__hint { font-size: var(--pp-type-label-size); line-height: 18px; color: var(--pp-color-text-secondary); }
.pp-field__error { font-size: var(--pp-type-label-size); line-height: 18px; color: var(--pp-color-semantic-danger-text); display: flex; gap: 6px; align-items: flex-start; font-weight: 600; }
.pp-field--error input, .pp-field--error select, .pp-field--error textarea { border-color: var(--pp-color-semantic-danger); border-width: 2px; padding: 11px 13px; }
.pp-field input:focus-visible, .pp-field select:focus-visible, .pp-field textarea:focus-visible { outline: var(--pp-size-focus-ring) solid var(--color-focus); outline-offset: 0; border-color: var(--pp-color-action-primary); border-radius: var(--pp-radius-md); }


.pp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--pp-color-border-field); border-radius: var(--pp-radius-md); overflow: hidden; }
.pp-seg button { min-height: 44px; border: 0; background: var(--pp-color-surface-card); color: var(--pp-color-text-ink); font-weight: 600; font-size: var(--pp-type-body-size); }
.pp-seg button + button { border-left: 1px solid var(--pp-color-border-field); }
.pp-seg button[aria-checked="true"] { background: var(--pp-color-action-primary-soft); color: var(--pp-color-action-primary-soft-text); box-shadow: inset 0 0 0 2px var(--pp-color-action-primary); }

.pp-seg button:focus-visible { outline-offset: -3px; }


.pp-chips { display: flex; gap: 8px; min-width: 0; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none;  mask-image: linear-gradient(to right, color-mix(in srgb, var(--pp-color-text-ink) 100%, transparent), color-mix(in srgb, var(--pp-color-text-ink) 100%, transparent) calc(100% - 20px), transparent); }
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chips--wrap { flex-wrap: wrap; overflow: visible; mask-image: none; }

@media (min-width: 48rem) { .pp-chips { flex-wrap: wrap; overflow: visible; mask-image: none; scrollbar-width: auto; } }

.pp-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--pp-size-control-min-height); padding: 0 12px; border-radius: var(--pp-radius-pill); border: 1px solid var(--pp-color-border-field); background: var(--pp-color-surface-card); color: var(--pp-color-text-ink); font: 600 var(--pp-type-body-size)/1 var(--pp-font-body); cursor: pointer; white-space: nowrap; text-decoration: none; }
.pp-chip[aria-pressed="true"], .pp-chip[aria-checked="true"] { background: var(--pp-color-action-primary-soft); border-color: var(--pp-color-action-primary); color: var(--pp-color-action-primary-soft-text); }

.pp-chip:disabled, .pp-chip[aria-disabled="true"] { background: var(--pp-color-surface-muted); color: var(--pp-color-text-secondary); border: 1px dashed var(--pp-color-border-field); cursor: not-allowed; }
.pp-chip__count { color: var(--pp-color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }


.pp-list { background: var(--pp-color-surface-card); border: 1px solid var(--pp-color-border-default); border-radius: var(--pp-radius-lg); overflow: hidden; }
.pp-li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: inherit; text-decoration: none; }
.pp-li + .pp-li { border-top: 1px solid var(--pp-color-border-default); }
.pp-li__icon { width: 36px; height: 36px; border-radius: var(--pp-radius-md); background: var(--pp-color-surface-raised); color: var(--pp-color-text-secondary); display: grid; place-items: center; flex: none; }
.pp-li__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pp-li__title { font-weight: 600; font-size: var(--pp-text-md); }
.pp-li__sub { font-size: var(--pp-type-label-size); color: var(--pp-color-text-secondary); }
.pp-li__end { flex: none; display: flex; align-items: center; gap: 8px; color: var(--pp-color-text-secondary); font-size: var(--pp-type-body-size); }

.pp-li--switch { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }


.pp-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--pp-color-surface-muted); border: 1px solid var(--pp-color-border-field); position: relative; flex: none; }
.pp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--pp-color-surface-card); border: 1px solid var(--pp-color-border-field); }
.pp-switch[aria-checked="true"] { background: var(--pp-color-action-primary); border-color: var(--pp-color-action-primary); }
.pp-switch[aria-checked="true"]::after { left: 20px; border-color: transparent; }


.modal-backdrop:has(.pp-sheet) { align-items: flex-end; padding: 24px 0 0; }
.pp-sheet { width: 100%; max-width: 520px; background: var(--pp-color-surface-card); border-radius: var(--pp-radius-xl) var(--pp-radius-xl) 0 0; padding: 8px 16px 20px; box-shadow: var(--pp-shadow-lg); display: grid; gap: 12px; }
.pp-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--pp-color-border-default); margin: 4px auto 6px; }
.pp-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pp-sheet__close { flex: none; width: 44px; height: 44px; margin: -6px -10px 0 0; border: 0; background: transparent; color: var(--pp-color-text-secondary); display: grid; place-items: center; border-radius: var(--pp-radius-md); }
@media (min-width: 720px) {
  .modal-backdrop:has(.pp-sheet) { align-items: center; padding: 40px; }
  .modal-backdrop:has(.pp-sheet) .pp-sheet { border-radius: var(--pp-radius-xl); }
}


.pp-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--pp-radius-md); font-size: var(--pp-type-body-size); line-height: 20px; background: var(--pp-color-action-primary-soft); color: var(--pp-color-action-primary-soft-text); }
.pp-banner b { display: block; }
.pp-banner__act { margin-left: auto; flex: none; font-weight: 700; color: inherit; text-decoration: underline; background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; }
.pp-banner--success { background: var(--pp-color-semantic-success-soft); color: var(--pp-color-semantic-success-text); }
.pp-banner--warn { background: var(--pp-color-semantic-warning-soft); color: var(--pp-color-semantic-warning); } 
.pp-banner--danger { background: var(--pp-color-semantic-danger-soft); color: var(--pp-color-semantic-danger-text); }
.pp-banner--night { background: var(--pp-color-night-canvas); color: var(--pp-color-night-text); }


.pp-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--pp-radius-sm); background: var(--pp-color-surface-muted); color: var(--pp-color-text-secondary); font: 600 var(--pp-type-caption-size)/var(--pp-type-caption-line) var(--pp-font-body); }
.pp-tag--urgent { background: var(--pp-color-accent-urgent-soft); color: var(--pp-color-accent-urgent-text); }
.pp-tag--primary { background: var(--pp-color-action-primary-soft); color: var(--pp-color-action-primary-soft-text); }
.pp-tag--success { background: var(--pp-color-semantic-success-soft); color: var(--pp-color-semantic-success-text); }
.pp-tag--danger { background: var(--pp-color-semantic-danger-soft); color: var(--pp-color-semantic-danger-text); }
.pp-tag--warning { background: var(--pp-color-semantic-warning-soft); color: var(--pp-color-semantic-warning); }


.pp-actionbar { position: sticky; bottom: 0; z-index: 5; background: var(--pp-color-surface-card); border-top: 1px solid var(--pp-color-border-default); padding: 12px var(--pp-space-xl) calc(12px + env(safe-area-inset-bottom)); }
.pp-actionbar__note { font-size: var(--pp-type-caption-size); color: var(--pp-color-text-secondary); margin-top: 6px; text-align: center; }


.pp-state { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 32px 16px; }
.pp-state__img { width: var(--pp-size-empty-illustration); height: var(--pp-size-empty-illustration); }
.pp-state__title { font: 600 var(--pp-text-lg)/1.3 var(--pp-font-body); }
.pp-state__text { font-size: var(--pp-type-body-size); color: var(--pp-color-text-secondary); max-width: 30rem; }


.pp-errsummary { border: 2px solid var(--pp-color-semantic-danger); background: var(--pp-color-semantic-danger-soft); color: var(--pp-color-semantic-danger-text); border-radius: var(--pp-radius-md); padding: 12px 14px; font-size: var(--pp-type-body-size); }
.pp-errsummary ul { margin: 6px 0 0 18px; }
.pp-errsummary a { color: inherit; font-weight: 600; }


.pp-msg { max-width: 82%; padding: 10px 12px; border-radius: 14px; font-size: var(--pp-text-md); line-height: 21px; background: var(--pp-color-surface-card); border: 1px solid var(--pp-color-border-default); }
.pp-msg--me { justify-self: end; background: var(--pp-color-action-primary); color: var(--pp-color-action-on-primary); border-color: transparent; border-bottom-right-radius: 4px; }
.pp-msg--them { border-bottom-left-radius: 4px; }
.pp-msg--sys { justify-self: center; max-width: 100%; background: transparent; border: 0; color: var(--pp-color-text-secondary); font-size: var(--pp-type-label-size); text-align: center; padding: 4px 8px; }
.pp-msg__time { display: block; font-size: var(--pp-text-xs); opacity: .72; margin-top: 2px; text-align: right; }




[data-theme="dark"] .cta-button:not([class*="cta-button--"]) {
  color: var(--pp-color-action-on-primary);
}
[data-theme="dark"] .cta-button--secondary {
  color: var(--pp-color-action-primary-pressed);
}
[data-theme="dark"] .cta-button--ghost {
  color: var(--pp-color-text-ink);
}


[data-theme="dark"] .footer {
  background: var(--pp-color-surface-card);
  color: var(--pp-color-text-secondary);
}
[data-theme="dark"] .footer a {
  color: var(--pp-color-text-ink);
}


[data-theme="dark"] .footer__logo {
  content: url('/img/brand/logo-lockup-dark.svg');
}


[data-theme="dark"] .login-mark {
  content: url('/img/brand/logo-mark-dark.svg');
}


.pp-chip:focus-visible, .pp-li:focus-visible, .pp-switch:focus-visible, .pp-seg button:focus-visible, .pp-sheet__close:focus-visible, .pp-banner__act:focus-visible {
  outline: var(--pp-size-focus-ring) solid var(--color-focus);
  outline-offset: 2px;
}