/* ---------------------------------------------------------------------------
   Technical specifications and developer guides
   ---------------------------------------------------------------------------

   Seven reference documents, 964 to 3,518 words each, re-themed rather than
   rebuilt. The markup is Elementor's and stays Elementor's; this file only
   stops the layout fighting the words.

   THE MEASURE IS THE WHOLE JOB. Body text ran the full 1,280px, roughly 180
   characters a line against a readable 45 to 90. On a 3,500-word specification
   that is the difference between a document somebody finishes and one they
   skim. 1,100px with a 120px gutter is the figure the case study re-theme
   already uses, so these match it rather than inventing a second one.

   THEY STAY LIGHT, deliberately. The rebuilt marketing pages are dark because
   a scene with a device in it wants a dark ground. A long technical read does
   not, and the case studies are white for the same reason. Every long-form
   document on this site should read the same way.

   Scoped to .sr-spec, added by inc/specs.php.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   The measure
   ------------------------------------------------------------------------ */

/*
 * Applied to the widget container rather than to the text, so a paragraph, a
 * list and a heading all share one edge. Capping each element separately gives
 * a ragged left margin wherever one of them is a different element type.
 *
 * The exceptions are the things that are legitimately wider than prose: a code
 * block, a table, and an image. Those get the full column, because wrapping a
 * shell command to 72 characters helps nobody.
 */
.sr-spec .elementor-widget-container > p,
.sr-spec .elementor-widget-container > ul,
.sr-spec .elementor-widget-container > ol,
.sr-spec .elementor-widget-container > h2,
.sr-spec .elementor-widget-container > h3,
.sr-spec .elementor-widget-container > h4,
.sr-spec .elementor-widget-container > blockquote {
  max-width: 72ch;
}

/*
 * A heading may run a little wider than its paragraphs. It is set larger, so
 * the same character count occupies more room, and a two-line heading over a
 * 72ch body reads as a heading rather than as a wrapped sentence.
 */
.sr-spec .elementor-widget-container > h2 {
  max-width: 24ch;
}

.sr-spec .elementor-widget-container > h3 {
  max-width: 40ch;
}

/* ---------------------------------------------------------------------------
   Rhythm
   ---------------------------------------------------------------------------
   A specification is read in sections. What it needs is space above a heading
   that is clearly larger than the space below it, so a heading belongs to what
   follows rather than floating between two blocks.
   ------------------------------------------------------------------------ */

.sr-spec .elementor-widget-container > h2 {
  margin-top: 2.4em;
  margin-bottom: 0.5em;
  line-height: 1.15;
}

.sr-spec .elementor-widget-container > h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  line-height: 1.25;
}

.sr-spec .elementor-widget-container > p {
  line-height: 1.65;
  margin-bottom: 1.1em;
}

.sr-spec .elementor-widget-container > ul,
.sr-spec .elementor-widget-container > ol {
  line-height: 1.65;
  margin-bottom: 1.3em;
  padding-left: 1.4em;
}

.sr-spec .elementor-widget-container > ul li,
.sr-spec .elementor-widget-container > ol li {
  margin-bottom: 0.45em;
}

/* ---------------------------------------------------------------------------
   Code
   ---------------------------------------------------------------------------
   A specification that quotes a payload or a command has to show it exactly,
   so a code block never wraps silently: it scrolls inside its own box and the
   page never moves sideways.
   ------------------------------------------------------------------------ */

.sr-spec pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 10px;
  border: 1px solid rgba(10, 13, 49, 0.12);
  background: #f6f7fb;
  font-size: 0.875rem;
  line-height: 1.55;
}

.sr-spec pre:focus-visible {
  outline: 2px solid var(--sr-accent, #3458e0);
  outline-offset: 3px;
}

.sr-spec :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: rgba(10, 13, 49, 0.06);
  font-size: 0.9em;
  /* Break a long identifier rather than push the page sideways. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------ */

/*
 * Same rule as every other table on this site: it scrolls inside itself and
 * never moves the page. A wrapper would be better markup, but this content is
 * Elementor's and re-theming does not rewrite it, so the table takes the
 * overflow itself.
 */
.sr-spec .elementor-widget-container > table,
.sr-spec .elementor-widget-container table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.sr-spec table th,
.sr-spec table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(10, 13, 49, 0.12);
}

.sr-spec table th {
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The contents list
   ---------------------------------------------------------------------------
   Every one of these opens with a list of its own sections, rendered as a bare
   bulleted list of links. It is the most useful thing on the page for a reader
   deciding whether to read the rest, and it looked like an afterthought.

   Detected by structure rather than by class, because the markup is Elementor's
   and carries no hook: a list whose items are ALL links, near the top of the
   document, is a table of contents and nothing else on these pages is.
   ------------------------------------------------------------------------ */

.sr-spec .elementor-widget-container > ul:has(> li > a:only-child) {
  max-width: 46ch;
  margin: clamp(20px, 3vh, 32px) 0 clamp(28px, 4vh, 44px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(10, 13, 49, 0.12);
  border-left: 3px solid var(--sr-accent, #3458e0);
  border-radius: 10px;
  background: #f8f9fc;
  list-style: none;
}

.sr-spec .elementor-widget-container > ul:has(> li > a:only-child) li {
  margin-bottom: 0.35em;
}

.sr-spec .elementor-widget-container > ul:has(> li > a:only-child) a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sr-spec .elementor-widget-container > ul:has(> li > a:only-child) a:hover,
.sr-spec .elementor-widget-container > ul:has(> li > a:only-child) a:focus-visible {
  border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  /*
   * The measure caps do nothing here - the column is already narrower than
   * 72ch - so all that is left is to stop a heading set for a wide screen from
   * running to three or four lines on a phone.
   */
  .sr-spec .elementor-widget-container > h2 { max-width: none; }
  .sr-spec .elementor-widget-container > h3 { max-width: none; }
}

/* ---------------------------------------------------------------------------
   A second markup shape
   ---------------------------------------------------------------------------
   The two DigitalMe documents joined this treatment on 2026-08-31 and did not
   respond to any of the rules above. Their prose is bare `section > p` rather
   than Elementor's `.elementor-widget-container > p`, so every measure cap
   above missed and the body still ran the full 1,280px, which is the one fault
   this file exists to fix.

   Worth knowing for the next document added here: the body class landing is not
   evidence that anything happened. sr-spec was on the page and the measure was
   unchanged, which looks identical to the treatment working.

   Scoped to .sr-spec, and to direct children of a section, so this cannot reach
   a card, a footer column or anything Elementor lays out in a grid.
   ------------------------------------------------------------------------ */

.sr-spec main section > p,
.sr-spec main section > ul,
.sr-spec main section > ol,
.sr-spec main section > blockquote {
  max-width: 72ch;
}

.sr-spec main section > h2 { max-width: 24ch; }
.sr-spec main section > h3 { max-width: 40ch; }

.sr-spec main section > h2 {
  margin-top: 2.4em;
  margin-bottom: 0.5em;
  line-height: 1.15;
}

.sr-spec main section > h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  line-height: 1.25;
}

.sr-spec main section > p {
  line-height: 1.65;
  margin-bottom: 1.1em;
}

.sr-spec main section > ul,
.sr-spec main section > ol {
  line-height: 1.65;
  margin-bottom: 1.3em;
  padding-left: 1.4em;
}

.sr-spec main section > ul li,
.sr-spec main section > ol li { margin-bottom: 0.45em; }

/* ---------------------------------------------------------------------------
   The DigitalMe documents set their own 1,280px measure
   ---------------------------------------------------------------------------
   A WPCode snippet prints, inline in the head:

       body.shr-wp-brief .elementor-widget-text-editor p { max-width: 1280px }

   which is 0-2-2 and beats the 0-1-3 of the rules above, so adding these two
   pages to the specs list changed the body class and nothing else. The measure
   stayed at exactly the number this whole file exists to reduce.

   That is the second time on these two pages that a change looked applied and
   was not: the body class landed, sr_is_spec() returned true, the stylesheet
   loaded, the selector matched, and the paragraphs were still 1,280px wide.
   Only reading the computed value found it.

   AND IT CARRIES !important, which is the part that matters. Raising
   specificity to 0-2-3 did not win either, because no specificity beats an
   !important declaration. The only thing that does is !important at higher
   specificity, which is what these rules are.

   That is the ONLY use of !important in this stylesheet and it is deliberate:
   it is answering another author's !important, not shouting over the cascade
   for convenience. The alternative is editing the snippet, which is the tidier
   fix and the worse risk: WPCode's save() unslashes escapes, and a snippet that
   stops parsing takes Rank Math's @graph off every page on the site.

   THIRD TIME ON THESE TWO PAGES that a change looked applied and was not. The
   body class landed, sr_is_spec() returned true, the stylesheet loaded, the
   selector matched, and the paragraphs stayed 1,280px wide. Only reading the
   computed value, and then the declaration's priority, found it.
   ------------------------------------------------------------------------ */

body.sr-spec main .elementor-widget-text-editor p,
body.sr-spec main .elementor-widget-text-editor ul,
body.sr-spec main .elementor-widget-text-editor ol {
  max-width: 72ch !important;
}

body.sr-spec main .elementor-widget-text-editor h2 { max-width: 24ch !important; }
body.sr-spec main .elementor-widget-text-editor h3 { max-width: 40ch !important; }