/* Monitech Site Width. One width for pages, posts, single listings and archives.
 * Specificity: html:is(#mphw-a,html):is(#mphw-b,html) counts as two IDs, so these rules
 * win over layout-pack and studio rules (including the :is(html,#…-authority) ones)
 * without editing each of them. Loaded last, only when the body has .mphw-on. */

html{--mphw-max:1280px;--mphw-read:none}
html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-read-comfortable{--mphw-read:920px}

/* 1. Page shells: one shared width, centered. */
html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on :is(
  .monitech-content-shell,
  .ajzjp-shell,
  main.ajzjp-single,
  main.ajzjp-jobs-archive,
  .ajzjp-company-profile-layout-editorial,
  .ajzjp-company-profile-layout-minimal
){
  width:min(calc(100% - 32px),var(--mphw-max))!important;
  max-width:var(--mphw-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* 2. Inner columns: no narrow caps of their own; they fill the shell. */
html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on :is(
  .monitech-content-main,
  .monitech-signature-archive,
  .monitech-signature-archive-main,
  .monitech-post-entry,
  .monitech-entry-head,
  .monitech-entry-deck,
  .monitech-archive-head,
  .monitech-archive-description,
  .monitech-archive-editor-content,
  .monitech-archive-card-body,
  .monitech-archive-card h2,
  .monitech-archive-card p,
  .monitech-post-archive-list,
  .ajzjp-archive-head,
  .ajzjp-archive-head h1,
  .ajzjp-archive-head p,
  .ajzjp-archive-description,
  .ajzjp-archive-intro-content,
  .ajzjp-single-article,
  .ajzjp-single-reading,
  .ajzjp-details,
  .ajzjp-position-top,
  .ajzjp-studio-single-summary,
  .ajzjp-simple-hero-inner,
  .ajzjp-blog-article-search-inner,
  .ajzjp-list,
  .ajzjp-card p
){
  max-width:none!important;
}
/* Centered inner columns keep their auto margins; columns that were pushed in are reset. */
html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on :is(.monitech-content-main,.monitech-post-entry,.ajzjp-single-reading,.ajzjp-single-article){
  margin-left:auto!important;
  margin-right:auto!important;
  width:auto!important;
}

/* 3. Article text: full width by default, or a comfortable reading width (setting). */
html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on :is(.monitech-entry-content,.ajzjp-prose){
  max-width:var(--mphw-read)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* 4. Phones and small tablets: use the screen, keep one small margin (no double padding). */
@media (max-width:720px){
  html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on :is(
    .monitech-content-shell,
    .ajzjp-shell,
    main.ajzjp-single,
    main.ajzjp-jobs-archive,
    .ajzjp-company-profile-layout-editorial,
    .ajzjp-company-profile-layout-minimal
  ){
    width:calc(100% - 24px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on .monitech-content-main{
    padding-left:0!important;
    padding-right:0!important;
  }
  /* One small inner margin for post cards and listing articles (no stacked padding),
   * so text never touches a card border and never loses width to double padding. */
  html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on .monitech-post-entry{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on .monitech-post-entry .monitech-entry-content{
    padding-left:0!important;
    padding-right:0!important;
  }
  /* Single listings keep their own card padding (the reading card may be the bordered box). */
}

/* Long words and URLs wrap instead of cutting off or widening the page. */
html:is(#mphw-a,html):is(#mphw-b,html) body.mphw-on :is(.monitech-entry-content,.ajzjp-prose,.monitech-archive-card-body){
  overflow-wrap:break-word;
}