/* AppealArmor patient appeal page. Mobile first. System fonts only. */

:root {
  --ink: #101418;
  --paper: #ffffff;
  --brand: #0b1e3f;
  --muted: #3b4650;
  --line: #6b7580;
  --error: #9b1c1c;
  --notice-bg: #eef4fb;
  --reason-bg: #fdf3e7;
  --marker-bg: #fff1a8;
  --focus: #0b5cad;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: anywhere;
}

a {
  color: var(--brand);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 16px;
  top: 8px;
  background: var(--paper);
  padding: 8px;
  border: 2px solid var(--brand);
  z-index: 10;
}

.site-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

/* Same logo and wordmark as the home page header (.aac-brand). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.brand img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.brand em {
  font-style: normal;
  color: #c9442a;
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0.5rem 0 1rem;
}

/* app.js moves focus to the heading when a step changes so screen readers
   announce it. That focus is programmatic (the heading is not in the tab order),
   so it gets no ring. Keyboard focus on buttons, fields and links keeps its ring. */
h1[tabindex="-1"]:focus {
  outline: none;
}

h2 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.5rem;
}

p {
  margin: 0.5rem 0;
}

.promise {
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

label,
legend {
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
  display: block;
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

input[type="file"] {
  display: block;
  width: 100%;
  min-height: 44px;
  font: inherit;
}

input:disabled,
textarea:disabled {
  background: #e5e7ea;
  color: #4b5560;
}

button {
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 6px;
  border: 2px solid var(--brand);
  cursor: pointer;
}

button.primary {
  background: var(--brand);
  color: #ffffff;
}

button.secondary {
  background: var(--paper);
  color: var(--brand);
}

button:disabled {
  background: #e5e7ea;
  color: #4b5560;
  border-color: #8a939c;
  cursor: not-allowed;
}

.stack > * + * {
  margin-top: 1rem;
}

.or-divider {
  text-align: center;
  font-weight: 600;
  color: var(--muted);
}

.field {
  margin: 1.25rem 0;
}

.field > label,
.group-field > legend {
  display: block;
}

.field-label {
  display: block;
  font-weight: 600;
}

/* Upload picker. The native file input stays in the tab order, enabled and
   disabled by app.js exactly as before, but is visually hidden. The visible
   button is its label, so a click, Enter or Space on the focused input and a
   click on the button all open the same picker. */
.file-picker {
  position: relative;
  margin: 0.5rem 0 0;
}

.file-picker > .file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--brand);
  border-radius: 6px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.file-button:hover {
  background: #16325f;
}

.file-picker > .file-input:focus-visible + .file-button {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.file-picker > .file-input:disabled + .file-button {
  background: #e5e7ea;
  color: #4b5560;
  border-color: #8a939c;
  cursor: not-allowed;
}

.group {
  border-top: 1px solid var(--line);
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

fieldset {
  border: 0;
  margin: 1.25rem 0;
  padding: 0;
}

legend {
  padding: 0;
  margin-bottom: 0.5rem;
}

.tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--ink);
  border-radius: 4px;
}

.help {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.25rem 0 0.5rem;
}

.from-letter {
  color: var(--muted);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0.25rem 0;
}

.reason {
  background: var(--reason-bg);
  border-left: 4px solid #b45309;
  padding: 6px 10px;
  font-size: 0.95rem;
  margin: 0.4rem 0;
}

.declined,
.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 400;
}

.declined {
  margin-top: 0.4rem;
}

.declined input,
.choice input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
}

.error {
  color: var(--error);
  font-weight: 700;
}

.status {
  font-weight: 600;
}

.notice {
  background: var(--notice-bg);
  border-left: 4px solid var(--brand);
  padding: 10px 12px;
}

.build-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin-top: 1.5rem;
}

.missing {
  margin: 0;
  font-weight: 600;
}

.plain-list {
  padding-left: 1.25rem;
}

.plain-list li {
  margin: 0.4rem 0;
}

.download {
  font-weight: 700;
  background: var(--paper);
  color: var(--brand);
}

.download:disabled,
.download[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}

.letter {
  white-space: pre-wrap;
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.6;
}

.marker {
  background: var(--marker-bg);
  color: var(--ink);
  font-weight: 700;
  border-radius: 3px;
  padding: 0 2px;
}

@media (min-width: 40rem) {
  .build-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ADR-041 section 6.3: the list of chosen files. Long names wrap; Remove stays a 44px target. */
.file-list {
  margin: 8px 0 0;
}
.file-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #DDE3EC;
}
.file-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.file-item button.remove {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
}

/* Read by screen readers only: says what changed in the list of chosen files. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}