/*
 * Cosara — front-end skin over the self-hosted DocuSeal.
 *
 * Injected by nginx (sub_filter, just before </head>) rather than installed into the
 * app: DocuSeal's own branding settings are Pro-gated, and anything patched inside the
 * container is lost on the next `docker compose pull`. Living at the proxy means this
 * survives image upgrades and touches zero application code.
 *
 * Palette is the cosara.com website system (plum / cream / terracotta), not the brand
 * book (burgundy / pink / sandy) and not the email system (wine). Those three disagree
 * with each other; the website one is what a person sees before they land here, so it
 * is the one that makes the signing page feel continuous with the shop.
 *
 * Type is Questrial, which is what cosara.com uses and which matches the geometric
 * lowercase wordmark. The brand book specifies The Seasons + Apparat; both ship as
 * unlicensed demo files, so they are deliberately not used here.
 */

@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");

/* ---------------------------------------------------------------- palette -- */
/*
 * DaisyUI reads these as space-separated HSL triples. DocuSeal declares them on a
 * bare `:root`, so an equally-specific rule injected later in <head> wins on source
 * order. `[data-theme]` is included because DocuSeal ships a `:root,[data-theme]`
 * rule alongside it.
 */
:root,
[data-theme] {
  --p:  313 81% 10%;   /* #2F0526 plum — primary actions */
  --pf: 313 81% 7%;    /* pressed / focus */
  --pc: 23 44% 97%;    /* cream on plum */

  --s:  11 56% 50%;    /* #C65238 terracotta */
  --sf: 11 56% 43%;
  --sc: 23 44% 97%;

  --a:  11 56% 50%;    /* accent shares terracotta; DocuSeal's default was orange */
  --af: 11 56% 43%;
  --ac: 23 44% 97%;

  --n:  313 81% 10%;   /* neutral — plum */
  --nf: 313 81% 7%;
  --nc: 23 44% 97%;

  --wa: 11 56% 50%;    /* warning reads terracotta, not DaisyUI yellow */
  --wac: 23 44% 97%;

  --b1: 23 44% 97%;    /* #FAF5F2 cream ground */
  --b2: 24 30% 93%;    /* warm alt surface */
  --b3: 25 19% 86%;    /* sand borders and dividers */
  --bc: 313 81% 10%;   /* plum ink — 15.3:1 on cream, comfortably AAA */

  --cos-plum: #2F0526;
  --cos-cream: #FAF5F2;
  --cos-terracotta: #C65238;
  --cos-blush: #FEEBE9;
  --cos-sand: #C2B1A5;

  /* DaisyUI shouts by default. Cosara's register is "confident, adult, tasteful",
   * so buttons read as sentence case. `.btn { text-transform }` loses to DaisyUI's
   * own rule; setting the variable it reads is what actually takes effect. */
  --btn-text-case: none;
}

body {
  font-family: "Questrial", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------- the lockup -- */
/*
 * DocuSeal's header is `<a href="/"><svg …/><span>Cosara</span></a>` (the span text is
 * already rewritten by sub_filter). Cosara has no icon mark, only a wordmark, so the
 * svg is swapped for the wordmark image and the span is hidden from sight but left in
 * the accessibility tree.
 */
/*
 * The mark is rendered by shared/_logo.html.erb with its orange hard-coded in a
 * style attribute, and it is reused in at least three lockups: the app header, the
 * logged-out hero, and the post-signature completion panel. Targeting the viewBox
 * globally covers all of them, including any upstream adds later -- an earlier pass
 * that scoped this to `a[href="/"]` missed the hero and the completion screen.
 */
svg[viewBox="0 0 180 180"] {
  display: none !important;
}

:has(> svg[viewBox="0 0 180 180"])::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: 9rem;
  height: 1.6rem;
  background: url("/brand/cosara-wordmark.png") center / contain no-repeat;
}

@media (min-width: 768px) {
  :has(> svg[viewBox="0 0 180 180"])::before {
    width: 10.7rem;
    height: 1.9rem;
  }
}

/*
 * The wordmark already says the name, so the text node beside it would repeat it.
 * Hidden from sight, left in the accessibility tree.
 */
/*
 * The name beside the mark is marked up TWO different ways depending on the partial:
 *
 *   submit_form/_docuseal_logo   <a> <svg> <span>Name</span> </a>
 *   start_form/_docuseal_logo    <a> <span><svg></span> <h1>Name</h1> </a>
 *
 * The second is what renders on the post-signature completion screen. Matching only
 * the first left the wordmark and the word "Cosara" sitting side by side there.
 */
:has(> svg[viewBox="0 0 180 180"]) > span,
a:has(svg[viewBox="0 0 180 180"]) > h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* That lockup is a page-level banner, so it carries a larger wordmark. */
a:has(> span > svg[viewBox="0 0 180 180"]) > span::before {
  width: 13rem;
  height: 2.4rem;
}

/*
 * There is deliberately no @supports fallback for engines without :has(). An earlier
 * revision carried one that re-showed the span with `position: static !important`,
 * which fought the rule above and produced the wordmark and the word "Cosara" side by
 * side on the completion screen. :has() has been baseline in every current engine
 * since 2023, and the cost of getting the fallback wrong is a visibly broken lockup
 * on the one page a signer sees after signing.
 */

/* --------------------------------------------------------------- surfaces -- */
.btn {
  text-transform: none;      /* DaisyUI uppercases by default; the brand does not shout */
  letter-spacing: 0.01em;
}

/*
 * Most upstream labels are already sentence case ("Download documents"), but the
 * signing form's own controls come from i18n keys that are lowercase ("next",
 * "continue", "sign now") and relied on DaisyUI's uppercasing to look deliberate.
 *
 * ::first-letter does not apply to these -- DaisyUI's .btn is inline-flex, and
 * ::first-letter only works on block containers. Scoping `capitalize` to just these
 * ids fixes them without title-casing the nicely worded labels elsewhere
 * ("Send copy to Email" must not become "Send Copy To Email").
 */
#expand_form_button,
#submit_form_button,
#complete_form_button,
#minimize_form_button,
#type_text_button {
  text-transform: capitalize;
}

.btn-primary {
  border-color: transparent;
}

a:not(.btn):hover {
  text-decoration-color: var(--cos-terracotta);
}

/* Focus rings inherit the token above, but DocuSeal hard-codes a few outlines. */
:focus-visible {
  outline-color: var(--cos-terracotta) !important;
  outline-offset: 2px;
}

/* -------------------------------------------------------- signing surface -- */
/*
 * The most important screen in the product: what the creator actually sees. Keep the
 * document itself on white so the PDF reads as a document, and let the chrome carry
 * the brand.
 */
#form_container,
.document_container {
  background: var(--cos-cream);
}

/* ------------------------------------------------------------ completion -- */
/*
 * After signing, DocuSeal shows a completion panel. The download control is the whole
 * point of that screen, so it is promoted to a full-width primary button instead of
 * the quiet text link it ships as.
 */
a[href*="/download"],
a[download] {
  background: var(--cos-plum) !important;
  color: var(--cos-cream) !important;
  border: 0 !important;
  border-radius: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(47, 5, 38, 0.18);
}

a[href*="/download"]:hover,
a[download]:hover {
  background: #431036 !important;
}

/* --------------------------------------------------------- marketing trim -- */
/*
 * The logged-out landing page ships DocuSeal's own marketing: a hero mark, a version
 * badge, and four Docker / open-source cards. None of it is true of this deployment,
 * and the version badge told any stranger who loaded the domain exactly which release
 * to look up CVEs for.
 *
 * These are matched on `github.com` and `.com/install` rather than on `docusealco`,
 * because nginx's sub_filter is CASE-INSENSITIVE: the catch-all 'DocuSeal' rule also
 * rewrites the lowercase `docusealco` inside href attributes, so the upstream URLs
 * arrive at the browser as `github.com/Cosaraco/Cosara`. Any selector written against
 * the original vendor URL silently stops matching.
 */
a[href*="github.com"],
a[href*=".com/install"] {
  display: none !important;
}

/* The four Docker / open-source cards. */
div[class*="md:grid-cols-2"]:has(> div.card.bg-base-200) {
  display: none !important;
}

/* The hero repeats the name the wordmark already carries. */
h1.text-6xl.font-bold.mt-4.mb-4 {
  display: none !important;
}

/* Upstream's tagline describes DocuSeal the product, not this deployment. */
h2.mt-4.mb-16.text-lg {
  font-size: 0;
}

h2.mt-4.mb-16.text-lg::after {
  content: "Document signing for Cosara and Interactive Ecommerce.";
  font-size: 1.125rem;
  color: #6B5560;
}

/* The hero lockup is centred and larger than the header's. */
div:has(> h1.text-6xl.font-bold)::before {
  display: block;
  width: 17rem;
  height: 3.1rem;
  margin: 0 auto;
}

/* Post-signature completion view is rendered client-side by the form bundle,
   so the proxy rewrite never sees it. Kill the vendor attribution and the
   demo upsell links here instead. Deliberately matched WITHOUT the vendor
   name in the selector: the proxy rewrite is case-insensitive and would
   mangle it if this file is ever served through a filtered location. */
div:has(> a[href$=".com/start"]) {
  display: none !important;
}
a[href$=".com/sign_up"],
a[href*="github.com"][class*="white-button"] {
  display: none !important;
}