/* =============================================================================
   UORA clause generator
   web/assets/css/clause.css — page stylesheet for /clause. Loaded after
   tokens.css and base.css:

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/base.css">
     <link rel="stylesheet" href="/assets/css/clause.css">

   This is a stylesheet rather than a <style> block because the site is served
   under `style-src 'self'` with no 'unsafe-inline' (netlify.toml). Everything
   base.css already provides — .card, .form, .field, .radio, .btn, .chip,
   .notice, .kv, .grid — is used as it stands. What is here is only what base.css
   has no equivalent for: the two-language pane layout, the variant cards and the
   copyable clause blocks.

   Every colour is a token. Nothing here paints a literal value.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   A note on the Arabic face

   Nothing here declares one. base.css self-hosts Noto Sans Arabic behind a
   unicode-range covering the Arabic blocks, and --font-sans already names it
   after Inter, so an element carrying Arabic text picks the right face up from
   the body font with no help. What the Arabic panes below do set is size and
   leading: Noto's glyphs sit smaller on the em than Inter's, and Arabic needs
   more leading than Latin at the same measure.
   -------------------------------------------------------------------------- */

/* ====================================================== variant cards ===== */

/* Two cards, side by side where there is room and stacked at 360px. The
   min(100%, 260px) floor is what stops the track from forcing a horizontal
   scroll on a narrow phone. */
.variant-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.variant-card__text {
  display: block;
  min-width: 0;
}

.variant-card__label {
  display: block;
  font-weight: var(--fw-ui);
  color: var(--text);
}

/* A short RTL label inside an LTR layout. It gets its own line, but the box is
   shrunk to the text: a full-width dir="rtl" block would push the Arabic to the
   far edge of the card, a column away from the English it translates. */
.variant-card__ar {
  display: block;
  width: fit-content;
  margin-block-start: 2px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text2);
}

/* Selection is carried by the radio itself, which is the only signal that
   survives forced-colours mode and a monochrome print. The colour below is
   reinforcement, and the sibling-combinator rule is the one that matters:
   :has() only sharpens the card edge for browsers that support it. */
.variant-card input:checked ~ .variant-card__text .variant-card__label {
  color: var(--accent);
}

.variant-card:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* ======================================================== advanced pane === */

.advanced {
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-input);
  background: var(--bg-2);
}

.advanced__summary {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-ui);
  color: var(--text2);
  cursor: pointer;
}

.advanced__summary:hover {
  color: var(--text);
}

.advanced[open] .advanced__summary {
  border-block-end: var(--hairline) solid var(--border);
}

.advanced__body {
  padding: var(--s-4);
}

/* ========================================================= clause panes === */

.clause-head {
  gap: var(--s-4);
}

.clause-identity {
  min-width: 0;
}

.clause-provider {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tr-card);
  overflow-wrap: break-word;
}

/* Its own line rather than trailing the English on the same one: an inline RTL
   run beside an LTR one loses the space between them to bidirectional
   reordering, and "Guest)الضيافة" is not a label. Shrunk to its text for the
   same reason as .variant-card__ar above. */
.clause-variant-ar {
  display: block;
  width: fit-content;
  font-size: var(--fs-small);
  color: var(--text2);
}

/* One column until there is room for two full measures of legal prose. 900px is
   the point at which each pane still holds roughly 45 characters a line; below
   it the two languages read better stacked. */
.clause-panes {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 900px) {
  .clause-panes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.clause-pane {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.clause-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* The clause is shown as the text it is: pre-wrapped, so the paragraph breaks a
   reader will paste into a contract are the breaks they see, and selectable in
   full. The height cap keeps the metadata and the save action reachable without
   a long scroll; the block is focusable because a capped scroll container that
   cannot be reached from the keyboard is not operable. */
.clause-text {
  max-height: min(32rem, 70vh);
  overflow-y: auto;
  overflow-wrap: break-word;
  padding: var(--s-4);
  background: var(--bg-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-prose);
  white-space: pre-wrap;
  scrollbar-width: thin;
}

.clause-text--ar {
  font-size: var(--fs-body);
  line-height: 1.9;
}

.clause-shortform {
  max-height: none;
}

/* The glyph inside a copy button is wrapped so that it can be swapped for the
   tick without disturbing the label beside it. */
.copy-btn__icon {
  display: inline-flex;
  line-height: 0;
}

/* ============================================================= metadata === */

/* A SHA-256 is 64 characters with no break opportunity in it, which is a
   horizontal scrollbar on a 360px screen unless it is told it may break
   anywhere. */
.digest {
  overflow-wrap: anywhere;
}

.clause-note {
  color: var(--text3);
  font-size: var(--fs-caption);
  line-height: var(--lh-ui);
}

/* ========================================================== disclaimer === */

.disclaimer__summary {
  font-size: var(--fs-small);
  font-weight: var(--fw-ui);
  color: var(--text2);
  cursor: pointer;
}

.disclaimer__summary:hover {
  color: var(--text);
}

.disclaimer__body {
  margin-block-start: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

.disclaimer__body--ar {
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--border);
  line-height: 1.9;
}

/* =============================================================== print ====
   print.css turns every surface token transparent and hides every button, so
   what is left here is the geometry: no capped panes, no side-by-side columns,
   and the two languages one after the other as the generated documents set
   them. */

@media print {
  .clause-panes {
    grid-template-columns: minmax(0, 1fr);
  }

  .clause-text {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
  }

  .advanced,
  .clause-actions {
    display: none;
  }
}