/* Applied Intake. Tokens follow company/visual-identity.md in the Applied CTO
   Company Brain, which is the source of record. Change that file first. */

:root {
  --paper: #FAF7F2;
  --ink: #1C1A17;
  --lead: #423D36;
  --body: #5C554C;
  --muted: #6E675D;
  --label: #8C8478;
  --rule: #DED5C7;
  --rule-soft: #EAE2D6;
  --panel: #F1EAE0;
  --numeral: #C6BCAE;
  --accent: #A6541F;
  --accent-hover: #7C3D14;
  --error: var(--accent-hover);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: 96px;
}

* { box-sizing: border-box; border-radius: 0; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
}

[hidden] { display: none !important; }

h1, h2 { font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: 78px; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
p { text-wrap: pretty; margin: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.lead { font-size: 22px; line-height: 1.55; color: var(--lead); max-width: 720px; margin-top: 28px; }
.body { color: var(--body); }
.aside { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 20px; }

/* ------------------------------------------------------------ frame */

.bar { border-bottom: 1px solid var(--rule); }
.bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mark { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.bar__right { display: flex; align-items: center; gap: 28px; }
.bar__note { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.wrap { max-width: 1440px; margin: 0 auto; padding: 96px var(--pad) 140px; }
.intro { max-width: 880px; }

/* ------------------------------------------------------------ controls */

label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

input, textarea {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  padding: 10px 14px;
  min-height: 52px;
  width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
input[type="file"] { font-family: var(--sans); font-size: 15px; padding: 12px; background: var(--paper); }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.button {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0 24px;
  min-height: 52px;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover { background: var(--lead); }
.button:disabled { opacity: 0.5; cursor: progress; }

.link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover { color: var(--accent-hover); }

.stack { margin-top: 48px; max-width: 640px; }
.stack label { margin-bottom: 12px; }
.row { display: flex; gap: 12px; }
.row input { flex: 1; }
#code { letter-spacing: 0.3em; }

.msg { font-family: var(--sans); font-size: 14px; color: var(--muted); min-height: 22px; margin-top: 12px; }
.msg[data-tone="error"] { color: var(--error); }
.msg[data-tone="ok"] { color: var(--ink); }

/* ------------------------------------------------------------ request */

.panel {
  background: var(--panel);
  padding: 40px 48px;
  margin-top: 72px;
  max-width: 880px;
}
.how { margin: 0; padding-left: 22px; color: var(--body); }
.how li + li { margin-top: 10px; }

.fields { margin-top: 96px; border-top: 1px solid var(--rule); }
.field {
  display: grid;
  grid-template-columns: 120px minmax(0, 760px);
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rule);
}
.field__num { font-size: 56px; line-height: 1; font-weight: 300; color: var(--numeral); }
.field label {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.25;
}
.field__help { color: var(--body); margin-top: 8px; }
.field__input { margin-top: 20px; display: flex; gap: 16px; align-items: center; }
.field__actions { margin-top: 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.field__actions .msg { margin: 0; }

.history { margin-top: 120px; max-width: 1040px; }
.history h2 { margin-bottom: 32px; }
table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; }
th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--rule);
}
td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule-soft); color: var(--body); vertical-align: top; }
td:first-child { color: var(--ink); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  :root { --pad: 56px; }
  h1 { font-size: 56px; }
}

@media (max-width: 820px) {
  :root { --pad: 24px; }
  body { font-size: 17px; }
  h1 { font-size: 40px; line-height: 1.08; }
  h2 { font-size: 30px; }
  .lead { font-size: 19px; }
  .wrap { padding-top: 56px; padding-bottom: 96px; }
  .bar__note { display: none; }
  .row { flex-direction: column; }
  .panel { padding: 28px 24px; margin-top: 48px; }
  .fields { margin-top: 64px; }
  .field { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
  .field__num { font-size: 36px; }
  .field label { font-size: 22px; }
  .history { margin-top: 80px; }
  thead { display: none; }
  tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
  td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 3px 0; }
  td::before { content: attr(data-label); color: var(--label); }
}