/* DCM Switchboard — subscriber paywall components.            Added v1.4.0

   Kept out of theme.css on purpose: that file is the ported design and is
   treated as a managed artifact. Everything the paywall adds lives here, so
   the diff stays reviewable and the whole feature can be pulled by removing
   one enqueue.

   Tokens come from theme.css :root. Nothing here defines a new colour.       */


/* ---------- lock badge ----------------------------------------------------
   Chip styling is lifted from .article__tags a so it reads as part of the
   existing system rather than an import.                                    */

.dcm-badge{
  display:inline-flex;align-items:center;gap:.34rem;
  font-family:"IBM Plex Mono",monospace;
  font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);
  border:1px solid rgba(193,139,67,.4);border-radius:3px;
  padding:.2rem .45rem .18rem;line-height:1;white-space:nowrap;
  vertical-align:middle;
}
.dcm-badge__lock{width:9px;height:9px;flex:none}
.band--ink .dcm-badge,
.dcm-wall .dcm-badge{color:var(--brass-2);border-color:rgba(216,166,92,.45)}


/* ---------- kicker row ----------------------------------------------------
   core/post-terms is filtered in functions.php down to the primary category
   and given this class, so the category and the badge sit on one baseline.  */

.dcm-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .65rem}


/* ---------- premium cards in the feed -------------------------------------
   post_class() puts .dcm-premium on the <li>, so no markup surgery is needed
   in the query loop.                                                        */

.feed-grid .wp-block-post.dcm-premium{
  background:#F6F4EF;
  box-shadow:inset 3px 0 0 var(--brass);
}
.related .feed-grid .wp-block-post.dcm-premium{background:#EFEEE9}


/* ---------- standfirst ----------------------------------------------------
   Applied by the "Article — standfirst" pattern.                           */

.article__body .standfirst{
  font-size:1.16rem;line-height:1.62;color:var(--on-paper);
  margin:0 0 1.6rem;padding-left:1.1rem;
  border-left:3px solid var(--brass);
}


/* ---------- "in the full article" contents list ---------------------------
   Applied by the retired "in the full article" pattern, kept for posts
   written before v1.6.0. New posts put this list in the wall instead. Numerals
   are CSS counters on a real <ol>, so the list stays ordered for screen
   readers and for anyone reading with styles off.                           */

.dcm-contents{
  border-top:2px solid var(--brass);
  margin:2.6rem 0 0;padding-top:1.2rem;
}
.dcm-contents .eyebrow{margin-bottom:.9rem}
.dcm-contents ol{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.75rem;counter-reset:dcm-c;
}
.dcm-contents ol li{
  counter-increment:dcm-c;margin:0;
  display:grid;grid-template-columns:2.1rem 1fr;
  align-items:baseline;color:var(--on-paper);line-height:1.5;
}
.dcm-contents ol li::before{
  content:counter(dcm-c,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--brass);
}


/* ---------- the wall ------------------------------------------------------
   No gradient fade. The article above is complete, so there is
   no truncated text underneath for a fade to imply. A hard edge into ink is
   the same contrast move .band--ink already makes, and it is honest.        */

.dcm-wall{
  max-width:40rem;margin:2.4rem auto 0;
  background:var(--ink);color:var(--on-ink);
  border-radius:2px;overflow:hidden;
}

/* Patch panel. One line lit, the rest dark — the Switchboard motif from the
   hero, doing duty here as "you are not patched through to this one yet". */
.dcm-wall__panel{display:block;width:100%;height:26px;background:var(--ink-0)}
.dcm-wall__socket{fill:none;stroke:var(--slate);stroke-width:1.2;opacity:.34}
.dcm-wall__halo{fill:var(--brass);opacity:.16}
.dcm-wall__disc{fill:var(--brass)}
.dcm-wall__core{fill:var(--ink)}

.dcm-wall__inner{padding:1.9rem clamp(1.2rem,4vw,2rem) 2rem}
.dcm-wall .eyebrow{margin-bottom:.8rem;color:var(--brass-2)}
.dcm-wall__title{
  color:var(--on-ink);font-family:"Spectral",Georgia,serif;font-weight:560;
  font-size:clamp(1.4rem,1.15rem + 1vw,1.8rem);line-height:1.14;
  letter-spacing:-.015em;max-width:20ch;margin:0 0 .8rem;
}
.dcm-wall__sub{color:var(--on-ink-dim);font-size:1rem;max-width:46ch;margin:0 0 1.5rem}
.dcm-wall__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.3rem}
.dcm-wall__note{
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
  margin:0;padding-top:1.1rem;border-top:1px solid var(--line-dark);
}
.dcm-wall__note a{color:var(--brass-2);text-decoration:none;border-bottom:1px solid rgba(216,166,92,.4)}
.dcm-wall__note a:hover{border-bottom-color:var(--brass-2)}


/* ---------- subscriber login in the header --------------------------------
   Brass so the paid tier is visible on every page, but weighted the same as
   the other nav links so it does not shout.                                 */

.nav__links a.nav__sub{color:var(--brass)}
.nav__links a.nav__sub:hover{color:var(--brass-2)}


/* ---------- editor ---------------------------------------------------------
   The wall is appended at render time, so it is not visible while editing.
   This note stands in for it inside the editor canvas only.                 */

.editor-styles-wrapper .dcm-contents::after{
  content:"The subscriber wall is added automatically below this point.";
  display:block;margin-top:1.4rem;padding-top:1rem;
  border-top:1px dashed var(--line-light);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
}


/* =========================================================================
   SUBSCRIBE LANDING PAGE                                            v1.4.1

   Most of this page is built from components that already exist in
   theme.css — .band, .eyebrow, .band-title, .lede, .btn, .hero__cta,
   .hero__meta, .reach__grid, .reach__item, .steps, .step, .how__time, and
   the whole .enquire / .form / .field Contact Form 7 treatment.

   Only the five things below are genuinely new.
   ========================================================================= */

/* Brass emphasis in section headings. Mirrors the existing .hero__title em
   rule; nothing currently on the site puts <em> in a .band-title, so this
   only ever fires where it is asked for. */
.band-title em{font-style:normal;color:var(--brass)}
.band--ink .band-title em{color:var(--brass-2)}


/* ---------- 1. hero -------------------------------------------------------
   .hero is a two-column grid built around the patch-panel artwork. This page
   has no artwork by design — the argument is the hero — so it needs a
   single-column variant rather than an empty second column.                 */

.sub-hero{padding-block:clamp(64px,9vw,116px)}
.sub-hero__title{
  font-size:clamp(2.3rem,1.6rem + 3.2vw,3.9rem);line-height:1.04;
  max-width:16ch;margin:0 0 1.3rem;color:var(--on-ink);
}
.sub-hero__title em{font-style:normal;color:var(--brass)}
.sub-hero__sub{
  color:var(--on-ink-dim);font-size:clamp(1.05rem,1rem + .4vw,1.22rem);
  max-width:52ch;margin:0 0 2rem;
}


/* ---------- 2. the free / subscriber split --------------------------------
   A ledger rather than two pricing cards. The rule between the columns turns
   brass on the paid side, which is the only decoration in the section.      */

.split{display:grid;grid-template-columns:1fr;gap:2.4rem;margin-top:2.8rem}
@media(min-width:820px){
  .split{grid-template-columns:1fr 1fr;gap:0}
  .split__col:first-child{padding-right:3rem}
  .split__col + .split__col{border-left:1px solid var(--brass);padding-left:3rem}
}
.split__lbl{
  display:block;margin-bottom:.4rem;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);
}
.split__col--paid .split__lbl{color:var(--brass)}
.split h3{font-size:1.45rem;margin:0 0 1.3rem;max-width:20ch}
.split ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.split li{
  display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;
  align-items:baseline;color:var(--on-paper);line-height:1.5;
}
.split li::before{
  content:"";width:6px;height:6px;border-radius:1px;margin-top:.55rem;
  background:var(--slate);opacity:.5;
}
.split__col--paid li::before{background:var(--brass);opacity:1}
.split__foot{
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line-light);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);
}
.split__col--paid .split__foot{color:var(--brass)}


/* ---------- 3. the worked example -----------------------------------------
   A real subscriber article shown whole. Reuses .dcm-badge and .dcm-contents
   from the paywall itself, so what a reader sees here is what they get.     */

.demo{
  max-width:44rem;margin:2.6rem auto 0;background:var(--paper-2);
  border:1px solid var(--line-light);padding:clamp(1.4rem,4vw,2.4rem);
}
.band--paper2 .demo{background:var(--paper)}
.demo__kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;margin-bottom:.7rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.demo__kicker a{color:var(--brass);text-decoration:none}
.demo__kicker .demo__date{color:var(--slate)}
.demo h3{font-size:clamp(1.4rem,1.2rem + 1vw,1.8rem);line-height:1.14;margin:0 0 1.1rem;max-width:26ch}
.demo__standfirst{
  font-size:1.08rem;line-height:1.6;color:var(--on-paper);
  border-left:3px solid var(--brass);padding-left:1.1rem;margin:0 0 1.2rem;
}
.demo__free{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);margin:0 0 1.6rem;
}
.demo .dcm-contents{margin-top:0}
.demo__note{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-light);
  color:var(--on-paper-dim);font-size:.95rem;
}


/* ---------- 4. coverage tags ---------------------------------------------- */

.sub-tags{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:2.8rem;padding-top:1.8rem;border-top:1px solid var(--line-dark);
}
.sub-tags span{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-dim);
  border:1px solid var(--line-dark);padding:.35rem .7rem;border-radius:3px;
}


/* ---------- 5. independence ----------------------------------------------- */

.indep{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start}
@media(min-width:860px){.indep{grid-template-columns:1fr 1.15fr;gap:3rem}}
.indep__title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);max-width:16ch}
.indep__body p{color:var(--on-paper-dim);margin-bottom:1rem;max-width:56ch}
.indep__body p:last-child{margin-bottom:0}
.indep__body a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(193,139,67,.4)}
.indep__body a:hover{border-bottom-color:var(--brass)}


/* ---------- markets checkbox row in the request form ----------------------
   CF7 renders a checkbox group as .wpcf7-checkbox. The radio-pill treatment
   already in theme.css is the right look here; this applies it to checkboxes
   too rather than restating it.                                             */

.enquire .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.15rem}
.enquire .wpcf7-checkbox .wpcf7-list-item{margin:0}
.enquire .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"]{
  position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0;border:0;
}
.enquire .wpcf7-checkbox .wpcf7-list-item label{
  display:inline-flex;align-items:center;margin:0;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:999px;padding:.52rem 1.05rem;
  font-family:"Source Sans 3",sans-serif;font-size:.92rem;font-weight:500;
  letter-spacing:.01em;text-transform:none;color:var(--on-ink-dim);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.enquire .wpcf7-checkbox .wpcf7-list-item label:hover{color:var(--on-ink);border-color:var(--slate)}
.enquire .wpcf7-checkbox .wpcf7-list-item label:has(input:checked){
  background:var(--brass);color:#1A130A;border-color:var(--brass);
}
.enquire .wpcf7-checkbox .wpcf7-list-item label:has(input:focus-visible){
  outline:2px solid var(--brass-2);outline-offset:3px;
}


/* =========================================================================
   SUBSCRIBER ACCESS                                                 v1.5.0

   Everything below exists because readers can now sign in. The wall itself
   is unchanged; it gains a variant. The paid body gets a wrapper. The
   header gets a second link. The account page and wp-login.php get styles
   (the latter in login.css, since wp-login.php loads nothing of the theme).
   ========================================================================= */

/* ---------- the paid body ------------------------------------------------
   Appended inside .article__body after the article, so paragraphs, headings,
   lists and tables inherit the article styles. The only decoration is the
   brass rule and a mark, the mirror image of the wall: same place, opposite
   answer.                                                                   */

.article__body .dcm-body,
.dcm-body{
  margin-top:2.4rem;padding-top:1.6rem;
  border-top:2px solid var(--brass);
}
.dcm-body__mark.eyebrow{margin-bottom:1.4rem}
.dcm-body > :last-child{margin-bottom:0}

/* .dcm-body--pending was the "not published yet" note. Removed in v1.6.0:
   a flagged post with nothing written now renders as a free article, so
   there is nothing to apologise for and nothing to style. */

/* The old "In the full article" list, for posts written before v1.6.0 that
   still carry the pattern in their body. An entitled reader has the section
   itself directly below, so the list is redundant for them — this was
   commented out when it was a judgement call and is now simply correct.
   When you revise an old post, delete the pattern from the body and move
   the lines into the wall's Points field instead. */
.dcm-entitled .dcm-contents{display:none}


/* ---------- lapsed wall --------------------------------------------------
   Same panel, different message. The patch panel graphic is dropped: the
   reader was patched through once, and the honest picture is the plain one. */

.dcm-wall--lapsed .dcm-wall__note{text-transform:none;letter-spacing:.02em;font-size:.8rem}
.dcm-wall--lapsed .dcm-wall__note a{margin-left:.15rem}


/* ---------- sign in / account in the header ------------------------------
   Subscribe stays brass. Sign in is weighted like the other nav links so
   the pair reads as "the paid tier, and the door to it".                    */

.nav__links a.nav__signin{color:var(--on-ink-dim)}
.nav__links a.nav__signin:hover{color:var(--on-ink)}


/* ---------- account page -------------------------------------------------
   /account/ uses the "No title (full width)" template; the Account pattern
   supplies the band and wrap. This is the card inside.                     */

.account{max-width:40rem;margin-inline:auto}
.account__title{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);line-height:1.06;
  margin:0 0 1.8rem;color:var(--on-paper);
}
.account__facts{
  margin:0 0 2rem;padding:0;
  border-top:1px solid var(--line-light);
}
.account__facts > div{
  display:grid;grid-template-columns:8rem 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-light);
}
.account__facts dt{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:0;padding-top:.2rem;
}
.account__facts dd{margin:0;color:var(--on-paper)}
.account__access--active,.account__access--expiring{color:var(--on-paper);font-weight:600}
.account__access--expiring::after,
.account__access--lapsed::after{
  content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  margin-left:.55rem;vertical-align:middle;background:var(--brass);
}
.account__access--lapsed::after{background:#D98A6A}
.account__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.6rem}
.account__actions .btn--ghost{color:var(--on-paper);border-color:var(--line-light)}
.account__actions .btn--ghost:hover{border-color:var(--brass);color:var(--brass)}
.account__note{color:var(--on-paper-dim);font-size:.95rem;max-width:52ch}
.account__note a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(193,139,67,.4)}
.account__note a:hover{border-bottom-color:var(--brass)}
@media(max-width:560px){
  .account__facts > div{grid-template-columns:1fr;gap:.3rem}
}


/* =========================================================================
   MOBILE                                                            v1.5.2

   Everything below is a fix for something that only shows up on a phone.
   Kept together at the end of the file rather than scattered, so the next
   person auditing narrow screens has one place to look.
   ========================================================================= */

/* ---------- header: three links where there used to be two ----------------
   v1.5 added "Sign in" beside "Subscribe". At 600px the theme already
   tightens the nav to keep the brand and links on one row; with a third
   item that row overflows on the narrowest phones. Tighten further, and
   stop link text breaking mid-word when it is squeezed.                    */

@media(max-width:600px){
  .nav__links{gap:.9rem}
  .nav__links a{font-size:.8rem;white-space:nowrap}
  .nav__inner .brand{min-width:0;flex:0 1 auto}
  .nav__brandimg{max-width:100%}
}

@media(max-width:390px){
  /* Below ~390px the wordmark plus three links will not fit, and something
     has to give. The subscriber pair wins: Newsletter has its own page, is
     in the footer, and the Markets bar immediately below is the real
     navigation. To keep Newsletter and drop Sign in instead, replace this
     rule with   .nav__links a.nav__signin{display:none} */
  .nav__links a:not(.nav__sub):not(.nav__signin){display:none}
}


/* ---------- the lapsed wall ----------------------------------------------
   The note carries the reader's own email address, and work addresses at
   banks and law firms are long. Left alone it pushes the ink panel wider
   than the screen.                                                         */

.dcm-wall--lapsed .dcm-wall__note{overflow-wrap:anywhere}
.dcm-wall--lapsed .dcm-wall__note a{white-space:nowrap}

@media(max-width:480px){
  .dcm-wall__cta .btn{width:100%}
  .dcm-wall__title{max-width:none}
}


/* ---------- account page --------------------------------------------------
   Three buttons side by side do not fit, and "Talk to us about a
   subscription" is a long label. Stack them full width, which is both the
   phone convention and a bigger tap target.                                */

@media(max-width:520px){
  .account__actions{flex-direction:column;align-items:stretch;gap:.6rem}
  .account__actions .btn{width:100%}
}


/* ---------- tables inside a paid body -------------------------------------
   This is the one that matters. Subscriber bodies are where the tranche
   detail and the numbers live, and PAYWALL.md tells the writer to use real
   HTML tables. A five-column table with no handling blows the page width
   out on a phone and puts the WHOLE article into horizontal scroll.

   The figure scrolls instead of the document, and min-width keeps columns
   legible rather than letting the browser crush them to one word per line.
   The theme has no article table styling at all — teasers never needed
   any — so the presentation is set here too.                               */

.dcm-body{overflow-wrap:break-word}

.dcm-body figure.wp-block-table,
.dcm-body .wp-block-table{
  margin:1.8rem 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.dcm-body table{
  width:100%;min-width:30rem;
  border-collapse:collapse;
  font-size:.94rem;line-height:1.45;
  font-variant-numeric:tabular-nums;
}
.dcm-body thead th{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--slate);
  text-align:left;padding:0 .8rem .55rem;
  border-bottom:2px solid var(--brass);
}
.dcm-body td,.dcm-body tbody th{
  padding:.6rem .8rem;
  border-bottom:1px solid var(--line-light);
  text-align:left;vertical-align:top;
}
.dcm-body tbody tr:last-child td,
.dcm-body tbody tr:last-child th{border-bottom:0}
.dcm-body figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.04em;color:var(--slate);margin-top:.6rem;
}

/* Long unbroken strings — ISINs, tickers, deal codes — are common here and
   would otherwise set the minimum width of the whole table. */
.dcm-body td,.dcm-body th{overflow-wrap:break-word}


/* =========================================================================
   THE WALL'S PITCH                                                  v1.6.0

   The wall stopped being a barrier and became an offer. The reader has just
   finished a complete article; this panel says there is a further section
   and, when the fields are filled in, exactly what is in it.

   Deliberately restrained: it sits at the end of a real article, so it has
   to read as a footnote to the piece rather than an advertisement stapled
   to it.
   ========================================================================= */

.dcm-wall__points{
  margin:0 0 1.5rem;padding:1.1rem 0 0;
  border-top:1px solid var(--line-dark);
  max-width:52ch;
}
.dcm-wall__points-label{margin:0 0 .7rem;color:var(--brass-2)}
.dcm-wall__points ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.55rem;
}
.dcm-wall__points li{
  position:relative;padding-left:1.4rem;
  color:var(--on-ink);font-size:.97rem;line-height:1.45;
}
.dcm-wall__points li::before{
  content:"";position:absolute;left:.25rem;top:.62em;
  width:5px;height:5px;border-radius:1px;background:var(--brass);
}

/* With a hook set, the title carries the specific promise and the generic
   sub-line is suppressed — so the title takes a little more room to breathe
   and drops the 20ch clamp that suits a short generic line. */
.dcm-wall__title{max-width:26ch}

@media(max-width:480px){
  .dcm-wall__points{padding-top:.9rem;margin-bottom:1.2rem}
  .dcm-wall__points li{font-size:.94rem}
}