/* ==========================================================================
   IDS CoSend — settings site.
   Colours and shapes taken from the IDS brand package and from CoSend's own
   interface, so this sits natively beside the PC client and the manual.
   One stylesheet. No framework, no build step, no third-party anything.
   ========================================================================== */

:root {
  --ink:         #23415F;   /* master ink */
  --core:        #2D527C;   /* Core blue — the button */
  --success:     #1E7E34;
  --warning:     #9A6206;   /* CoSend amber */
  --deep:        #1C2733;   /* deep ink — the header bar and body text */
  --surface-alt: #EEF2F7;

  --page: #F4F6FA;
  --card: #FFFFFF;
  --line: #D9E1EC;
  --muted: #5B6B7F;
  --bad:  #A32020;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(28,39,51,.06), 0 8px 24px rgba(28,39,51,.05);
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* These are business screens, and a courier's setting must read the same on
   every desk. They stay light in a dark-mode browser, like the manual. */
:root { color-scheme: light; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--deep);
  font: 15px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* ---------- the bar ---------- */

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: var(--deep);          /* the colour baked behind the dark lockup */
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(28,39,51,.18);
}
.topbar img { height: 32px; width: auto; display: block; }
.topbar .title { font-weight: 700; font-size: 16px; letter-spacing: .1px; }
.topbar .spacer { margin-left: auto; }
.topbar .who { font-size: 13px; }
.topbar .dim { color: #A9B7C7; }
.topbar a.plain { color: #fff; font-size: 13px; margin-left: 14px; }

main { max-width: 860px; margin: 26px auto 60px; padding: 0 18px; }

footer {
  max-width: 860px; margin: 0 auto 40px; padding: 0 18px;
  color: var(--muted); font-size: 13px;
}

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.card h1 { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.card h2 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.card p.lede { margin: 0 0 18px; color: var(--muted); }

/* the sign-in card sits alone and narrow */
.card.signin { max-width: 420px; margin: 60px auto 20px; }

/* ---------- fields ---------- */

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field .help { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }

input[type=text], input[type=password], select {
  width: 100%;
  min-height: 38px;               /* well above the 24px accessible floor */
  padding: 7px 10px;
  font: inherit;
  color: var(--deep);
  background: #fff;
  border: 1px solid #7E8C9B;      /* the input outline CoSend uses */
  border-radius: 4px;
}
input:focus, select:focus {
  outline: 2px solid var(--core);
  outline-offset: 1px;
  border-color: var(--core);
}

button {
  min-height: 38px;
  padding: 8px 18px;
  font: inherit; font-weight: 600;
  color: #fff; background: var(--core);
  border: 1px solid var(--core); border-radius: 4px;
  cursor: pointer;
}
button:hover { background: #26466A; }
button:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }

/* ---------- notices ---------- */

.notice {
  margin: 0 0 16px; padding: 10px 12px;
  border-radius: 6px; border: 1px solid;
  font-size: 14px;
}
.notice.ok   { background: #EAF6EE; border-color: #BFE0CA; color: #14602A; }
.notice.warn { background: #FBF2E2; border-color: #EBD8AE; color: var(--warning); }
.notice.bad  { background: #FBEAEA; border-color: #EDC4C4; color: var(--bad); }

/* ---------- the "where does this come from" line ---------- */

.source { font-size: 13px; color: var(--muted); margin-top: 4px; }
.source .from-courier { color: var(--warning); font-weight: 600; }
.source .from-account { color: var(--success); font-weight: 600; }

/* ---------- small print ---------- */

.rule { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.smallprint { color: var(--muted); font-size: 13px; }
a { color: var(--core); }