/* Shared controls: buttons, pills, text fields and the focus ring. Loaded by every page, so the app, the share page,
   the availability page and the sign-in page all draw the same control. The .sh-*, .sd-* and .av-* names are the same
   controls under the names their scripts already use. Colour comes from tokens only; nothing here is an accent. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mono, .label, .pill, .btn, .frame, th,
.sh-btn, .sd-btn, .sh-pill, .sd-pill, .av-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.label { color: var(--ink-2); }

/* Pill: a quiet tag. A pill that is a button gets the hover border. */
.pill, .sh-pill, .sd-pill, .av-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px;
  line-height: 1.3; background: transparent; color: inherit; white-space: nowrap;
}
.pill.solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill.on { border-color: var(--ink); }
button.pill { cursor: pointer; transition: border-color var(--dur-1) var(--ease); }
button.pill:hover { border-color: var(--ink); }

/* Button: outline by default, .solid or aria-pressed for the filled state, .quiet for a button that is only text until hovered. */
.btn, .sh-btn, .sd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 13px;
  border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: inherit;
  cursor: pointer; text-decoration: none; line-height: 1.3;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), scale var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.sd-btn { color: var(--ink); }
.btn:hover, .sh-btn:hover, .sd-btn:hover { border-color: var(--ink); }
.btn:active:not(:disabled), .sh-btn:active:not(:disabled), .sd-btn:active:not(:disabled) { scale: .97; }
.btn[aria-pressed="true"], .btn.solid, .sh-btn[aria-pressed="true"], .sh-btn.solid, .sd-btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:disabled, .sh-btn:disabled, .sd-btn:disabled { opacity: .45; cursor: default; }
.btn[aria-busy="true"], .sh-btn[aria-busy="true"], .sd-btn[aria-busy="true"] { cursor: progress; }
.btn.quiet { border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { color: var(--ink); border-color: var(--rule); }

/* Text fields. 36px in dialogs and the board, 40px on Settings and sign-in (see settings.css and login.css). */
input[type=text], input[type=search], input[type=date], input[type=datetime-local], input[type=time], select, textarea {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 12px; min-height: 36px; width: 100%;
}
select { width: auto; }
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }

@media (prefers-reduced-motion: reduce) { .btn, .sh-btn, .sd-btn, button.pill { transition: none; } .btn:active:not(:disabled) { scale: none; } }

/* Phones: iOS Safari zooms the page when a field under 16px takes focus. Keep every text field at 16px on touch screens
   (the !important beats the smaller toolbar, panel and Settings sizes) and the viewport is locked to scale 1 in each page's meta tag. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
}