/* The claim checker (2026-10-03, DRAFT): /flight-compensation/check/. Stands on guide.css and
   claims.css (the frame, the letter, the rule rows, the claim card) and adds the form: fields with
   their labels above them, the two search fields as comboboxes with a list under them, a segmented
   choice, and the answer card. Every duration and curve is a token from base.css; nothing here is
   hidden by script except what [data-js] asks to be (fail-open: the form is hidden until check.js
   shows it, and the explanation is shown until check.js hides it).

   Colours measured with scripts/contrast.py on 2026-10-03:
   field edge #8f7d84: 3.37:1 on the paper #f6eeea, 3.81:1 on the field #fffdfc (UI, 3:1)
   error text #a3262c: 6.39:1 on the paper, 7.21:1 on the field
   --soft #6f5c64: 4.93:1 on the tile #efe3de, 6.11:1 on the field */

.guide [hidden] { display: none !important; }
.guide { --k-field: #fffdfc; --k-edge: #8f7d84; --k-error: #a3262c; }

/* the form: two columns on a wide screen, From beside To; one on a phone */
.k-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 22px 0 6px; }
.k-wide { grid-column: 1 / -1; }
.k-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.doc .k-field label, .doc .k-field legend { display: block; margin: 0 0 6px; padding: 0; font-size: 15px; line-height: 1.33; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.k-opt { font-weight: 400; color: var(--soft); }
.doc .k-hint { margin: 0 0 10px; font-size: 15px; color: var(--soft); }
.k-field input[type="text"], .k-field input[type="date"] {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 0 14px;
  font: inherit; font-size: 17px; line-height: 1.3; letter-spacing: -0.022em; color: var(--ink);
  background: var(--k-field); border: 1px solid var(--k-edge); border-radius: 12px;
  -webkit-appearance: none; appearance: none;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: border-color var(--dur-fast) var(--ease-in-out), outline-color var(--dur-fast) var(--ease-in-out);
}
.k-field input::placeholder { color: var(--soft); opacity: 1; }
.k-field input:focus { outline-color: var(--ink); border-color: var(--ink); }
.k-field.is-invalid input { border-color: var(--k-error); }
.doc .k-err { min-height: 22px; margin: 5px 0 6px; font-size: 14px; line-height: 1.43; color: var(--k-error); }

/* the combobox: the list opens under the field, over the page. visibility rides the same token as
   the fade, so the list stays readable while it fades out and is gone from the tab order after. */
.k-box { position: relative; }
.doc .k-combo [role="listbox"] {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: min(360px, 52vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  background: var(--k-field); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -20px rgba(43,31,37,.42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-in-out), visibility var(--dur-fast) var(--ease-in-out);
}
.k-combo.is-open [role="listbox"] { opacity: 1; visibility: visible; }
.doc .k-combo [role="option"] {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 44px; margin: 0; padding: 11px 12px; border-radius: 10px; cursor: pointer;
  font-size: 17px; line-height: 1.3;
  transition: background-color var(--dur-fast) var(--ease-in-out);
}
.doc .k-combo [role="option"]:hover, .doc .k-combo [role="option"][aria-selected="true"] { background: var(--tile); }
.k-opt__a { color: var(--ink); min-width: 0; }
.k-opt__b { flex: none; font-size: 14px; color: var(--soft); white-space: nowrap; }

/* what happened: a segmented choice, as on iPhone */
.k-seg__opts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 2px; padding: 3px; margin-bottom: 18px; background: var(--tile); border-radius: 12px; width: max-content; max-width: 100%; }
.doc .k-seg label { margin: 0; font-weight: 400; }
.k-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.k-seg span {
  display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px;
  border-radius: 9px; font-size: 15px; color: var(--ink); cursor: pointer; white-space: nowrap;
  outline: 2px solid transparent; outline-offset: 1px;
  transition: background-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out), outline-color var(--dur-fast) var(--ease-in-out);
}
.k-seg input:checked + span { background: var(--k-field); box-shadow: 0 1px 3px rgba(43,31,37,.18), 0 0 0 0.5px rgba(43,31,37,.08); }
.k-seg input:focus-visible + span { outline-color: var(--ink); }

/* the answer: one card for the rules, then where the claim goes */
.k-result { margin-top: 8px; }
.k-answer { animation: rise-in var(--dur-enter) var(--ease-out) backwards; }
.k-card { padding: clamp(20px, 3vw, 30px); background: var(--tile); border-radius: 28px; }
.doc .k-card .t-eyebrow { margin: 0 0 6px; font-size: 14px; }
.doc h3.k-title { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.14; }
.doc .k-reason { margin: 0 0 4px; color: var(--soft); }
.doc .k-note { margin: 10px 0 0; font-size: 15px; color: var(--soft); }
.doc .k-also { margin: 18px 0 6px; }
.k-card .c-facts { margin-bottom: 0; }
.k-card .c-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.k-more { margin-top: 6px; border-top: 1px solid var(--line); }
.k-more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; list-style: none; }
.k-more summary::-webkit-details-marker { display: none; }
.k-more summary::after { content: "\203A"; margin-left: 8px; color: var(--soft); transition: transform var(--dur-fast) var(--ease-in-out); }
.k-more[open] summary::after { transform: rotate(90deg); }
.doc h3.k-sub { margin: 28px 0 8px; }

/* the letter, and what to do with it */
.k-letter { margin-top: 8px; }
.k-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.k-actions .g-copy { float: none; margin: 0; padding: 0 22px; font-size: 17px; }
/* when the airline takes email, Mail is the one filled button and Copy steps back to an outline */
.k-actions .k-mail:not([hidden]) + .g-copy { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.doc.guide .read a.k-page { overflow-wrap: anywhere; }
.doc .k-status { min-height: 22px; margin: 10px 0 0; font-size: 14px; color: var(--soft); }

@media (max-width: 620px) {
  .k-form { grid-template-columns: 1fr; }
  .k-seg__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .k-actions .g-copy, .k-actions .btn { width: 100%; }
}