/* Contract typography, phone first. No framework: this is a document that
   must read like a document, and a utility-class kit would be more bytes than
   the whole stylesheet on a box with 1 GB of monthly egress. */
:root {
  --ink: #1a1a1a; --muted: #5b5b5b; --line: #d8d5cf; --bg: #fbfaf8;
  --accent: #7a4a1e; --warn: #8a2b12; --ok: #1f6b3a;
  --serif: Georgia, "Times New Roman", "Noto Serif CJK TC", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans CJK TC", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 var(--sans);
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 1rem 1.1rem 4rem; }
/* The admin works in tables; the client READS. 44rem is a reading measure and
   squeezes a clause table until "Essential" wraps onto two lines, so the admin
   gets the window and the contract text keeps the column. */
.wrap.wide { max-width: 72rem; }
header.site {
  border-bottom: 1px solid var(--line); background: #fff;
  padding: .7rem 1.1rem; font-weight: 600;
}
header.site .sub { font-weight: 400; color: var(--muted); font-size: .85rem; }
h1 { font: 600 1.5rem/1.3 var(--sans); margin: 1.2rem 0 .3rem; }
h2 { font: 600 1.1rem/1.3 var(--sans); margin: 1.6rem 0 .4rem; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .9rem; }

/* Main points. Verbatim clause text under a plain-language heading - the
   heading is the only thing written by us. */
.card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: .9rem 1rem; margin: .8rem 0;
}
.card h3 { margin: 0 0 .4rem; font: 600 1.05rem/1.3 var(--sans); }
.card .clause { font-family: var(--serif); }
.card .cite { color: var(--muted); font-size: .78rem; margin-top: .5rem; }

/* The small print. Deliberately smaller and quieter - and deliberately still
   fully present, expandable, and included in the download. */
.fineprint {
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  padding: .6rem .9rem; margin-top: 1.4rem; font-size: .82rem;
  font-family: var(--serif); color: #333;
}
.fineprint h2 { font-size: .95rem; font-family: var(--sans); }
.fineprint details { border-top: 1px solid var(--line); padding: .35rem 0; }
.fineprint details:first-of-type { border-top: 0; }
.fineprint summary { cursor: pointer; font-family: var(--sans); font-size: .82rem; }
.fineprint table { border-collapse: collapse; width: 100%; font-size: .95em; }
.fineprint th, .fineprint td { border: 1px solid var(--line); padding: .25rem .4rem; }

/* Signature pad. touch-action:none is load-bearing - without it a finger
   scrolls the page instead of drawing. */
#pad {
  width: 100%; height: 190px; border: 1px dashed var(--line); border-radius: 4px;
  background: #fff; touch-action: none; display: block;
}
.sigline { color: var(--muted); font-size: .8rem; margin-top: .2rem; }

button, .btn {
  font: 600 1rem var(--sans); padding: .7rem 1.1rem; border-radius: 4px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button.ghost, .btn.ghost { background: #fff; color: var(--accent); }
/* Sized to sit inside the header bar, not to compete with the page's real
   actions - it is a convenience, never the next step. */
.back { font: 600 .8rem var(--sans); padding: .2rem .55rem;
  margin-right: .7rem; vertical-align: middle; }
button[disabled] { opacity: .45; cursor: not-allowed; }
label { display: block; margin: .7rem 0 .2rem; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=email], input[type=tel], input[type=file],
textarea, select {
  width: 100%; padding: .55rem .6rem; border: 1px solid var(--line);
  border-radius: 4px; font: 16px var(--sans); background: #fff;
}
/* 16px, never smaller: iOS zooms the viewport on focus below that, and the
   page never zooms back out. */
textarea { font-family: ui-monospace, Menlo, Consolas, monospace; min-height: 16rem; }
.hint { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
/* What just happened. Red because it has to be seen - the page it sits on
   looks the same as the one before the button was pressed. */
.notice { color: var(--warn); font-weight: 600; margin: .8rem 0 0; }
.notice.bad { border: 1px solid var(--warn); background: #fff5f2;
  padding: .5rem .7rem; border-radius: 4px; }
.blockers { border: 1px solid var(--warn); background: #fff5f2; padding: .7rem .9rem;
  border-radius: 4px; }
.blockers li { margin: .25rem 0; font-size: .88rem; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
table.list { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.list th, table.list td {
  text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--line);
}
.pill { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); }
pre.diff { background: #fff; border: 1px solid var(--line); padding: .6rem;
  overflow-x: auto; font-size: .78rem; }
/* The contract as it stands, for reading on the page it is edited on. */
pre.doctext { background: #fff; border: 1px solid var(--line); padding: .8rem;
  overflow-x: auto; font-size: .8rem; white-space: pre-wrap; max-height: 30rem; }
details summary { cursor: pointer; font-weight: 600; margin: .4rem 0; }
pre.diff .add { color: var(--ok); } pre.diff .del { color: var(--warn); }

@media print {
  header.site, .noprint, button, .btn { display: none !important; }
  body { background: #fff; }
  .fineprint { font-size: .8rem; border: 0; }
  .card { break-inside: avoid; }
}

/* A yes/no pair inside a table cell. `label` is display:block above, which
   would stack them and double the height of every clause row. */
label.choice { display: inline-flex; align-items: center; gap: .25rem;
  margin: 0 .7rem 0 0; font-weight: 400; font-size: .85rem; }
label.choice input { margin: 0; }
/* Keep the pair on one line: the clause column is wide, and a wrapped
   yes/no reads as two separate questions. */
table.list td.choices { white-space: nowrap; }
table.list td.flag { text-align: center; font-weight: 600; }

/* One company contract on the company page: a bordered block so three of them
   do not read as one long form. */
.contract { border: 1px solid var(--line); border-radius: 6px;
  padding: .3rem 1rem 1rem; margin: 1rem 0; background: #fff; }
.contract h3 { margin: .8rem 0 .4rem; }

/* Required marker, and the block that begs the counterpart to keep their URL:
   there is no "forgot my link" - nothing identifies them to us but the link
   and their passkey - so it has to be louder than the form around it. */
.req { color: var(--warn); font-weight: 700; }
.keepme { border: 2px solid var(--warn); border-radius: 6px;
  padding: .2rem 1rem 1rem; margin: 2rem 0 1rem; background: #fff8f5; }
/* The one thing on this page they must act on before leaving it. There is no
   "forgot my link", so this heading is sized and coloured to be impossible to
   skim past - the words carry the warning too, never the colour alone. */
.keepme h3 { margin: .9rem 0 .4rem; color: var(--warn);
  font: 800 1.75rem/1.25 var(--sans); }
.linkrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.linkrow code { background: #fff; border: 1px solid var(--line);
  padding: .3rem .5rem; border-radius: 4px; word-break: break-all; }
kbd { font: .8rem var(--sans); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 3px; padding: 0 .3rem;
  background: #fff; }