/* Signal docs shell: the top bar, sidebar, page header, pager and the few docs-only blocks (cards,
   do/don't, code). Everything else on a page is the CSS system's own ct- classes. */
.sd{--sd-top:60px;--sd-nav:264px;--sd-max:1040px;margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.5}
.sd *{box-sizing:border-box}
.sd-body a:not([class]),.sd-foot a{color:var(--accent)}
.sd-skip{position:fixed;left:var(--space-8);top:-80px;z-index:30}
.sd-skip:focus{top:var(--space-8)}

/* Top bar */
.sd-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-12);height:var(--sd-top);padding:0 var(--space-16);background:var(--paper);border-bottom:1px solid var(--line)}
.sd-brand{display:flex;align-items:center;gap:var(--space-10);color:var(--ink);text-decoration:none;font-weight:var(--weight-heavy);font-size:var(--fs-title);letter-spacing:-.01em}
.sd-mark{height:30px;width:auto}
.sd-mark-dark,:root[data-theme="dark"] .sd-mark-light{display:none}
:root[data-theme="dark"] .sd-mark-dark{display:inline}
.sd-search{position:relative;flex:1 1 auto;max-width:360px;margin-left:auto}
.sd-q{width:100%}
.sd-results[hidden]{display:none}
.sd-results{position:absolute;top:calc(100% + var(--space-6));left:0;right:0;max-height:min(70vh,480px);overflow:auto;padding:var(--space-6);background:var(--paper);box-shadow:var(--shadow-sheet);z-index:25}
.sd-results a{display:block;padding:var(--space-8) var(--space-10);border-radius:var(--radius-segment);color:var(--ink);text-decoration:none}
.sd-results a:hover,.sd-results a[aria-selected="true"]{background:var(--card)}
.sd-results small{display:block;color:var(--muted);font-size:var(--fs-cap)}
.sd-results p{margin:var(--space-8);color:var(--muted)}
.sd-menu{display:none}
.sd-menu svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Sidebar + main */
.sd-shell{display:grid;grid-template-columns:var(--sd-nav) minmax(0,1fr)}
.sd-nav{position:sticky;top:var(--sd-top);align-self:start;height:calc(100vh - var(--sd-top));overflow-y:auto;padding:var(--space-16) var(--space-12) var(--space-40);border-right:1px solid var(--line)}
.sd-nav h2{margin:var(--space-16) var(--space-8) var(--space-4);font-size:var(--fs-cap);font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sd-nav h3{margin:var(--space-10) var(--space-8) var(--space-2);font-size:var(--fs-cap);font-weight:var(--weight-semibold);color:var(--muted)}
.sd-nav ul{list-style:none;margin:0;padding:0}
.sd-nav a{display:block;padding:var(--space-4) var(--space-8);border-radius:var(--radius-segment);color:var(--ink);text-decoration:none;font-size:var(--fs-sub)}
.sd-nav a:hover{background:var(--card)}
.sd-nav a[aria-current="page"]{background:var(--accent-tint);color:var(--accent);font-weight:var(--weight-semibold)}
.sd-main{min-width:0;max-width:var(--sd-max);padding:var(--space-32) var(--space-40) var(--space-40)}

/* Page */
.sd-page-head{padding-bottom:var(--space-20);margin-bottom:var(--space-8);border-bottom:1px solid var(--line)}
.sd-eyebrow{margin:0;color:var(--accent);font-size:var(--fs-cap);font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase}
.sd-page-head h1{margin:var(--space-4) 0 0;font-size:var(--fs-display);font-weight:var(--weight-heavy);letter-spacing:-.02em;line-height:1.1}
.sd-lede{margin:var(--space-8) 0 0;color:var(--muted);max-width:68ch}
.sd-body>h2,.sd-body .sd-h2{margin:var(--space-40) 0 var(--space-8);font-size:var(--fs-title);font-weight:var(--weight-heavy);scroll-margin-top:calc(var(--sd-top) + var(--space-16))}
.sd-body>h3{margin:var(--space-24) 0 var(--space-6);font-size:var(--fs-body)}
.sd-body>p,.sd-body>ul,.sd-body>ol{max-width:72ch}
.sd-body [id]{scroll-margin-top:calc(var(--sd-top) + var(--space-16))}
.sd-body code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:.86em}
.sd-body>p code,.sd-body li code,.sd-body td code{padding:1px var(--space-4);border-radius:var(--radius-chip);background:var(--card)}
.sd-note{color:var(--muted);font-size:var(--fs-sub)}
.sd-body .ct-table-wrap{margin:var(--space-12) 0}
.sd-code{margin:var(--space-12) 0;padding:var(--space-14) var(--space-16);overflow-x:auto;border-radius:var(--radius-segment);background:var(--card);font-size:var(--fs-sub);line-height:1.55}
.sd-code code{padding:0;background:none;white-space:pre}

/* Docs blocks */
.sd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-12);margin:var(--space-16) 0}
.sd-card{display:flex;flex-direction:column;gap:var(--space-4);color:var(--ink);text-decoration:none}
.sd-card:hover{outline:2px solid var(--accent)}
.sd-card span{color:var(--muted);font-size:var(--fs-sub)}
.sd-dodont{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
.sd-dodont>.ct-card{align-content:start}
.sd-dodont h3{display:flex;align-items:center;gap:var(--space-6);margin:0 0 var(--space-4);font-size:var(--fs-body)}
.sd-dodont ul{margin:0;padding-left:var(--space-20)}
/* The label carries the status: a filled circle with a check (Do) or a cross (Don't), the glyph
   cut out of the circle so it shows the card behind it. Only the label is coloured. */
.sd-dodont h3::before{content:"";flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--sd-glyph) center/contain no-repeat;mask:var(--sd-glyph) center/contain no-repeat}
.sd-do h3{color:var(--good);--sd-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M4.6 8.3l2.3 2.3 4.6-4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' mask='url(%23m)'/%3E%3C/svg%3E")}
.sd-dont h3{color:var(--alert);--sd-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M5.5 5.5l5 5m0-5l-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' mask='url(%23m)'/%3E%3C/svg%3E")}
.sd-hero{padding:var(--space-24) 0 var(--space-8)}
.sd-lockup{margin:0}
.sd-lockup img{width:min(420px,100%);height:auto}
.sd-hero-lede{font-size:var(--fs-title);line-height:1.4;max-width:60ch}
.sd-layers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12);counter-reset:layer}
.sd-layers li{display:flex;flex-direction:column;gap:var(--space-6);counter-increment:layer}
.sd-layers b::before{content:counter(layer) ". ";color:var(--accent)}
.sd-layers span{color:var(--muted);font-size:var(--fs-sub);flex:1}
.sd-principles{padding-left:var(--space-20)}
.sd-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-12)}
.sd-shot{margin:0}
.sd-shot img{display:block;width:100%;height:auto;border-radius:var(--radius-segment)}
.sd-shot figcaption{margin-top:var(--space-6);font-size:var(--fs-cap);overflow-wrap:anywhere}
.sd-glyph{width:var(--size-control-glyph);height:var(--size-control-glyph);fill:currentColor}
.sd-util-demo,.sd-theme-demo,.sd-icon-row{margin:var(--space-12) 0}
.sd-gallery{margin-top:var(--space-12)}
.sd .legacy{background:none}

/* Pager + footer */
.sd-pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);margin-top:var(--space-40)}
.sd-pager a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.sd-pager a[rel="next"]{grid-column:2;text-align:right}
.sd-pager small{color:var(--muted)}
.sd-foot{margin-top:var(--space-24);color:var(--muted);font-size:var(--fs-cap)}

/* Phones and small tablets: the sidebar becomes a drawer behind the menu button. */
@media (max-width:900px){
  .sd-menu{display:inline-flex}
  .sd-shell{grid-template-columns:minmax(0,1fr)}
  .sd-nav{position:fixed;top:var(--sd-top);left:0;bottom:0;z-index:15;width:min(var(--sd-nav),85vw);height:auto;background:var(--paper);box-shadow:var(--shadow-sheet);transform:translateX(-105%);transition:transform var(--motion-page-duration) ease}
  .sd-nav.is-open{transform:none}
  .sd-main{padding:var(--space-20) var(--space-16) var(--space-32)}
  .sd-layers,.sd-dodont{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sd-top{gap:var(--space-8);padding:0 var(--space-8)}
  .sd-brand span{display:none}
  .sd-theme button{padding-inline:var(--space-6)}
  .sd-search{max-width:none}
}
@media (prefers-reduced-motion:reduce){.sd-nav{transition:none}}
.sd-sprite{position:absolute}