/* contact.html only. Uses tokens from base.css. */

.contact-hero { padding-top: var(--s-8); }
.contact-hero .section__head { margin-bottom: var(--s-7); }

/* Route cards */
.routes { list-style: none; padding: 0; }
.routes > li { display: flex; min-width: 0; }
.route {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t) ease-out, transform 240ms var(--spring), background-color var(--t) ease-out;
}
.route > * + * { margin-top: 0; }
.route__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.route__idx { font-size: 12px; color: var(--text-2); transition: color var(--t-fast) ease-out; }
.route__title { display: block; }
.route__desc { display: block; flex: 1; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.route__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-2);
  transition: color var(--t-fast) ease-out;
}
.route__go { display: inline-block; color: var(--accent); transition: transform 240ms var(--spring); }
.route:hover .route__idx, .route:focus-visible .route__idx { color: var(--accent); }
.route:hover .route__meta, .route:focus-visible .route__meta { color: var(--text); }
.route:hover .route__go, .route:focus-visible .route__go { transform: translateX(4px); }
.route:active { transform: scale(.985); transition-duration: 80ms; }
.route:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Layout: form + aside */
.contact-grid { display: grid; gap: var(--s-8); align-items: start; }
.compose-head { margin-bottom: var(--s-6); }
.compose-col { min-width: 0; }

/* Compose window */
.compose { min-width: 0; }
.compose .window__actions { transition: color var(--t) ease-out; }
.compose__body { padding: var(--s-5); }
.compose__nojs { display: none; color: var(--warn); font-size: 13px; }
html:not(.js) .compose__nojs { display: block; margin-bottom: var(--s-5); }
.compose__pair { display: grid; gap: var(--s-5); }
.compose__pair .field + .field { margin-top: 0; }
.compose__pair + .field { margin-top: var(--s-5); }
.compose__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.compose__count { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; transition: color var(--t-fast) ease-out; }
.compose__count.is-ok .n { color: var(--ok); }
.compose__count.is-warn .n { color: var(--warn); }
.compose .input, .compose .textarea, .compose .select { background-color: var(--bg); }
.compose .input:focus, .compose .textarea:focus, .compose .select:focus {
  background-color: var(--bg-2);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 24px -4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.compose .input[aria-invalid="true"]:focus, .compose .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--err-soft); }
.compose .label { transition: color var(--t-fast) ease-out; }
.compose .field:focus-within .label { color: var(--accent); }
.compose .field__error { animation: cf-in 220ms var(--ease-out); }
.compose__sys { gap: 4px; }
.compose__sys .field__hint { padding-left: 26px; }
.compose__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.compose__status { font-size: 13px; color: var(--text-2); }
.compose__status.is-err { color: var(--err); }
.compose__status.is-busy { color: var(--text); }
.compose__status .x { font-weight: 600; }

/* Success state */
.compose__done { font-size: 14px; animation: cf-in 260ms var(--ease-out); }
.compose__done:focus { outline: none; }
.compose__done:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-ctl); }
.done__cmd { color: var(--text-2); }
.done__ok { margin-top: var(--s-2); font-size: 18px; color: var(--text); }
.done__meta { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); font-size: 13px; }
.done__meta div { display: flex; gap: var(--s-4); min-width: 0; }
.done__meta div + div { margin-top: var(--s-2); }
.done__meta dt { flex: none; width: 8ch; color: var(--text-2); }
.done__meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text); }
.done__note { margin-top: var(--s-4); color: var(--text-2); font-size: 13px; max-width: 56ch; }
.done__actions { margin-top: var(--s-5); }

/* Aside */
.contact-aside { display: grid; gap: var(--s-5); min-width: 0; }
.aside-block { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); }
.aside-block > * + * { margin-top: var(--s-3); }
.aside-block__label { font-size: 13px; color: var(--text-2); }
.aside-block__title { font-size: 15px; font-weight: 500; color: var(--text); }
.direct { border-color: var(--border); background: var(--panel); }
.direct__addr { font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.direct__actions { margin-top: var(--s-4); }
.quick { list-style: none; padding: 0; }
.quick a {
  display: grid;
  gap: 2px;
  min-height: 44px;
  margin-inline: calc(-1 * var(--s-3));
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-ctl);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-fast) ease-out;
}
.quick__q { font-size: 14px; }
.quick__q::after { content: " \2192"; content: " \2192" / ""; display: inline-block; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--t) ease-out, transform 240ms var(--spring); }
.quick__path { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.quick a:hover, .quick a:focus-visible { background: var(--selection); }
.quick a:hover .quick__q::after, .quick a:focus-visible .quick__q::after { opacity: 1; transform: none; }
.quick a:active { background: var(--accent-soft); }
.quick a:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

@keyframes cf-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .compose__pair { grid-template-columns: 1fr 1fr; }
  .compose__body { padding: var(--s-6); }
}
@media (min-width: 1024px) {
  .contact-hero { padding-top: var(--s-9); }
  .contact-grid { grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s-7); }
  .contact-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
@media (max-width: 479px) {
  .compose__body { padding: var(--s-4); }
  .compose__submit { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .compose .field__error, .compose__done { animation: none; }
  .route:active { transform: none; }
}