/* Shared workspace / reading chrome. Content length never chooses the page's grid widths. */
html { scrollbar-gutter: stable }
.public-navigation-progress { position: fixed; inset: 0 0 auto; height: .2rem; z-index: 100; background: var(--accent); pointer-events: none }
.public-navigation-progress[hidden], .public-reading[hidden] { display: none }
.public-navigation-progress span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.public-page a[data-navigation-pending] { text-decoration: underline; text-decoration-thickness: .12em }
.public-page { --site-max: 83.75rem; --site-gutter: 1.75rem; --site-gap: 2.75rem; --site-nav: 12.5rem; --site-aside: 12rem; margin: 0; min-width: 0; background: var(--panel); color: var(--ink); font: var(--t-prose)/var(--leading-prose) var(--sans); overflow-wrap: anywhere }
.public-page *, .public-page *::before, .public-page *::after { box-sizing: border-box }
.public-page :is(a, summary, button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.public-page a { color: var(--accent); text-underline-offset: .2em }
.public-page :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; text-transform: none }
.public-page h1 { margin:0 0 1rem; font:400 clamp(2.25rem, 4vw, 3.25rem)/1.15 Georgia, var(--sans); letter-spacing:-.05em }
.public-page h2 { margin: 28px 0 12px; font-size: var(--t-section); line-height: 1.3 }
.public-page h3 { margin: 28px 0 12px; font-size: var(--t-title); line-height: 1.4 }
.public-page p { max-width: 72ch }
.public-footer { width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 20px var(--site-gutter) }
/* Global destinations and account utilities; project setup lives in the workspace. */
.public-header { width: 100%; height: 65px; border-bottom: 1px solid var(--line); background: var(--panel) }
.public-header-inner { display: flex; align-items: center; gap: var(--site-gap); width: 100%; height: 100%; max-width: var(--site-max); margin: 0 auto; padding-inline: var(--site-gutter) }
.public-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 44px; width: var(--site-nav); font-size: 16px; font-weight: 600; letter-spacing: -.025em; text-decoration: none }
.public-brand .ms-mark { width: 24px; height: 24px }
.public-brand:hover { text-decoration: none }
.public-header-actions { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto }
.public-header-divider { height: 20px; width: 1px; margin-inline: 4px; background: var(--line) }
.public-nav-desktop { display: flex; align-items: center; gap: 20px; height: 100% }
.public-header nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; color: var(--ink-2); font-weight: 500 }
.public-nav-desktop a { height: 100%; padding: 0 2px; position: relative }
.public-header nav a:hover { color: var(--ink) }
.public-nav-desktop a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px var(--gold) }
.public-content-nav a:hover { background: var(--panel-2) }
.public-content-nav a[aria-current="page"] { background: var(--panel-2); color: var(--ink) }
.public-nav-mobile summary svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round }
.public-nav-mobile, .public-mobile-contents, .public-mobile-toc { display: none }
.public-page summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--ink); font-weight: 500 }
.public-skip { position: absolute; left: 16px; top: 0; transform: translateY(-120%); padding: 10px 14px; background: var(--panel); border: 1px solid var(--accent); z-index: 30 }
.public-skip:focus { transform: none }
.public-reading, .workspace-layout { width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 2.75rem var(--site-gutter) 4rem; column-gap: var(--site-gap) }
/* Every destination reserves the same rails, including indexes without page contents. */
.public-reading { display: grid; grid-template-columns: var(--site-nav) minmax(0, 1fr) var(--site-aside) }
.public-reading > *, .public-prose { min-width: 0 }
.public-article { grid-column: 2; width: 100%; min-width: 0 }
.public-sidebar { grid-column: 1; grid-row: 1 }
.public-toc-desktop { grid-column: 3; grid-row: 1 }
.public-article-header { margin: .5rem 0 2.5rem }
.public-lede { margin: 0; color: var(--ink-2); max-width: 62ch }
.public-prose p { margin: 0 0 18px }
.public-prose :is(h2, h3, h4, h5, h6) { scroll-margin-top: 20px }
.public-prose :is(ul, ol) { padding-left: 20px; margin: 0 0 20px }
.public-prose li { margin: 6px 0 }
.public-prose code { font: 400 var(--t-code)/var(--leading-prose) var(--mono); background: var(--panel-2); border-radius: 4px; padding: 2px 4px }
.public-prose pre { max-width: 100%; margin: 20px 0; padding: 16px; overflow-x: auto; background: var(--panel-2); border: 0; border-radius: .625rem; white-space: pre; overflow-wrap: normal }
.public-prose pre code { padding: 0; background: none }
.public-content-nav p, .public-toc-desktop > p { margin: 14px 0 6px; color: var(--ink-2); font: 600 var(--t-body-2)/1.5 var(--sans); letter-spacing: normal; text-transform: none }
.public-content-nav ul, .public-toc ol { list-style: none; padding: 0; margin: 0 }
.public-content-nav a, .public-toc a { display: block; padding: 10px; min-height: 44px; text-decoration: none; border-radius: 8px }
.public-toc { font-size: var(--t-body-2) }
.public-entry-list { list-style: none; padding: 0 !important }
.public-entry-list li { border-bottom: 1px solid var(--line); padding: 14px 0 }
.public-entry-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600 }
.public-entry-list p { color: var(--ink-2) }
.public-home { max-width: var(--site-max); margin: 0 auto; padding: 28px var(--site-gutter) }
.public-hero { max-width: 68ch; padding: 28px 0 }
.public-hero h1 { font-size: var(--t-hero); max-width: 22ch }
.public-primary { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 10px 18px; border-radius: 8px; background: var(--accent); color: var(--panel) !important; text-decoration: none }
.public-primary:hover { filter: brightness(.92) }
.public-home-intro { max-width: 72ch; padding: 20px 0 28px }
.public-home-intro ol { padding-left: 20px }
.public-home-intro li { padding: 6px 0 }
.public-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; border-top: 0; color: var(--ink-2) }
.public-footer p { margin: 0 }
.public-footer a { display: inline-flex; min-height: 44px; align-items: center }
@media (max-width: 76rem) {
  .public-reading { grid-template-columns: var(--site-nav) minmax(0, 1fr) }
  .public-toc-desktop { display: none }
  .public-mobile-toc { display: block; border-block: 1px solid var(--line); margin-bottom: 20px }
}
@media (max-width: 64rem) {
  .public-page { --site-nav: 192px }
}
@media (max-width: 60rem) {
  .public-header-inner { gap: 12px }
  .public-brand { width: auto }
  .public-nav-desktop, .public-header-divider { display: none }
  .public-nav-mobile { position: relative; display: block }
  .public-header-actions { gap: 4px }
  .public-nav-mobile summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 7px; list-style: none }
  .public-nav-mobile summary::-webkit-details-marker { display: none }
  .public-nav-mobile summary:hover, .public-nav-mobile[open] summary { background: var(--panel-2) }
  .public-nav-mobile summary svg { width: 20px; height: 20px }
  .public-nav-mobile nav { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; display: flex; flex-direction: column; align-items: stretch; width: 220px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow) }
  .public-nav-mobile nav a { padding: 10px 12px; border-radius: 6px }
  .public-nav-mobile nav a[aria-current="page"] { background: var(--panel-2); color: var(--ink) }
}
@media (max-width: 48rem) {
  .public-page { --site-gutter: 1.125rem }
  .public-footer, .public-home, .public-reading, .workspace-layout { padding-block: 16px }
  .public-sidebar { display: none }
  .public-reading { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .public-article { grid-column: 1 }
  .public-mobile-contents { display: block; border-bottom: 1px solid var(--line); margin-bottom: 20px }
  .public-mobile-contents > summary { font-size: var(--t-body) }
  .public-article-header { margin-top: 0 }
  .public-hero h1 { font-size: var(--t-hero-mobile) }
  .public-hero { padding: 20px 0 }
}

.public-prose:lang(ko), .public-prose :lang(ko), .public-lede:lang(ko) { line-height:var(--leading-ko) }
.public-prose strong { font-weight:600 }
.public-header, .public-footer, .public-content-nav { font-size:var(--t-body) }

/* Account utilities share the same restrained controls as appearance and mobile navigation. */
.public-account { position: relative; flex: none }
.public-header .public-account > summary { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 7px; list-style: none; cursor: pointer }
.public-account > summary::-webkit-details-marker { display: none }
.public-account > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.public-account > summary:hover, .public-account[open] > summary { background: var(--panel-2) }
.public-account-panel { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: min(272px, calc(100vw - 32px)); max-height: calc(100dvh - 85px); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow) }
.public-account-identity { display: grid; gap: 4px; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere }
.public-account-identity strong { font-size: var(--t-body); font-weight: 600 }
.public-account-identity span { font-size: var(--t-body-2); color: var(--ink-2) }
.public-account-panel nav { display: grid; padding-top: 6px }
.public-header .public-account-panel nav a { padding: 10px 12px; border-radius: 6px }
.public-account-panel nav a:hover { background: var(--panel-2) }
.public-account-panel [hidden] { display: none }
.public-account-session { border-top: 1px solid var(--line); margin-top: 6px }
@media (max-width: 24rem) {
  .public-brand > span { display: none }
  .public-account-panel { right: -48px }
  .public-nav-mobile nav { right: -96px }
}

/* Shelf chrome is shared by every non-canvas destination. */
.public-page .public-header { height:4rem; border:0; background:var(--panel) }
.public-page[data-section="home"] .public-header { box-shadow:inset 0 -.0625rem 0 var(--line) }
.public-page .public-header-inner { max-width:var(--site-max); padding-inline:var(--site-gutter); gap:1.75rem }
.public-page .public-brand { width:auto; flex:none; margin:0; font-size:1.125rem; font-weight:750; letter-spacing:-.055em; gap:.5rem }
.public-page .public-brand .ms-mark { width:1.5rem; height:1.5rem }
.public-page .public-header-actions { gap:.125rem }
.public-page .public-header-divider,.public-page .wb-alerts-btn > span { display:none }
.public-page .public-header .wb-alerts-btn { border-color:transparent; background:transparent; box-shadow:none }
.desk-projects { position:relative; display:flex; align-items:center; flex:1; min-width:0; gap:.375rem }
.desk-projects [data-home-projects] { display:flex; flex-wrap:wrap; gap:.25rem; min-width:0 }
.desk-projects .hm-item { flex:none; margin:0; padding:.625rem .875rem; min-height:2.75rem; border:0; border-radius:.5rem; white-space:nowrap; color:var(--ink-2); background:transparent }
.desk-projects .hm-item[aria-current],.desk-projects .hm-item:hover { background:var(--panel-2); color:var(--ink); box-shadow:none }
.desk-projects .hm-item .hm-dot,.desk-projects .hm-text > span { display:none }
.desk-projects .hm-text b { font:500 var(--t-body-2)/1.5 var(--sans) }
.desk-projects .hm-empty { max-width:28rem; margin:0; font-size:var(--t-meta); color:var(--ink-2) }
.public-header .desk-project-add { display:inline-flex; align-items:center; justify-content:center; flex:0 0 2.75rem; width:2.75rem; height:2.75rem; padding:0; border-radius:.5rem }
.desk-project-add svg { width:1.125rem; height:1.125rem; flex:none }
.desk-project-add:hover,.desk-project-add[aria-current] { background:var(--panel-2) }
.desk-project-toggle { display:flex; align-items:center; gap:.75rem; min-width:0; max-width:calc(100% - 3.125rem); min-height:2.75rem; padding:.625rem .875rem; border:0; border-radius:.5rem; background:var(--panel-2); color:var(--ink); font:500 var(--t-body-2)/1.5 var(--sans); cursor:pointer }
.desk-project-toggle[hidden] { display:none }
.desk-project-toggle > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.desk-project-toggle svg { flex:none; width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.desk-project-toggle:focus-visible { outline:.125rem solid var(--ink); outline-offset:.1875rem }
.desk-projects[data-project-compact] [data-home-projects] { position:absolute; z-index:30; top:calc(100% + .5rem); left:0; width:0; height:0; overflow:hidden; visibility:hidden; flex-direction:column; flex-wrap:nowrap }
.desk-projects[data-project-open] [data-home-projects] { visibility:visible; width:min(24rem,100%); height:auto; max-height:min(60vh,24rem); overflow-y:auto; overflow-x:hidden; padding:.375rem; border:1px solid var(--line); border-radius:.75rem; background:var(--panel); box-shadow:var(--shadow) }
.desk-projects[data-project-open] .hm-item { width:100%; min-width:0; white-space:normal; text-decoration:none }
.desk-projects[data-project-open] .hm-text { min-width:0 }
.desk-projects[data-project-open] .hm-text b { white-space:normal; overflow-wrap:anywhere }
.desk-projects[data-project-open] .hm-item:focus-visible { outline:.125rem solid var(--ink); outline-offset:-.125rem }
/* Measure intrinsic inline width independently of compact/open layout. Never paint this state. */
.desk-projects[data-project-measure] [data-home-projects] { position:absolute; visibility:hidden; display:flex; flex-direction:row; flex-wrap:nowrap; width:max-content; height:auto; max-width:none; max-height:none; padding:0; border:0; overflow:visible }
.desk-projects[data-project-measure] .hm-item { width:auto; max-width:none; white-space:nowrap }
.desk-projects[data-project-measure] .hm-text b { white-space:nowrap }
.desk-resources { display:inline-grid; place-items:center; flex:none; width:2.75rem; height:2.75rem; border-radius:.5rem; color:var(--ink-2) }
.desk-resources:hover { background:var(--panel-2); color:var(--ink) }
.desk-resources svg { width:1.25rem; height:1.25rem }

.public-context { display:flex; align-items:center; min-width:0; gap:.5rem }
.public-header .public-context a { padding:.5rem .875rem; border-radius:.5rem; font-size:var(--t-body-2) }
.public-context a:hover { background:var(--panel-2) }
.shelf-project-context { min-width:0; overflow:hidden }
.public-header .shelf-project-context a { display:block; min-height:2.75rem; padding:.625rem .875rem; border-radius:.5rem; background:var(--panel-2); font-size:var(--t-body-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.shelf-main { width:100%; max-width:var(--site-max); min-height:calc(100dvh - 4rem); margin:auto; padding:3rem var(--site-gutter) 5rem }
.shelf-page-head { margin:0 0 2rem }
.shelf-page-head p { margin:.75rem 0 0; color:var(--ink-2); font-size:var(--t-body) }
.shelf-viewbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 2rem }
.shelf-segments { display:inline-flex; flex-wrap:wrap; align-items:center; align-self:start; gap:.125rem; width:fit-content; max-width:100%; padding:.25rem; border-radius:.75rem; background:var(--panel-2); font:500 var(--t-body-2)/1.5 var(--sans) }
.shelf-segments a { display:inline-flex; justify-content:center; align-items:center; min-height:2.25rem; padding:.5rem 1rem; border-radius:.5rem; color:var(--ink-2); text-decoration:none }
.shelf-segments a:hover { color:var(--ink); text-decoration:none }
.shelf-segments a[aria-current] { color:var(--ink); background:var(--panel); font-weight:650 }
.public-page .shelf-primary { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:2.75rem; padding:.625rem 1rem; border:0; border-radius:.5rem; background:var(--accent); color:var(--panel); font:500 var(--t-body-2)/1.4 var(--sans); text-decoration:none }
.shelf-primary:hover { filter:brightness(.9) }
.public-mobile-contents,.public-mobile-toc { border:0; padding:.25rem .875rem; border-radius:.625rem; background:var(--panel-2) }
.public-toc a { color:var(--ink-2) }
.public-toc a:hover { color:var(--ink) }
.public-entry-list li { border:0; padding:1.25rem 0 }
@media (max-width:48rem) {
  .public-page .public-header { height:auto; min-height:4rem }
  .public-page .public-header-inner { min-height:4rem; gap:0 .5rem; padding-block:.5rem }
  .public-header-inner:has(.desk-projects) { display:grid; grid-template-columns:minmax(0,1fr) auto }
  .public-header-inner:has(.desk-projects) .public-header-actions { grid-column:2; grid-row:1 }
  .desk-projects { grid-column:1 / -1; width:100%; padding-top:.25rem }
  .public-context { display:none }
  .shelf-main { padding:2rem var(--site-gutter) 3.5rem }
  .public-reading { padding-top:1.5rem }
  .public-article-header { margin-bottom:2rem }
  .shelf-segments a { padding:.5rem .75rem }
}

/* Authentication and error pages keep their focused flow, using the same paper and type. */
.public-page.gate-page { background:var(--panel) }
.gate-page .wb-gate-card { width:min(32rem,100%); gap:1.25rem; padding:2rem; border:0; border-radius:0; box-shadow:none }
.gate-page .wb-gate-brand { gap:.5rem; margin-bottom:1rem; font-size:1.125rem }
.gate-page .wb-gate-brand .ms-mark { width:1.5rem; height:1.5rem }
.gate-page .wb-gate-card h1 { font:400 clamp(2rem,5vw,2.75rem)/1.2 Georgia,var(--sans); letter-spacing:-.04em }
.gate-page .wb-gate-btn { min-height:2.75rem; padding:.625rem 1.25rem; border:0; border-radius:.5rem }

/* Indexes and settings have no right-hand contents list: give that space to the page. */
.public-reading.has-sidebar:not(.has-toc) { grid-template-columns:var(--site-nav) minmax(0,1fr) }
.public-reading:not(.has-sidebar) { display:block }
.public-reading:not(.has-sidebar) > .public-article { max-width:52.5rem }
@media (max-width:48rem) {
  .public-reading.has-sidebar:not(.has-toc) { grid-template-columns:minmax(0,1fr) }
}

.public-prose :is(p,li,td) > a:not([class]) { text-decoration:underline; text-decoration-thickness:.0625rem; text-underline-offset:.22em }
.public-prose :is(p,li,td) > a:not([class])::after { content:"→"; display:inline-block; margin-left:.3em; font-family:var(--sans) }
.public-prose :is(p,li,td) > a:not([class])[target="_blank"]::after { content:"↗" }

@media(max-width:68.75rem) and (min-width:48.001rem) { .public-page { --site-gutter:1.375rem } }