@import './tokens.css';
@layer publishme.tokens, publishme.components, publishme.patterns;
@layer publishme.components {
  /* Селекторы затрагивают только собственные элементы; reset принадлежит shell. */
  :where(
    .pm-button,
    .pm-input,
    .pm-checkbox,
    .pm-switch,
    .pm-check-label,
    .pm-field,
    .pm-channel-choice,
    .pm-filter,
    .pm-filter__item,
    .pm-nav-item,
    .pm-status,
    .pm-social-mark,
    .pm-notice,
    .pm-dialog,
    .pm-toast
  ) {
    box-sizing: border-box;
    font-family: var(--pm-font, 'Manrope Variable', 'Manrope', system-ui, sans-serif);
    font-size: var(--pm-text-body, 13px);
    line-height: var(--pm-line-body, 1.5);
    color: var(--pm-ink, #20261f);
  }
  :where(
    .pm-button,
    .pm-input,
    .pm-checkbox,
    .pm-switch,
    .pm-channel-choice,
    .pm-filter__item,
    .pm-nav-item
  ):focus-visible {
    outline: var(--pm-focus-width, 3px) solid var(--pm-focus, #344a26);
    outline-offset: var(--pm-focus-offset, 4px);
  }
  :where(.pm-button, .pm-channel-choice, .pm-filter__item, .pm-nav-item) {
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background-color var(--pm-motion-duration, 160ms),
      color var(--pm-motion-duration, 160ms);
  }
  .pm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pm-gap-9, 9px);
    min-height: var(--pm-size-46, 46px);
    max-width: 100%;
    padding: var(--pm-gap-11, 11px) var(--pm-gap-19, 19px);
    border: 1px solid var(--pm-native-ink, #000000);
    border-radius: var(--pm-radius-control, 12px);
    font-size: 13px;
    font-weight: var(--pm-weight-action, 750);
    text-align: center;
    background: transparent;
    text-decoration: none;
    vertical-align: middle;
  }
  .pm-button__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-button--primary {
    background: var(--pm-accent, #dcfa74);
  }
  .pm-button--primary:where(:hover:not(:disabled)) {
    background: var(--pm-accent-hover, #cce955);
  }
  .pm-button--primary:where(:active:not(:disabled)) {
    background: var(--pm-accent-pressed, #bedb4a);
  }
  .pm-button--secondary {
    background: var(--pm-surface, #ffffff);
    border-color: var(--pm-control-border, #879080);
  }
  .pm-button--secondary:where(:hover:not(:disabled)),
  .pm-button--ghost:where(:hover:not(:disabled)) {
    background: var(--pm-surface-soft, #eef1e9);
  }
  .pm-button--secondary:where(:active:not(:disabled)) {
    background: var(--pm-secondary-pressed, #dfe6d5);
  }
  .pm-button--ghost:where(:active:not(:disabled)) {
    background: var(--pm-ghost-pressed, #dce4d3);
  }
  .pm-button--dark {
    background: var(--pm-ink, #20261f);
    color: var(--pm-surface, #ffffff);
  }
  .pm-button--dark:where(:hover:not(:disabled)) {
    background: var(--pm-dark-hover, #3d4937);
  }
  .pm-button--dark:where(:active:not(:disabled)) {
    background: var(--pm-dark-pressed, #121710);
  }
  .pm-button--danger {
    background: var(--pm-danger, #a64030);
    color: var(--pm-surface, #ffffff);
  }
  .pm-button--danger:where(:hover:not(:disabled)) {
    background: var(--pm-danger-hover, #7f3225);
  }
  .pm-button--danger:where(:active:not(:disabled)) {
    background: var(--pm-danger-pressed, #64271d);
  }
  .pm-button:disabled {
    background: var(--pm-disabled-bg, #e8ece3);
    border-color: var(--pm-disabled-bg, #e8ece3);
    color: var(--pm-disabled-text, #6e7768);
    cursor: not-allowed;
  }
  .pm-button--sm {
    min-height: var(--pm-size-38, 38px);
    padding: 8px 14px;
    font-size: 12px;
    border-radius: var(--pm-radius-9, 9px);
  }
  .pm-button--lg {
    min-height: var(--pm-size-54, 54px);
    padding: 15px 24px;
    font-size: 14px;
  }
  .pm-icon-button {
    width: 40px;
    min-height: 40px;
    padding: 9px;
    border-radius: var(--pm-radius-10, 10px);
    flex-shrink: 0;
  }
  .pm-icon-button.pm-button--ghost {
    border-color: transparent;
  }
  .pm-icon-button.pm-button--sm {
    width: 38px;
    min-height: 38px;
  }
  .pm-icon-button.pm-button--lg {
    width: 54px;
    min-height: 54px;
  }
  .pm-icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
  }
  .pm-icon {
    display: inline-block;
    flex-shrink: 0;
    background: currentColor;
    mask: var(--pm-icon-source) center / contain no-repeat;
    vertical-align: middle;
  }
  .pm-icon--plus {
    --pm-icon-source: url('./assets/plus.svg');
  }
  .pm-icon--arrow {
    --pm-icon-source: url('./assets/arrow.svg');
  }
  .pm-icon--check {
    --pm-icon-source: url('./assets/check.svg');
  }
  .pm-icon--close {
    --pm-icon-source: url('./assets/close.svg');
  }
  .pm-icon--alert {
    --pm-icon-source: url('./assets/alert.svg');
  }
  .pm-icon--up-right {
    --pm-icon-source: url('./assets/up-right.svg');
  }
  .pm-icon--chevron {
    --pm-icon-source: url('./assets/chevron.svg');
  }
  .pm-icon--overview {
    --pm-icon-source: url('./assets/overview.svg');
  }
  .pm-icon--materials {
    --pm-icon-source: url('./assets/materials.svg');
  }
  .pm-icon--calendar {
    --pm-icon-source: url('./assets/calendar.svg');
  }
  .pm-icon--channels {
    --pm-icon-source: url('./assets/channels.svg');
  }
  .pm-icon--clock {
    --pm-icon-source: url('./assets/clock.svg');
  }
  .pm-spinner {
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: pm-spin 1s linear infinite;
  }
  @keyframes pm-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .pm-field {
    display: flex;
    flex-direction: column;
    gap: var(--pm-gap-7, 7px);
    min-width: 0;
  }
  .pm-field__label {
    font-size: var(--pm-text-label, 12px);
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .pm-field__hint,
  .pm-field__error {
    font-size: var(--pm-text-hint, 12px);
    line-height: 1.5;
    color: var(--pm-muted, #656d63);
    overflow-wrap: anywhere;
  }
  .pm-field__error {
    color: var(--pm-danger, #a64030);
  }
  .pm-input {
    display: block;
    min-width: 0;
    width: 100%;
    min-height: 45px;
    border: 1px solid var(--pm-control-border, #879080);
    border-radius: var(--pm-radius-field, 8px);
    background: var(--pm-surface, #ffffff);
    padding: 12px 14px;
    font-weight: 400;
  }
  .pm-input::placeholder {
    color: var(--pm-muted, #656d63);
    opacity: 1;
  }
  .pm-input[aria-invalid='true'] {
    border-color: var(--pm-danger, #a64030);
    background: var(--pm-field-error-surface, #fffaf8);
  }
  .pm-input:disabled {
    background: var(--pm-surface-soft, #eef1e9);
    color: var(--pm-muted, #656d63);
    border-color: var(--pm-line, #dfe4d9);
    cursor: not-allowed;
    opacity: 1;
  }
  .pm-input[readonly] {
    background: var(--pm-surface-soft, #eef1e9);
  }
  .pm-textarea {
    min-height: 105px;
    resize: vertical;
  }
  .pm-select {
    cursor: pointer;
  }
  .pm-select[multiple] {
    min-height: 105px;
  }
  .pm-date-input,
  .pm-time-input {
    min-height: 50px;
    font-size: 14px;
  }
  .pm-check-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    font-size: 14px;
    cursor: pointer;
  }
  .pm-check-label > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--pm-ink, #20261f);
    cursor: pointer;
  }
  .pm-check-label:has(input:disabled) {
    color: var(--pm-disabled-text, #6e7768);
    cursor: not-allowed;
  }
  .pm-switch {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--pm-control-border, #879080);
    border-radius: 20px;
    background: var(--pm-switch-off, #a9b0a2);
    cursor: pointer;
  }
  .pm-switch::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: var(--pm-surface, #ffffff);
    box-shadow: 0 1px 3px #0002;
    transition: transform var(--pm-motion-duration, 160ms);
  }
  .pm-switch:checked {
    background: var(--pm-ink, #20261f);
    border-color: var(--pm-ink, #20261f);
  }
  .pm-switch:checked::before {
    transform: translateX(18px);
  }
  .pm-switch:disabled {
    background: var(--pm-disabled-bg, #e8ece3);
    cursor: not-allowed;
  }
  .pm-switch:disabled::before {
    background: var(--pm-disabled-text, #6e7768);
  }
  .pm-checkbox:disabled {
    cursor: not-allowed;
  }
  .pm-checkbox[aria-invalid='true'],
  .pm-switch[aria-invalid='true'] {
    outline: 2px solid var(--pm-danger, #a64030);
    outline-offset: 2px;
  }
  .pm-checkbox[aria-invalid='true']:focus-visible,
  .pm-switch[aria-invalid='true']:focus-visible {
    outline: 3px solid var(--pm-focus, #344a26);
    outline-offset: 4px;
  }
  .pm-social-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -1px;
  }
  .pm-social-mark--vk {
    background: var(--pm-social-vk-bg, #e8eefb);
    color: var(--pm-social-vk-text, #265bb5);
  }
  .pm-social-mark--tg {
    background: var(--pm-social-tg-bg, #e4f2f8);
    color: var(--pm-social-tg-text, #1676a3);
  }
  .pm-social-mark--ig {
    background: var(--pm-social-ig-bg, #f6e9ef);
    color: var(--pm-social-ig-text, #934465);
    font-size: 16px;
    font-weight: 500;
  }
  .pm-social-mark--th {
    background: var(--pm-social-th-bg, #eceee9);
    font-size: 16px;
    font-weight: 500;
  }
  .pm-social-mark--max {
    background: var(--pm-social-max-bg, #eeebfa);
    color: var(--pm-social-max-text, #6050ab);
    font-size: 11px;
  }
  .pm-social-mark--md {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .pm-social-mark--md.pm-social-mark--ig,
  .pm-social-mark--md.pm-social-mark--th {
    font-size: 20px;
  }
  .pm-social-mark--md.pm-social-mark--max {
    font-size: 13px;
  }
  .pm-social-mark--lg {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 15px;
  }
  .pm-social-mark--lg.pm-social-mark--ig,
  .pm-social-mark--lg.pm-social-mark--th {
    font-size: 26px;
  }
  .pm-social-mark--lg.pm-social-mark--max {
    font-size: 18px;
  }
  .pm-social-mark--md .pm-icon {
    width: 19px !important;
    height: 19px !important;
  }
  .pm-social-mark--lg .pm-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .pm-channel-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    max-width: 100%;
    border: 1px solid var(--pm-channel-border, #bbc5af);
    border-radius: 9px;
    padding: 8px 10px;
    background: var(--pm-surface, #ffffff);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
    text-align: start;
  }
  .pm-channel-choice > span:not(.pm-icon):not(.pm-social-mark) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-channel-choice > .pm-icon {
    color: var(--pm-channel-icon, #586c3e);
  }
  .pm-channel-choice--selected {
    background: var(--pm-channel-selected-bg, #f1f7e5);
    border-color: var(--pm-channel-selected-border, #8c9e6c);
  }
  .pm-channel-choice:where(:hover:not(:disabled):not([aria-disabled='true'])) {
    background: var(--pm-surface-soft, #eef1e9);
  }
  .pm-channel-choice--unavailable {
    border-style: dashed;
    background: transparent;
    color: var(--pm-muted, #656d63);
    cursor: not-allowed;
  }
  .pm-channel-choice:disabled {
    background: var(--pm-disabled-bg, #e8ece3);
    color: var(--pm-disabled-text, #6e7768);
    cursor: not-allowed;
  }
  .pm-filter {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0 24px;
    border-bottom: 1px solid var(--pm-line, #dfe4d9);
    padding: 0 15px;
  }
  .pm-filter__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 46px;
    max-width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--pm-muted, #656d63);
    font-size: 12px;
    font-weight: 650;
    text-align: start;
    overflow-wrap: anywhere;
  }
  .pm-filter__item[aria-pressed='true'] {
    color: var(--pm-ink, #20261f);
    border-bottom-color: var(--pm-ink, #20261f);
  }
  .pm-filter__item:hover:not(:disabled) {
    color: var(--pm-ink, #20261f);
    background: var(--pm-surface-soft, #eef1e9);
  }
  .pm-filter__item:disabled {
    color: var(--pm-disabled-text, #6e7768);
    cursor: not-allowed;
  }
  .pm-filter--versions {
    gap: 0 18px;
  }
  .pm-edited-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pm-success, #356341);
  }
  .pm-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    color: var(--pm-native-ink, #000000);
  }
  .pm-nav-item__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-nav-item__badge {
    margin-inline-start: auto;
    font-size: 10px;
    color: var(--pm-muted, #656d63);
  }
  .pm-nav-item .pm-icon-slot {
    color: var(--pm-muted, #656d63);
  }
  .pm-nav-item:hover {
    background: var(--pm-surface-soft, #eef1e9);
  }
  .pm-nav-item[aria-current='page'] {
    background: var(--pm-accent, #dcfa74);
    color: var(--pm-native-ink, #000000);
    font-weight: 750;
  }
  .pm-nav-item[aria-current='page'] .pm-icon-slot {
    color: var(--pm-native-ink, #000000);
  }
  .pm-nav-item--mobile {
    flex-direction: column;
    gap: 5px;
    min-height: 56px;
    padding: 9px 3px;
    border-radius: 9px;
    font-size: 11px;
    text-align: center;
    flex: 1;
  }
  .pm-nav-item--mobile .pm-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .pm-nav-item--mobile .pm-nav-item__badge {
    margin-inline-start: 0;
  }
  .pm-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 650;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .pm-status__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
  }
  .pm-status--scheduled {
    background: var(--pm-success-bg, #edf4e9);
    color: var(--pm-scheduled-text, #4b6634);
  }
  .pm-status--published {
    background: var(--pm-published-bg, #e9f2ed);
    color: var(--pm-success, #356341);
  }
  .pm-status--draft {
    background: var(--pm-draft-bg, #f0f1ed);
    color: var(--pm-draft-text, #636d5e);
  }
  .pm-status--processing {
    background: var(--pm-processing-bg, #edf0f8);
    color: var(--pm-processing-text, #4c607c);
  }
  .pm-status--error {
    background: var(--pm-danger-bg, #fbefe9);
    color: var(--pm-danger, #a64030);
  }
  .pm-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--pm-line, #dfe4d9);
    border-radius: 12px;
    background: var(--pm-surface-soft, #eef1e9);
    font-size: 13px;
  }
  .pm-notice > .pm-icon {
    margin-top: 1px;
  }
  .pm-notice__content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-notice__title {
    display: block;
    margin-bottom: 4px;
  }
  .pm-notice--success {
    background: var(--pm-success-bg, #edf4e9);
    color: var(--pm-success, #356341);
  }
  .pm-notice--error {
    background: var(--pm-danger-bg, #fbefe9);
    color: var(--pm-danger, #a64030);
    border-color: var(--pm-danger, #a64030);
  }
  .pm-dialog {
    padding: 30px;
    border: 1px solid var(--pm-line, #dfe4d9);
    border-radius: var(--pm-radius-dialog, 24px);
    background: var(--pm-surface, #ffffff);
    color: var(--pm-ink, #20261f);
    box-shadow: var(--pm-dialog-shadow, 0 35px 110px #101d1933);
    width: 480px;
    max-width: calc(100% - 32px);
    max-height: calc(100dvh - 40px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .pm-dialog::backdrop {
    background: var(--pm-dialog-backdrop, #24302770);
    backdrop-filter: blur(5px);
  }
  .pm-dialog__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }
  .pm-dialog__title {
    font: 650 25px/1.22 var(--pm-font, 'Manrope Variable', 'Manrope', system-ui, sans-serif);
    letter-spacing: -1px;
    margin: 4px 0 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-dialog__description {
    font-size: 14px;
    line-height: 1.8;
    color: var(--pm-muted, #656d63);
    margin-bottom: 22px;
    overflow-wrap: anywhere;
  }
  .pm-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    inset-inline: 16px;
    bottom: 24px;
    max-width: 540px;
    width: fit-content;
    margin-inline: auto;
    padding: 0;
    border-radius: 12px;
    z-index: var(--pm-toast-layer, 100);
  }
  .pm-toast--open {
    padding: 10px 12px 10px 18px;
    background: var(--pm-ink, #20261f);
    color: var(--pm-surface, #ffffff);
    box-shadow: var(--pm-toast-shadow, 0 20px 65px -30px #20321c35);
  }
  .pm-toast__message {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pm-toast__message > .pm-icon {
    color: var(--pm-accent, #dcfa74);
  }
  .pm-toast .pm-icon-button {
    color: var(--pm-surface, #ffffff);
  }
  .pm-toast .pm-icon-button:hover {
    background: var(--pm-dark-hover, #3d4937);
  }
  .pm-toast .pm-icon-button:focus-visible {
    outline-color: var(--pm-surface, #ffffff);
    outline-offset: 0;
  }
  .pm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  @media (max-width: 480px) {
    .pm-dialog {
      padding: 24px;
      max-width: calc(100% - 24px);
    }
    .pm-dialog__title {
      font-size: 23px;
    }
    .pm-dialog__description {
      font-size: 13px;
    }
    /* iOS: ввод без автоматического zoom; отличается от статичного 13px Figma. */
    .pm-input {
      font-size: 16px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pm-button,
    .pm-channel-choice,
    .pm-filter__item,
    .pm-nav-item,
    .pm-switch::before {
      transition: none;
    }
    .pm-spinner {
      animation: none;
      border-style: dotted;
    }
  }
  @media (forced-colors: active) {
    .pm-button,
    .pm-input,
    .pm-checkbox,
    .pm-switch,
    .pm-channel-choice,
    .pm-nav-item,
    .pm-social-mark,
    .pm-status,
    .pm-notice,
    .pm-toast--open {
      border: 1px solid ButtonText;
    }
    .pm-button:disabled,
    .pm-input:disabled,
    .pm-channel-choice:disabled {
      border-color: GrayText;
      color: GrayText;
    }
    .pm-icon,
    .pm-status__dot,
    .pm-edited-dot {
      forced-color-adjust: none;
      background: currentColor;
    }
    .pm-switch {
      forced-color-adjust: none;
      background: Canvas;
      border-color: ButtonText;
    }
    .pm-switch::before {
      background: ButtonText;
    }
    .pm-switch:checked {
      background: Highlight;
    }
    .pm-switch:checked::before {
      background: HighlightText;
    }
    .pm-switch:disabled {
      border-color: GrayText;
      background: Canvas;
    }
    .pm-switch:disabled::before {
      background: GrayText;
    }
    .pm-channel-choice[aria-pressed='true'],
    .pm-nav-item[aria-current='page'] {
      outline: 2px solid Highlight;
      outline-offset: -3px;
    }
    .pm-filter__item[aria-pressed='true'] {
      border-bottom-color: Highlight;
    }
    .pm-dialog {
      border: 2px solid CanvasText;
    }
    .pm-dialog::backdrop {
      backdrop-filter: none;
      background: Canvas;
      opacity: 0.7;
    }
  }
}