/* Watermark — Altixia palette, administrative sobriety.
 *
 * The register is deliberate: generous white space, thin rules, information boxes, readable
 * type, no ornament. Someone about to upload a passport scan is reassured by a page that looks
 * like a form, not by a page that looks like a campaign.
 *
 * Nothing here comes from the French State design system. The palette is Altixia's own.
 *
 * TODO: vendor the Inter woff2 files. House doctrine is self-hosted fonts; until the files are
 * in assets/, the stack falls through to the system UI font, which is close enough in metrics
 * that the layout does not shift.
 */

:root {
  --primary: #28669c;
  --accent: #2f81c1;
  --dark: #262626;
  --ink: #262626;
  --ink-soft: #4d5866;
  --line: #d3e7f7;
  --line-soft: #e8eef3;
  --surface: #ffffff;
  --ground: #f7f9fb;
  --notice: #eaf4fc;
  --danger: #9c2828;
  --success: #1c7a4a;
  --success-bg: #e9f6ee;
  --success-line: #b8e0c8;
  --radius: 6px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute must win.
 *
 * Its effect comes from a user-agent rule of the lowest possible weight, so any `display` in this
 * file silently defeats it — which is exactly what happened: `.drop-chosen` set `display: block`,
 * so after "process another document" the script set `chosen.hidden = true`, the file input was
 * genuinely empty, and the visitor still saw the previous filename on screen. Pressing submit
 * then answered "no file was submitted" while the name sat there contradicting it.
 *
 * Fixed here rather than on that one selector, because the next element given both a `display`
 * and a `hidden` toggle would break the same way and just as quietly. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1,
h2,
h3 {
  line-height: 1.25;
  color: var(--dark);
  font-weight: 600;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.02rem;
}

/* No measure cap.
   A 66-character line is the typographic convention, but here it produced early line breaks and
   a wide band of unused page on a large screen. The container width below is the only limit. */
p {
  margin: 0 0 1rem;
}

a {
  color: var(--primary);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent);
}

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

.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--surface);
  padding: 0.5rem 0.75rem;
  z-index: 10;
}

/* --- header ------------------------------------------------------------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 5vw, 3rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.brand-tool {
  padding-left: 0.6rem;
  border-left: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.langs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.lang {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.lang:hover {
  background: var(--notice);
}

.lang.current {
  background: var(--primary);
  color: #fff;
}

/* --- layout ------------------------------------------------------------- */

main {
  max-width: 88rem;
  margin: 0 auto;
  /* No bottom padding: the footer provides the separation, and adding it here left a band of
     empty page below the last section that served no purpose. */
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 5vw, 3rem) 0;
}

section {
  margin-bottom: 3rem;
}

/* The last section must not push the footer away from it either. */
main > section:last-of-type {
  margin-bottom: 0;
}

/* The one thing worth stopping for: a watermark can make a document useless to the body that
   asked for it. Set apart, not shouted. */
.caution {
  font-size: 1.02rem;
  padding: 0.75rem 1rem;
  background: var(--notice);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

/* Three statements of fact, not a feature list. */
.facts {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.facts li {
  margin-bottom: 0.2rem;
}

/* The one piece of promotion on the page.
   Dark, so it reads as an aside and not as part of the tool, and placed after the form so it is
   never in the way of someone who came to stamp a document. */
.pitch {
  margin-top: 2.5rem;
  padding: 1.25rem 1.4rem;
  background: #12385c;
  color: #eaf4fc;
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.pitch-line {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  transition: opacity 0.25s;
}

.pitch-line.is-fading {
  opacity: 0;
}

.pitch-cta {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pitch-cta:hover {
  color: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .pitch-line {
    transition: none;
  }
}

/* No measure cap here either.
   A 44rem column was added and removed within the hour: on a wide screen it reproduces the
   narrow band of an old 1024-wide layout, with most of the display unused. The site has one
   width, set on `main`, and this page uses it like the rest. */
.prose h2 {
  margin-top: 2rem;
  font-size: 1.1rem;
}

.account {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.quota {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--notice);
  color: var(--ink-soft);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Unlimited is the state worth noticing, so it is the one that carries colour. */
.quota.is-unlimited {
  background: var(--success-bg);
  color: var(--success);
  font-weight: 500;
}

/* --- the sign-in control ------------------------------------------------- */

.authbtn {
  padding: 0.3rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  background: transparent;
  color: var(--primary);
  border-color: var(--line);
}

.authbtn:hover:not(:disabled) {
  background: var(--notice);
  color: var(--primary);
}

/* Signed in: quieter still. It is a state, not an invitation. */
.authbtn.is-signed-in {
  color: var(--ink-soft);
}

/* --- the tool ----------------------------------------------------------- */

.tool {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.drop {
  display: block;
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.drop:hover,
.drop.is-over {
  border-color: var(--accent);
  background: var(--notice);
}

.drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.drop-hint {
  display: block;
  font-weight: 500;
}

.drop-formats,
.field-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

.drop-chosen {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 500;
  word-break: break-word;
}

.field {
  display: block;
  margin: 1.5rem 0;
}

.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* The insertable date and time.
 *
 * Deliberately not styled as buttons in the page's sense: the primary blue belongs to the one
 * action that submits a document, and three competing blue buttons around the field would make
 * the form ask which one matters. These read as chips — quiet, outlined, secondary — and they
 * carry the value itself, in tabular figures so the two do not jostle as the minute changes.
 */
.tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.tokens-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.token {
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.token:hover:not(:disabled),
.token:focus-visible {
  border-color: var(--accent);
  color: var(--primary);
}

.token:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.field input[type="text"]:focus-visible,
.field input[type="email"]:focus-visible,
.drop:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font: inherit;
  font-weight: 500;
  padding: 0.65rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--accent);
}

button:disabled {
  opacity: 0.55;
  cursor: progress;
}

button.again {
  background: transparent;
  color: var(--primary);
  border-color: var(--line);
  margin-top: 0.75rem;
}

.status {
  margin: 0.9rem 0 0;
  min-height: 1.5rem;
  font-size: 0.95rem;
}

.status.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* Green, and deliberately so.
   This box is the one moment the visitor needs to recognise without reading: the work is done
   and the file is theirs. Everything else on the page is blue, so a different hue carries that
   on its own. */
.result {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
}

.result .download {
  color: var(--success);
  font-size: 1.05rem;
}

.result .download::before {
  content: "\2713\00a0";
  font-weight: 700;
}

.download {
  display: inline-block;
  font-weight: 600;
}

.result-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}

/* The honesty box is visually distinct on purpose: the thing it says is the thing a reader is
   least likely to expect a vendor to say, so it should not read as small print. */
.honesty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}

.honesty p {
  margin: 0;
}

/* Set apart from the explanatory copy above it: this block is about who made the tool, not about
   what it does, and running the two together read as one undifferentiated wall of text. */
.altixia {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}

.altixia .outbound {
  font-weight: 500;
}

/* --- footer ------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  padding: 1.5rem clamp(1rem, 5vw, 3rem) 2.5rem;
  font-size: 0.87rem;
  color: var(--ink-soft);
}

.foot p {
  margin: 0;
}


@media (prefers-color-scheme: dark) {
  :root {
    --success: #5fbf8a;
    --success-bg: #14301f;
    --success-line: #2c5c3f;
    --ink: #e8edf2;
    --ink-soft: #a8b4c2;
    --dark: #f2f5f8;
    --line: #24405c;
    --line-soft: #1e2c3a;
    --surface: #141c26;
    --ground: #0d141c;
    --notice: #16283a;
    --danger: #e8908f;
    color-scheme: dark;
  }

}

/* The allowance gate.
   Distinct from the rest of the form because it is a different kind of ask: everything above is
   about the document, this is about the visitor. */
.gate {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--notice);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.gate h3 {
  margin-top: 0;
}

.gate p {
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.gate .field {
  margin-bottom: 0.5rem;
}

/* The gate's own button. It settles access and nothing else, so it must not look like the one
   that processes the document — same weight would put two primary actions on screen and leave
   the visitor to work out which one they are being asked to press. */
#wm-gate-submit {
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
}

.gate-status {
  margin: 0.6rem 0 0;
  min-height: 1.35rem;
  font-size: 0.9rem;
}

.gate-status.is-error {
  color: var(--danger);
}

.gate-client {
  margin-bottom: 0;
  margin-top: 0.6rem;
  font-size: 0.87rem;
}

/* A button, because it starts a redirect rather than following a link — but it reads as a link,
   because next to it sits the real action and two buttons would compete. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.linklike:hover {
  background: none;
  color: var(--accent);
}

/* The download is the point of the box, so it is centred and given room; everything else in
   there is secondary. */
.result {
  text-align: center;
}

.result .download {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}

.download-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The produced filename, shown next to the link: it was generated for them, so it should be
   visible before they click rather than only afterwards in the Downloads folder. */
.download-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  word-break: break-all;
}

.result .result-note {
  margin: 0.6rem auto 0;
}

/* Deliberately quieter than the download, until the file has been saved. */
.result .again {
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
}

.result .again.is-primary {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

.result .again.is-primary:hover {
  background: var(--accent);
}