/*
 * endoclera design system
 * Единый источник дизайн-токенов и интерактивных компонентов сайта.
 * Правила применения: /DESIGN-SYSTEM.md
 */

:root{
  /* Typography */
  --ui-font-sans:"Endoclera Sans",Arial,sans-serif;
  --ui-font-serif:"Endoclera Serif",Georgia,"Times New Roman",serif;
  --ui-text-xs:11px;
  --ui-text-sm:12px;
  --ui-text-md:14px;
  --ui-text-base:16px;
  --ui-text-lg:18px;

  /* Brand and semantic colors */
  --ui-color-paper:#fbf8f2;
  --ui-color-paper-deep:#f5efe5;
  --ui-color-surface:#fffdfa;
  --ui-color-ink:#132d4d;
  --ui-color-copy:#29425f;
  --ui-color-muted:#687381;
  --ui-color-brand:#a52f2f;
  --ui-color-link:#0f6692;
  --ui-color-action:#0f6692;
  --ui-color-action-hover:#0b5277;
  --ui-color-action-soft:rgba(15,102,146,.065);
  --ui-color-line:#ddd4c6;
  --ui-color-line-strong:#c8bdad;
  --ui-color-success:#176b39;
  --ui-color-warning:#9a5a0b;
  --ui-color-danger:#8f322e;

  /* Spacing and shape */
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:24px;
  --ui-space-6:32px;
  --ui-space-7:48px;
  --ui-radius-control:2px;
  --ui-radius-field:4px;
  --ui-radius-card:0;
  --ui-control-height-sm:36px;
  --ui-control-height:44px;
  --ui-control-height-lg:50px;
  --ui-focus-ring:0 0 0 3px rgba(15,102,146,.17);
  --ui-transition:160ms ease;
}

.atlas-page{
  /* Старые имена переменных продолжают работать, но получают значения из системы. */
  --atlas-paper:var(--ui-color-paper);
  --atlas-paper-deep:var(--ui-color-paper-deep);
  --atlas-ink:var(--ui-color-ink);
  --atlas-copy:var(--ui-color-copy);
  --atlas-muted:var(--ui-color-muted);
  --atlas-red:var(--ui-color-brand);
  --atlas-blue:var(--ui-color-link);
  --atlas-line:var(--ui-color-line);
  --atlas-line-strong:var(--ui-color-line-strong);
  --atlas-serif:var(--ui-font-serif);
  --atlas-sans:var(--ui-font-sans);
}
.atlas-page [hidden]{display:none!important}
.atlas-page .atlas-skip{color:#fff}

/* Shared action buttons and backwards-compatible aliases. */
.atlas-page :is(
  .ui-button,
  .result-copy-btn,
  .result-print-btn,
  .pm-btn,
  .legal-small-btn,
  .anthro-reset,
  .smoke-add,
  .fg-action-button,
  .fg-button,
  .fg-result-button,
  .ec-actions button
){
  min-height:var(--ui-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ui-space-2);
  padding:9px 17px;
  border:1px solid var(--ui-color-line-strong);
  border-radius:var(--ui-radius-control);
  color:var(--ui-color-ink);
  background:transparent;
  box-shadow:none;
  font:500 var(--ui-text-md)/1.2 var(--ui-font-sans);
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    transform var(--ui-transition);
  -webkit-appearance:none;
  appearance:none;
}

.atlas-page :is(
  .ui-button,
  .result-copy-btn,
  .result-print-btn,
  .pm-btn,
  .legal-small-btn,
  .anthro-reset,
  .smoke-add,
  .fg-action-button,
  .fg-button,
  .fg-result-button,
  .ec-actions button
):hover:not(:disabled):not([aria-disabled="true"]){
  border-color:var(--ui-color-action);
  color:var(--ui-color-action);
  background:var(--ui-color-action-soft);
}

.atlas-page :is(
  .ui-button,
  .result-copy-btn,
  .result-print-btn,
  .pm-btn,
  .legal-small-btn,
  .anthro-reset,
  .smoke-add,
  .fg-action-button,
  .fg-button,
  .fg-result-button,
  .ec-actions button
):focus-visible{
  outline:2px solid var(--ui-color-action);
  outline-offset:2px;
  box-shadow:var(--ui-focus-ring);
}

.atlas-page :is(
  .ui-button,
  .result-copy-btn,
  .result-print-btn,
  .pm-btn,
  .legal-small-btn,
  .anthro-reset,
  .smoke-add,
  .fg-action-button,
  .fg-button,
  .fg-result-button,
  .ec-actions button
):disabled,
.atlas-page .ui-button[aria-disabled="true"]{
  border-color:var(--ui-color-line);
  color:#9d9b97;
  background:var(--ui-color-paper-deep);
  opacity:1;
  cursor:not-allowed;
}

/* Primary action: one per task area or dialog. */
.atlas-page :is(
  .ui-button--primary,
  .fg-button.primary,
  .fg-result-button,
  .ec-accept
):not(:disabled):not([aria-disabled="true"]){
  border-color:var(--ui-color-action);
  color:#fff;
  background:var(--ui-color-action);
}
.atlas-page :is(
  .ui-button--primary,
  .fg-button.primary,
  .fg-result-button,
  .ec-accept
):hover:not(:disabled):not([aria-disabled="true"]){
  border-color:var(--ui-color-action-hover);
  color:#fff;
  background:var(--ui-color-action-hover);
}

/* Three levels of action: primary, secondary and tertiary. */
.atlas-page .ui-button--secondary{color:var(--ui-color-ink);background:transparent}
.atlas-page :is(.ui-button--tertiary,.ec-leave){
  border-color:transparent;
  color:var(--ui-color-link);
  background:var(--ui-color-action-soft);
}
.atlas-page :is(.ui-button--tertiary,.ec-leave):hover:not(:disabled):not([aria-disabled="true"]){
  border-color:transparent;
  color:var(--ui-color-action-hover);
  background:rgba(15,102,146,.12);
}
.atlas-page .ui-button--danger{border-color:var(--ui-color-danger);color:var(--ui-color-danger)}
.atlas-page .ui-button--danger:hover:not(:disabled){color:#fff;background:var(--ui-color-danger)}
.atlas-page .ui-button--sm{min-height:var(--ui-control-height-sm);padding:7px 13px;font-size:var(--ui-text-sm)}
.atlas-page .ui-button--lg{min-height:var(--ui-control-height-lg);padding:12px 21px;font-size:var(--ui-text-base)}
.atlas-page .ui-button--full{width:100%}

.ui-button-group,
.atlas-page :is(.result-share-bar,.fg-head-actions,.fg-result-actions,.fg-confirm-actions,.ec-actions){
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ui-space-2);
}

/* Text actions are visually quiet but keep an ergonomic target. */
.atlas-page :is(
  .ui-link-button,
  .q-progress-clear,
  .fg-previous-zone,
  .fg-help-link,
  .fg-reset-button,
  .smoke-period__remove
){
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 2px;
  border:0;
  border-radius:0;
  color:var(--ui-color-link);
  background:transparent;
  font:500 var(--ui-text-sm)/1.35 var(--ui-font-sans);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
}
.atlas-page :is(
  .ui-link-button,
  .q-progress-clear,
  .fg-previous-zone,
  .fg-help-link,
  .fg-reset-button,
  .smoke-period__remove
):hover:not(:disabled){color:var(--ui-color-action-hover)}
.atlas-page :is(
  .ui-link-button,
  .q-progress-clear,
  .fg-previous-zone,
  .fg-help-link,
  .fg-reset-button,
  .smoke-period__remove
):focus-visible{outline:2px solid var(--ui-color-action);outline-offset:2px}

/* Icon actions. Their silhouettes differ, but hit area and states do not. */
.atlas-page :is(.ui-icon-button,.atlas-menu-button,.fg-dialog-close,.units-swap){
  width:var(--ui-control-height);
  min-width:var(--ui-control-height);
  height:var(--ui-control-height);
  min-height:var(--ui-control-height);
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--ui-color-line-strong);
  border-radius:var(--ui-radius-control);
  color:var(--ui-color-ink);
  background:transparent;
  cursor:pointer;
  transition:color var(--ui-transition),background-color var(--ui-transition),border-color var(--ui-transition);
}
.atlas-page .atlas-menu-button{display:none}
.atlas-page :is(.ui-icon-button,.atlas-menu-button,.fg-dialog-close,.units-swap):hover:not(:disabled){
  border-color:var(--ui-color-action);
  color:var(--ui-color-action);
  background:var(--ui-color-action-soft);
}

.atlas-page .s-star{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--ui-radius-control);
  color:#536477;
  background:transparent;
}
.atlas-page .s-star:hover,
.atlas-page .s-star:focus-visible{border-color:var(--ui-color-action);color:var(--ui-color-action);background:var(--ui-color-action-soft)}
.atlas-page .to-top{
  width:44px;
  height:44px;
  min-height:44px;
  border-color:var(--ui-color-line-strong);
  border-radius:50%;
  color:var(--ui-color-ink);
  background:var(--ui-color-surface);
}

/* Segmented choices are not action buttons; selected means current value. */
.atlas-page :is(.ui-choice-group,.fg-version-buttons){display:grid}
.atlas-page :is(.ui-choice-button,.fg-version-buttons button){
  min-height:54px;
  padding:9px 16px;
  border:1px solid var(--ui-color-line-strong);
  border-radius:0;
  color:var(--ui-color-copy);
  background:transparent;
  font:500 var(--ui-text-sm)/1.3 var(--ui-font-sans);
  cursor:pointer;
  transition:color var(--ui-transition),background-color var(--ui-transition),border-color var(--ui-transition);
}
.atlas-page :is(.ui-choice-button,.fg-version-buttons button):hover{border-color:var(--ui-color-action);color:var(--ui-color-action)}
.atlas-page :is(.ui-choice-button[aria-pressed="true"],.fg-version-buttons button[aria-pressed="true"]){
  border-color:var(--ui-color-action);
  color:#fff;
  background:var(--ui-color-action);
}

/* Search and form controls share one focus language. */
.atlas-page :is(input,select,textarea):focus-visible{
  outline:2px solid var(--ui-color-action);
  outline-offset:2px;
  box-shadow:var(--ui-focus-ring);
}
.atlas-page :is(.atlas-search__button,.atlas-search__clear){border-radius:var(--ui-radius-control)}
.atlas-page :is(.atlas-search__button,.atlas-search__clear):hover,
.atlas-page :is(.atlas-search__button,.atlas-search__clear):focus-visible{
  color:var(--ui-color-action);
  background:var(--ui-color-action-soft);
  outline:none;
}

@media(max-width:640px){
  .atlas-page :is(
    .ui-button,
    .result-copy-btn,
    .result-print-btn,
    .pm-btn,
    .legal-small-btn,
    .anthro-reset,
    .smoke-add,
    .fg-action-button,
    .fg-button,
    .fg-result-button,
    .ec-actions button
  ){min-height:46px;padding-right:15px;padding-left:15px}
  .ui-button-group,
  .atlas-page :is(.result-share-bar,.fg-result-actions,.fg-confirm-actions){align-items:stretch}
}

@media(max-width:840px){
  .atlas-page .atlas-menu-button{display:inline-flex}
}

@media(prefers-reduced-motion:reduce){
  .atlas-page :is(button,a,input,select,textarea){scroll-behavior:auto;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{
  .ui-button-group,
  .atlas-page :is(
    .ui-button,
    .ui-icon-button,
    .ui-link-button,
    .result-share-bar,
    .fg-head-actions,
    .fg-continue-actions,
    .fg-completion,
    .fg-dialog-close,
    .ec-overlay,
    .to-top
  ){display:none!important}
}