/* ===== hardening / accessibility ===== */
.period{
  border:0;
  background:transparent;
  font-family:inherit;
  min-height:44px;
  padding:0 10px;
}

.is-hidden{
  visibility:hidden !important;
  pointer-events:none !important;
}

.sh{
  width:100%;
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font-family:inherit;
}

.sh .day,
.sh .mid,
.sh .p,
.sh .meta,
.sh .amt{
  display:block;
}

.sh .meta{
  display:flex;
}

button,
.period,
.sh,
.grab,
.shead,
.point-picker-head,
.month-picker-handle,
.date-picker-handle{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

input,
select,
textarea{
  font-size:16px;
}

.wrap{
  white-space:normal !important;
}

.sheet-spacer{
  height:8px;
}

.future-note{
  margin-top:10px;
}

.advance-progress{
  display:block;
  width:100%;
  height:4px;
  margin:0;
  border:0;
  border-radius:2px;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  background:var(--tint2);
}

.advance-progress::-webkit-progress-bar{
  background:var(--tint2);
  border-radius:2px;
}

.advance-progress::-webkit-progress-value{
  background:var(--gold);
  border-radius:2px;
}

.advance-progress::-moz-progress-bar{
  background:var(--gold);
  border-radius:2px;
}

.nav button,
.month-year-btn,
.date-jump-year-btn,
.date-calendar-nav,
.picker-toolbar-btn,
.month-today,
.date-today,
.lnk{
  min-height:44px;
}

.nav button{
  width:44px;
  height:44px;
}

.point-option{
  min-height:44px;
}

button:focus-visible,
.period:focus-visible,
.sh:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/*
  У текстовых действий нет своей поверхности, и прямоугольная рамка
  вплотную к буквам читалась как ошибка вёрстки. Скругление здесь
  влияет только на рамку фокуса: фона у этих кнопок нет.
*/
.lnk:focus-visible,
.ml-action:focus-visible,
.payroll-report-link:focus-visible,
.shift-select-all:focus-visible{
  border-radius:6px;
}

#sheet:focus,
#sheet:focus-visible{
  outline:none;
  outline-width:0;
  outline-offset:0;
}

.point-option:focus:not(:focus-visible),
nav.tabs button:focus:not(:focus-visible),
.seg button:focus:not(:focus-visible){
  outline:none;
  outline-width:0;
  outline-offset:0;
}

/*
  Safari can briefly expose a focus-visible ring when focus is restored
  programmatically after a touch interaction. Keep DOM focus intact for
  accessibility, but render pointer/touch focus like native iOS controls.

  Проверяется отсутствие клавиатуры, а не наличие указателя: до первого
  ввода атрибута ещё нет, и программный фокус (восстановление после
  закрытия листа, перезагрузка ради новой версии) иначе рисовал бы рамку
  выделения на элементе, которого никто не нажимал.
*/
body:not([data-input-modality="keyboard"]) button:focus,
body:not([data-input-modality="keyboard"]) .period:focus,
body:not([data-input-modality="keyboard"]) .sh:focus,
body:not([data-input-modality="keyboard"]) [role="tab"]:focus,
body:not([data-input-modality="keyboard"]) [role="option"]:focus{
  outline:none !important;
  outline-width:0 !important;
  outline-offset:0 !important;
}

/* A closing dialog may stay display:block for its exit animation only. */
[role="dialog"][aria-hidden="true"]{
  pointer-events:none !important;
}

@media (hover:hover) and (pointer:fine){
  *:focus:not(:focus-visible){
    outline:none;
    outline-width:0;
  }

  .point-option:focus-visible,
  nav.tabs button:focus-visible,
  .seg button:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Final hardening: native buttons used as custom controls must not inherit browser chrome. */
.period{
  border:0;
  padding:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
}

.sh{
  width:100%;
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
}

/* Comfortable keyboard/touch targets without changing the visual glyph size. */
.nav button,
.date-calendar-nav,
.month-year-btn,
.date-jump-year-btn{
  min-width:44px;
  min-height:44px;
}

.date-calendar-head,
.date-jump-year,
.month-picker-head{
  grid-template-columns:44px 1fr 44px;
}

/* iOS Safari does not auto-zoom editable controls at 16px+. */
textarea{
  font-size:16px;
}