/* =========================================================================
   THEORYS — TERMS OF SALE AND RESEARCH USE ATTESTATION
   The agreement page (template-agreement.php), the reminder bar shown across
   the shell to accounts with no signature on file, and the my-account status
   line. All three live in one sheet because all three are the same one fact
   ("is this signed?") shown at three different volumes.
   ========================================================================= */

/* ---------- reminder bar ---------------------------------------------- */

/* Sits directly under the header on every shell page for an unsigned account.
   Forest green rather than a warning red: nothing is wrong, a step is simply
   outstanding, and a red bar on every page reads as a broken store. */
.thr-agree-bar {
	background: var(--forest-deep);
	color: var(--white);
}
.thr-agree-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	flex-wrap: wrap;
}
.thr-agree-bar-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}
.thr-agree-bar-cta { flex: 0 0 auto; }

/* ---------- page head ------------------------------------------------- */

.thr-agree-head {
	padding: 46px 0 26px;
	border-bottom: 1px solid var(--line);
	background: var(--off-white);
}
.thr-agree-title {
	margin: 8px 0 12px;
	font-family: var(--font-head);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ink);
}
.thr-agree-wrap {
	/* The document is long-form prose: a measure this wide is the readable limit,
	   and the full 1200px shell width would run to ~140 characters a line. */
	max-width: 780px;
	padding: 34px 0 60px;
}

/* ---------- messages -------------------------------------------------- */

.thr-agree-msg {
	margin: 0 0 22px;
	padding: 12px 15px;
	border-radius: 5px;
	border-left: 3px solid var(--forest-mid);
	background: rgba(27, 58, 47, 0.05);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--forest-deep);
}
.thr-agree-msg.is-ok {
	border-left-color: var(--forest-deep);
	background: rgba(27, 58, 47, 0.08);
}
.thr-agree-msg.is-error {
	border-left-color: #b32d2e;
	background: rgba(179, 45, 46, 0.06);
	color: #8a2324;
}
/* Draft notice is amber: it is neither a success nor a failure, and colouring it
   green would read as reassurance about wording that is explicitly not final. */
.thr-agree-msg.is-draft {
	border-left-color: #9a6b13;
	background: rgba(154, 107, 19, 0.07);
	color: #6f4d0d;
}

/* ---------- the document --------------------------------------------- */

/* Version + issue line under the page lead. Small and grey on purpose: it is
   provenance, not a selling point, but it has to be visible because it is the
   string a customer would quote back when asking what they signed. */
.thr-agree-meta {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--platinum-lo);
}
.thr-agree-meta code { font-size: 11.5px; color: var(--forest-deep); }

.thr-agree-doc { margin: 0 0 34px; }

/* Seller block + recital, above section 1. Boxed so the parties read as the
   head of a contract rather than as the first paragraph of body copy. */
.thr-agree-parties {
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--off-white);
}
.thr-agree-parties-label {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--platinum-lo);
}
.thr-agree-seller {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
}
.thr-agree-recital {
	margin: 20px 0 4px;
	font-size: 14.5px;
	line-height: 1.75;
	color: #3c443f;
}

.thr-agree-sec { padding: 20px 0; border-bottom: 1px solid var(--line); }
.thr-agree-sec:last-child { border-bottom: 0; }
.thr-agree-sec-title {
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin: 0 0 12px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}
.thr-agree-sec-num {
	flex: 0 0 auto;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	color: var(--platinum-lo);
}
.thr-agree-sec p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: #3c443f;
}

/* ---------- numbered clauses ----------------------------------------- */

/* A hanging-indent grid rather than an <ol>: the clause numbers are printed
   values from the data (1.1, 6.3, 15.6), not counter() output. A list counter
   would silently renumber the whole document the day a clause is removed, and
   the prose cross-references those numbers by hand. */
.thr-agree-clause {
	display: grid;
	grid-template-columns: 3.1em 1fr;
	gap: 0 10px;
	margin: 0 0 13px;
}
.thr-agree-clause:last-child { margin-bottom: 0; }
.thr-agree-clause-num {
	font-family: var(--font-head);
	font-size: 12.5px;
	line-height: 2.03; /* optically aligns the number to the first prose line */
	color: var(--platinum-lo);
	font-variant-numeric: tabular-nums;
}
.thr-agree-clause-body p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: #3c443f;
}

/* Warranty disclaimer and liability cap. The source document sets these in
   capitals for conspicuousness, so the styling reinforces it rather than
   flattening it — but no text-transform: the capitals live in the content, and
   restyling them here would let a lowercase edit slip through looking correct. */
.thr-agree-clause.is-caps .thr-agree-clause-body p {
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: 0.01em;
	color: #2c332f;
}

/* Lettered sub-paragraphs — 6.3(a)-(b), 8.1(a)-(e). The letter is part of the
   string, so the marker is suppressed and the indent does the work. */
.thr-agree-subs {
	list-style: none;
	margin: 9px 0 0;
	padding: 0 0 0 14px;
}
.thr-agree-subs li {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.7;
	color: #3c443f;
}
.thr-agree-subs li:last-child { margin-bottom: 0; }

/* ---------- acceptance ------------------------------------------------ */

/* The four affirmations, repeated verbatim in the signature checkbox below.
   Tinted because this is the block the signature actually attaches to. */
.thr-agree-acceptance {
	margin-top: 8px;
	padding: 20px;
	border: 1px solid rgba(27, 58, 47, 0.22);
	border-radius: 6px;
	background: rgba(27, 58, 47, 0.04);
}
.thr-agree-affirm {
	list-style: none;
	margin: 13px 0 0;
	padding: 0;
}
.thr-agree-affirm li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--forest-deep);
}
.thr-agree-affirm li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--forest-mid);
}
.thr-agree-affirm li:last-child { margin-bottom: 0; }

/* ---------- sign form / signed panel --------------------------------- */

.thr-agree-form,
.thr-agree-panel {
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--white);
}
.thr-agree-form { border-color: rgba(27, 58, 47, 0.28); }
.thr-agree-panel.is-signed {
	border-color: rgba(27, 58, 47, 0.28);
	background: rgba(27, 58, 47, 0.04);
}
.thr-agree-panel-title {
	margin: 0 0 6px;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}
.thr-agree-form-intro {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--platinum-lo);
}
/* "Signing on behalf of X" — shown instead of the business-name input once the
   account already holds one, so the customer can see WHO is being bound. */
.thr-agree-form-for {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: var(--ink);
}

/* ---------- form primitives (MUST live here) --------------------------------
   .thr-field, .thr-terms and .thr-submit are also defined in theorys-gate.css,
   but that sheet is enqueued by thr_gate_assets(), which returns early for
   logged-in users — and the sign form only ever renders for a logged-in
   customer. So gate.css NEVER loads on this page and every one of those classes
   was arriving unstyled: labels sat inline against their inputs with no gap, the
   business-name field collided with the name/title row below it, the consent
   checkbox had no card, and the submit button rendered as a browser default.
   (The gate's button rule is scoped `.thr-modal .thr-submit` too, so it would
   not have applied here even if the sheet did load.)
   Deliberately duplicated rather than shared: the two sheets never load
   together, and making this page depend on a guests-only stylesheet is what
   caused the bug. Tokens match gate.css so the two forms still look identical.
   -------------------------------------------------------------------------- */

.thr-agree-form .thr-field { margin-bottom: 16px; }
.thr-agree-form .thr-field:last-child { margin-bottom: 0; }
.thr-agree-form .thr-field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.thr-agree-form .thr-field input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	background: var(--off-white);
	border: 1.5px solid var(--line);
	border-radius: 11px;
	padding: 12px 14px;
	transition: border-color .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.thr-agree-form .thr-field input[type="text"]:focus {
	outline: none;
	border-color: var(--forest-mid);
	background: var(--white);
}

/* The business-name field is a full-width row ABOVE the two-column name/title
   grid, so it needs its own separation from that grid — the grid's own gap does
   not apply across it. */
.thr-agree-form .thr-field + .thr-grid-2 { margin-top: 2px; }
.thr-agree-form .thr-grid-2 { margin-bottom: 4px; }

/* Consent row. Card-framed because this checkbox is the signature's operative
   act, not an incidental preference. */
.thr-agree-form .thr-terms {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 14px 0 20px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--off-white);
}
.thr-agree-form .thr-terms input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--forest-deep);
	cursor: pointer;
}
.thr-agree-form .thr-terms label {
	font-size: 13px;
	line-height: 1.6;
	color: #3a423d;
	cursor: pointer;
}

/* Sign and continue. Forest green with white text — it is the primary action on
   the page and the only thing standing between the customer and the catalog. */
.thr-agree-form .thr-submit-row { margin-top: 2px; }
.thr-agree-form .thr-submit {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 14px 28px;
	border: 1.5px solid var(--forest-deep);
	border-radius: 12px;
	background: var(--forest-deep);
	color: var(--white);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.thr-agree-form .thr-submit:hover:not(:disabled) {
	background: var(--forest-mid);
	border-color: var(--forest-mid);
}
.thr-agree-form .thr-submit:focus-visible {
	outline: 2px solid var(--forest-mid);
	outline-offset: 3px;
}
.thr-agree-form .thr-submit:disabled { opacity: .45; cursor: not-allowed; }

/* Two columns on desktop, stacked on mobile. Shared with the register modal's
   password pair, so it is declared here as well as in theorys-gate.css — the two
   sheets never both load (gate is guests-only, this is signed-in). */
.thr-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.thr-agree-record {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 7px 18px;
	margin: 14px 0 0;
	font-size: 13.5px;
}
.thr-agree-record dt {
	font-family: var(--font-head);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--platinum-lo);
	padding-top: 2px;
}
.thr-agree-record dd { margin: 0; color: var(--ink); }
.thr-agree-record code { font-size: 12px; color: var(--forest-deep); }
.thr-agree-foot {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--platinum-lo);
}
.thr-agree-next { margin: 24px 0 0; text-align: center; }

/* ---------- my-account status line ----------------------------------- */

.thr-agree-status {
	margin: 0 0 22px;
	padding: 12px 15px;
	border-radius: 5px;
	border-left: 3px solid var(--forest-deep);
	background: rgba(27, 58, 47, 0.05);
	font-size: 13.5px;
	line-height: 1.6;
}
.thr-agree-status p { margin: 0; color: var(--forest-deep); }
.thr-agree-status.is-unsigned { border-left-color: #9a6b13; background: rgba(154, 107, 19, 0.07); }
.thr-agree-status.is-unsigned p { color: #6f4d0d; }
.thr-agree-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
	.thr-grid-2 { grid-template-columns: 1fr; }
	.thr-agree-form .thr-submit { width: 100%; }
	/* Number above the clause instead of beside it: a fixed gutter plus a 14.5px
	   measure leaves about 30 characters a line on a phone. */
	.thr-agree-clause { grid-template-columns: 1fr; gap: 2px; }
	.thr-agree-clause-num { line-height: 1.5; }
	.thr-agree-acceptance, .thr-agree-parties { padding: 16px; }
	.thr-agree-bar-inner { align-items: flex-start; }
	.thr-agree-form, .thr-agree-panel { padding: 18px; }
	.thr-agree-record { grid-template-columns: 1fr; gap: 2px; }
	.thr-agree-record dd { margin-bottom: 9px; }
}