/* Navy, teal and gold, matching the proposal set and the IceCoach platform. */
:root {
  --navy: #1b2a4a;
  --teal: #1f8a8c;
  --gold: #c9a227;
  --slate: #5a6a85;
  --paper: #f5f7fa;
  --line: #c7d0dd;
  /* Sampled from the logo artwork itself rather than guessed at, so the bar
     and the mark sitting on it are the same colour rather than nearly. */
  --caramel: #e6ca9b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Calibri, "Segoe UI", system-ui, sans-serif;
  color: #1c1c1c;
  background: var(--paper);
  line-height: 1.5;
}

.masthead {
  background: var(--caramel);
  /* Navy on caramel, not white: white on this is roughly 1.8:1 and unreadable
     in sunlight, which is where a phone doing an identity check tends to be. */
  color: var(--navy);
  padding: 1.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid #d3b483;
}
.masthead h1 { margin: 0; font-size: 1.5rem; }
.tagline { margin: 0.25rem 0 0; color: #6b5a3e; font-size: 0.95rem; }

main { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.step h2 { margin-top: 0; color: var(--navy); font-size: 1.2rem; }
.hint { color: var(--slate); font-size: 0.92rem; }

.consent {
  background: var(--paper);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.consent h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--navy); }

.field { display: block; margin: 1rem 0; }
.field span { display: block; font-weight: 600; margin-bottom: 0.25rem; color: var(--navy); }
/* A name quoted inside a hint is part of the sentence, not a label above it. */
.field small span { display: inline; margin: 0; }
.field input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
.field small { color: var(--slate); }

.consent-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0; font-size: 0.95rem; }

button {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
.primary { background: var(--teal); color: #fff; }
.secondary { background: #fff; color: var(--navy); border-color: var(--line); }

.status { min-height: 1.2rem; color: var(--slate); font-size: 0.92rem; }
.status.error { color: #a4243b; }

.documents { list-style: none; margin: 0; padding: 0; }
.documents li {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.documents .title { font-weight: 600; color: var(--navy); }
.documents .meta { color: var(--slate); font-size: 0.85rem; }
.badge { font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px; }
.badge.signed { background: #e6f2f2; color: var(--teal); }
.badge.waiting { background: #fff8e1; color: #8a6d1f; }

.camera-host { min-height: 12rem; border: 1px dashed var(--line); border-radius: 6px; margin: 1rem 0; }

.receipt { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.92rem; }
.receipt dt { color: var(--slate); }
.receipt dd { margin: 0; }
.hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; word-break: break-all; }

footer { text-align: center; color: var(--slate); font-size: 0.85rem; padding-bottom: 2rem; }

.guardian {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem 1rem 0.25rem;
  margin: 0 0 1rem;
  background: var(--paper);
}
.guardian legend { font-weight: 600; color: var(--navy); font-size: 0.95rem; padding: 0 0.35rem; }
.guardian select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}

/* The way out for a computer with no usable camera. Set apart from the file
   picker above it so it reads as an alternative, not a second step. */
.handoff {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.qr-host {
  width: 220px;
  max-width: 100%;
  margin: 0.75rem 0;
}

.qr-host svg { width: 100%; height: auto; display: block; }

/* A URL nobody is expected to type, shown for the case where the camera will
   not scan. It must wrap rather than stretch the card. */
.handoff-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

/* A signed row keeps its badge and gains a way back into the document. */
.documents .actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.documents .actions button { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* The owner console. Wider than the signing card: it carries tables of keys
   and documents rather than one question at a time. */
body[data-page="console"] main { max-width: 46rem; }

.banner {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border-left: 3px solid var(--slate);
  background: #eef1f7;
  font-size: 0.92rem;
  line-height: 1.5;
}

.banner.pending { border-left-color: var(--gold); background: #fdf7e6; }
.banner.approved { border-left-color: var(--teal); background: #eef7f6; }
.banner.rejected { border-left-color: #b3261e; background: #fbeceb; }

/* An API key, shown once. Monospace so the characters are unambiguous, and
   selectable in one gesture. */
.new-key {
  background: #1c2a4a;
  color: #e8ecf5;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  overflow-x: auto;
  user-select: all;
}

/* The three subscription tiers, beside the credit top-up rather than on a
   page of their own: choosing between them is one decision, not a journey. */
.plans { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0.5rem 0 1rem; }
.plans td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plans td:last-child { text-align: right; }
.plans button { padding: 0.35rem 0.8rem; font-size: 0.85rem; }

/* The logomark, beside the wordmark rather than instead of it: the name is
   what a signer needs to recognise, and the mark is what makes it feel sealed.
   The slot keeps its size whether or not the image arrives, so nothing shifts
   under somebody mid-sentence. */
.brand-slot { width: 52px; height: 52px; flex: 0 0 52px; }
.logomark { width: 100%; height: 100%; display: block; }

.masthead { display: flex; align-items: center; gap: 0.9rem; }
.masthead h1 { flex: 0 0 auto; }
.masthead .tagline { flex: 1 1 100%; }

@media (max-width: 30rem) {
  .brand-slot { width: 40px; height: 40px; flex-basis: 40px; }
  /* The tagline goes under the name rather than off the side of a phone. */
  .masthead { flex-wrap: wrap; }
  .masthead h1 { font-size: 1.2rem; }
}

/* Two ways to compose a document, because the two cases differ: a contract
   somebody's lawyer produced arrives as a PDF, and a two-line waiver is faster
   to type than to typeset. */
.tabs { display: flex; gap: 0.5rem; margin: 0.75rem 0; }

.tab {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  color: var(--slate);
  cursor: pointer;
}

.tab.chosen { border-color: var(--teal); border-width: 2px; color: var(--navy); font-weight: 600; }

.field textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
}

/* The returning signer, first on the page. Most people arriving have been
   here before, and three years of cached verification is worth more than the
   consent screen they have already read once. */
.returning-first {
  background: #f2f8f7;
  border: 1px solid var(--teal);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}

.returning-first p { margin: 0 0 0.75rem; }

/* The bar a stranger meets, the same on every public page. On the front page
   it is hidden the moment the ceremony starts, along with the hero, so it
   costs a signer one short hero and nothing else. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.1rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.site-nav a { color: var(--navy); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .nav-cta { color: var(--teal); font-weight: 600; }
.site-nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }

.hero {
  margin-bottom: 1rem;
  padding: 1.25rem 0 0;
}

.hero h2 {
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1.25;
}

.hero p { margin: 0 0 0.75rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.5rem; }

/* A link that has to sit beside a button and look like one. Kept to the same
   metrics rather than a new set, so the two never drift apart. */
.button-link {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 1rem;
  text-decoration: none;
}

.button-link.primary { background: var(--teal); color: #fff; }
.button-link.secondary { background: #fff; color: var(--navy); border-color: var(--line); }

/* Each menu entry's page is one card like the ceremony's, so the site reads
   as one set of documents rather than a brochure wrapped around a form. */
.pitch {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.pitch h2 { margin-top: 0; color: var(--navy); font-size: 1.2rem; }
.pitch ul { margin: 0; padding-left: 1.1rem; }
.pitch li { margin-bottom: 0.45rem; }
.pitch p:last-child { margin-bottom: 0; }

/* The words on the front page, as the management view edits them. A textarea
   per section, sized to the copy rather than to a grid. */
.copy-field textarea {
  min-height: 7rem;
}

.copy-field.one-line textarea {
  min-height: 3rem;
}

/* Terms and the privacy notice. A page of prose, so it reads at a column width
   nearer a book's than a form's, and the subheadings the copy carries need to
   stand apart from the paragraphs under them. */
body[data-page="legal"] main { max-width: 40rem; }

.legal h3 {
  margin: 1.5rem 0 0.4rem;
  color: var(--navy);
  font-size: 1.02rem;
}

.legal h3:first-child { margin-top: 0.5rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.legal li { margin-bottom: 0.4rem; }

/* One page per menu entry, in both consoles: the menu is the whole of the
   navigation, and the page under it shows one thing. Sign out sits at the far
   end of the menu. */
.page-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.page-menu a {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--slate);
  font-size: 0.9rem;
  text-decoration: none;
}

.page-menu a:hover { border-color: var(--teal); }
.page-menu a[aria-current="page"] { border-color: var(--teal); border-width: 2px; color: var(--navy); font-weight: 600; }
.page-menu #sign-out { margin-left: auto; padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.page-menu .badge { margin-left: 0.3rem; }

.page-view > .ops-header:first-child { margin-top: 1.25rem; }
.page-view > h3:first-child { margin-top: 1.25rem; }

.badge.closed { background: #f0f1f4; color: var(--slate); }
.documents .withdraw-reason { width: 16rem; max-width: 100%; margin-right: 0.35rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.documents .decline-reason { width: 14rem; max-width: 100%; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.documents .actions { flex-wrap: wrap; justify-content: flex-end; }

/* The language flags, top right of every page's header - top left in a
   language written right to left. Each is a button labelled with the
   language's own name, so a screen reader says "Français", not "flag". */
.masthead { position: relative; }
.masthead:has(.language-switcher:not([hidden])) { padding-top: 2.4rem; }

.language-switcher {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.75rem;
  display: flex;
  gap: 0.35rem;
}

.language-choice {
  display: inline-flex;
  padding: 3px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  line-height: 0;
}

.language-choice img { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(27, 42, 74, 0.25); }
.language-choice:hover { border-color: #d3b483; }
.language-choice:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.language-choice[aria-pressed="true"] { border-color: var(--navy); }