/* Article pages (condos, undivided, mortgages, the market update), 2026-10-06.
   Pascal: these should look like the newest pages, and have the scrolling index the
   guides have on a computer. Same language as the guides' intro (guide-intro26.css):
   - the short version: the lead card, Cinzel plum heading, check marks
   - the contents: numbered rows on the soft amethyst tint
   - a section index that follows the reader: a column on the left on a wide screen,
     a slim bar that opens on a narrow one (page26.js builds both from the contents).
   Loaded after pwc-ui.css. */

/* ---- the short version ---- */
html body .tldr{background:#fff !important;border:1px solid #EAE2F0 !important;border-radius:26px !important;
  padding:34px clamp(20px,4vw,40px) 30px !important;margin-top:30px !important;
  box-shadow:0 26px 54px -38px rgba(51,32,74,.45) !important;position:relative;overflow:hidden}
html body .tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#563B79}
html body .tldr h2{font-family:'Cinzel',Georgia,serif !important;font-size:clamp(24px,3.2vw,30px) !important;
  font-weight:600 !important;letter-spacing:.03em !important;text-transform:none !important;color:#43285A !important;
  margin:0 0 18px !important;line-height:1.15}
html body .tldr ul{list-style:none !important;padding:0 !important;margin:0 !important}
html body .tldr li{position:relative;padding:12px 0 12px 42px !important;margin:0 !important;
  border-top:1px solid #F0EAF5;font-size:16.5px !important;line-height:1.6 !important}
html body .tldr li:first-child{border-top:0}
html body .tldr li::before{content:"";position:absolute;left:0;top:15px;width:26px;height:26px;border-radius:50%;
  background:#F1EAF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23563B79' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---- the contents ---- */
html body .toc{background:#F3EEF8 !important;border:1px solid #E4DAF0 !important;border-radius:26px !important;
  padding:30px clamp(20px,4vw,40px) 26px !important;margin-top:22px !important;box-shadow:none !important}
html body .toc h2{font-family:'Cinzel',Georgia,serif !important;font-size:clamp(20px,2.6vw,24px) !important;
  font-weight:600 !important;letter-spacing:.03em !important;text-transform:none !important;color:#43285A !important;margin:0 0 16px !important}
html body .toc ol{columns:auto !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;padding:0 !important;margin:0 !important;list-style:none !important;counter-reset:toc}
html body .toc ol:not(.en):not(.fr){display:grid !important}
html body:not(.fr) .toc ol.fr,html body.fr .toc ol.en{display:none !important}
html body .toc li{counter-increment:toc;margin:0 !important;border-bottom:1px solid #E4DAF0}
html body .toc li a{display:flex !important;align-items:center;gap:14px;padding:11px 2px !important;font-size:16px !important;
  color:#43285A !important;font-weight:500 !important;text-decoration:none !important;background:none !important}
html body .toc li a::before{content:counter(toc);flex:none;width:30px;height:30px;border-radius:50%;background:#fff;
  border:1px solid #DCCFE8;color:#563B79;font:600 13px/28px 'Jost',sans-serif;text-align:center}
html body .toc li a:hover{color:#7E3A8C !important;text-decoration:none !important}
html body .toc li a:hover::before{background:#33204A;border-color:#33204A;color:#fff}
@media (max-width:640px){html body .toc ol{grid-template-columns:1fr}}

/* ---- the section index: a column on a wide screen ---- */
.rail26{position:fixed;top:50%;transform:translateY(-50%);width:212px;z-index:40;display:none;max-height:76vh;overflow-y:auto;
  scrollbar-width:thin}
html.rail26-on .rail26{display:block}
.rail26 .rh{font:600 11.5px/1.2 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#563B79;margin:0 0 10px 8px}
.rail26 ol{list-style:none;margin:0;padding:0}
.rail26 a{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border-radius:10px;font:500 13.5px/1.35 'Jost',sans-serif;
  color:#6E657E;text-decoration:none;transition:color .15s,background .15s}
.rail26 a .rn{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid #DCCFE8;background:#fff;color:#563B79;
  font:600 11.5px/20px 'Jost',sans-serif;text-align:center}
.rail26 a:hover{color:#43285A;background:rgba(231,221,240,.55)}
.rail26 a[aria-current="true"]{color:#43285A;font-weight:600;background:#EFE6F7}
.rail26 a[aria-current="true"] .rn{background:#33204A;border-color:#33204A;color:#fff}

/* ---- and a slim bar on a narrow one ---- */
.railbar26{position:sticky;z-index:45;margin:18px 0 0;background:rgba(246,241,233,.96);backdrop-filter:blur(8px);
  border:1px solid #E4DAF0;border-radius:16px;padding:4px 14px;display:none}
html.rail26-bar .railbar26{display:block}
.railbar26 button{all:unset;display:flex;width:100%;align-items:center;gap:10px;cursor:pointer;min-height:44px;
  font:600 14px 'Jost',sans-serif;color:#43285A}
.railbar26 .rbn{flex:none;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#6E657E;font-weight:600}
.railbar26 .rbt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railbar26 .rbc{flex:none;color:#563B79;transition:transform .2s}
.railbar26[data-open="1"] .rbc{transform:rotate(180deg)}
.railbar26 ol{list-style:none;margin:4px 0 8px;padding:0;display:none;max-height:56vh;overflow-y:auto}
.railbar26[data-open="1"] ol{display:block}
.railbar26 ol a{display:flex;gap:10px;padding:9px 2px;text-decoration:none;font:500 14.5px 'Jost',sans-serif;color:#4c4658}
.railbar26 ol a[aria-current="true"]{color:#43285A;font-weight:600}
.railbar26 ol .rn{flex:none;width:20px;text-align:right;color:#6E657E}
html body .sec[id]{scroll-margin-top:96px}
@media print{.rail26,.railbar26{display:none !important}html body .tldr{box-shadow:none !important}}
