/* The selected silhouette becomes the reading room. */
.toc-dialog{width:min(960px,98vw);height:min(870px,98dvh);max-height:none;margin:auto;overflow:visible;background:transparent;color:var(--type-fg);box-shadow:none;filter:drop-shadow(0 16px 28px #25252318)}
.toc-dialog[open]{display:block;animation:shape-open .4s var(--ease)}
.toc-dialog::backdrop{background:rgb(251 250 247 / .8);backdrop-filter:none}
.dialog-silhouette{position:absolute;inset:0;width:100%;height:100%;fill:var(--type-color);stroke:none;pointer-events:none}
.toc-dialog .icon-button:hover{background:color-mix(in srgb,var(--type-fg) 10%,transparent)}
.shape-dialog-content{position:absolute;top:54%;left:30%;width:40%;max-height:50%;transform:translateY(-50%);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--type-fg) transparent;padding:0 6px 8px}
.shape-dialog-content h2{font-family:var(--type-font);font-size:clamp(32px,5vw,46px);font-weight:500;line-height:1.15;text-align:center;margin:0 0 14px}
.toc-dialog .toc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;border:0}
.toc-dialog .toc-list li{border:0;border-top:1px solid color-mix(in srgb,var(--type-fg) 28%,transparent)}
.toc-dialog .toc-link{padding:8px 0;min-height:44px;font-size:14px;line-height:1.5;display:flex;align-items:center;color:inherit;word-break:keep-all}
.toc-dialog .toc-link:hover{background:color-mix(in srgb,var(--type-fg) 9%,transparent)}
.toc-dialog .toc-link:focus-visible,.toc-dialog a:focus-visible,.toc-dialog button:focus-visible{outline-color:var(--type-fg);outline-offset:1px}
.toc-dialog #guestbook-preview{border-top:1px solid color-mix(in srgb,var(--type-fg) 45%,transparent);margin-top:16px;padding-top:12px}
.toc-dialog .gb-preview{color:var(--type-fg);padding:0}
.toc-dialog .gb-preview-heading{font-size:15px;font-weight:600}
.toc-dialog .gb-preview-line,.toc-dialog .gb-preview-empty{font-size:12px;line-height:1.9}
.toc-dialog .gb-preview-message,.toc-dialog .gb-preview-empty{color:var(--type-fg)}
.toc-dialog .gb-preview-name{font-weight:400}
.toc-dialog .gb-preview:hover .gb-preview-heading{text-decoration:underline}
.toc-dialog .gb-status{color:inherit}
.type-reading{background:var(--type-color);color:var(--type-fg);--rule:color-mix(in srgb,var(--type-fg) 25%,transparent)}
.type-reading .site-header,.type-reading .site-footer,.type-reading .footer-brand,.type-reading .notes-link,.type-reading .index-toggle{color:var(--type-fg)}
.type-reading .type-index{color:var(--ink)}
.type-reading .article-view{position:relative;isolation:isolate;margin-top:35px;padding-top:12px}
.type-reading .article-type{padding:0;margin:0 0 14px;border-radius:0;font-size:clamp(44px,7vw,72px);line-height:1.2;font-weight:500}
.type-reading .article-title{font-size:clamp(28px,4vw,40px);padding-bottom:28px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.type-reading .article-body{color:var(--type-fg);font-size:16px;line-height:2.05}
.type-reading .article-pagination span{color:inherit}
.type-reading .article-pagination a:hover strong{text-decoration:underline}
.type-reading a:focus-visible,.type-reading button:focus-visible{outline-color:var(--type-fg)}
.type-reading ::selection,.toc-dialog ::selection{background:var(--type-fg);color:var(--type-color)}
.type-reading::-webkit-scrollbar-track{background:var(--type-color)}
.type-reading::-webkit-scrollbar-thumb{background:var(--type-fg)}
@keyframes shape-open{from{transform:scale(.88);opacity:.5}to{transform:scale(1);opacity:1}}
@media(max-width:700px){
  .toc-dialog{width:100vw;height:min(880px,98dvh);overflow:hidden;filter:none}
  .dialog-silhouette{left:-37%;width:174%;height:100%}
    .shape-dialog-content{top:53%;left:14%;width:72%;max-height:52%;padding:0 5px 10px}
  .shape-dialog-content h2{font-size:38px;margin-bottom:18px}
  .toc-dialog .toc-list{gap:0 18px}
  .toc-dialog .toc-link{font-size:13px;min-height:48px}
  .toc-dialog #guestbook-preview{margin-top:16px;padding-top:12px}
  .type-reading .article-view{margin-top:20px}
  .type-reading .article-body{font-size:15px;line-height:2}
}
@media(max-height:620px){.shape-dialog-content{top:54%;max-height:50%}.shape-dialog-content h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.toc-dialog[open]{animation:none}}
/* Guestbooks continue the selected type's reading palette. */
.type-guestbook{--gb-field-surface:color-mix(in srgb,var(--type-color) 12%,var(--paper));--gb-field-ink:#252523}
.type-guestbook .article-back,.type-guestbook .gb-helper,.type-guestbook .gb-count,.type-guestbook .gb-post-time,.type-guestbook .gb-post-action,.type-guestbook .gb-list-empty,.type-guestbook .gb-retry,.type-guestbook .gb-status{color:var(--type-fg)}
.type-guestbook .gb-page-heading{position:relative;min-height:148px;align-items:flex-start;border-bottom:1px solid var(--rule);padding-bottom:28px}
.type-guestbook .gb-page-heading h1{position:relative;z-index:1;margin:0;padding-right:0}
.type-guestbook .gb-title-type{display:block;font-family:var(--type-font);font-size:clamp(44px,7vw,72px);font-weight:500;line-height:1.2;margin-bottom:14px;letter-spacing:-.025em}
.type-guestbook .gb-title-label{display:block;font-size:clamp(28px,4vw,40px);font-weight:500;line-height:1.45}
.type-guestbook .gb-input,.type-guestbook .gb-textarea{background:var(--gb-field-surface);color:var(--gb-field-ink);border-color:color-mix(in srgb,var(--type-fg) 70%,var(--type-color));caret-color:var(--gb-field-ink)}
.type-guestbook .gb-input::placeholder,.type-guestbook .gb-textarea::placeholder{color:#56564f}
.type-guestbook .gb-input:focus,.type-guestbook .gb-textarea:focus{border-color:var(--type-fg);outline:2px solid var(--type-fg);outline-offset:3px}
.type-guestbook .gb-input:disabled,.type-guestbook .gb-textarea:disabled{opacity:.7}
.type-guestbook .gb-button{background:var(--type-fg);color:var(--type-color);border-color:var(--type-fg)}
.type-guestbook .gb-button:hover{background:var(--type-fg);text-decoration:underline;text-underline-offset:3px}
.type-guestbook .gb-button-secondary{color:var(--type-fg);background:transparent}
.type-guestbook .gb-button-secondary:hover,.type-guestbook .gb-load-more:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
.type-guestbook .gb-status.is-error{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.type-guestbook .gb-editor{background:var(--type-color);border:1px solid var(--rule)}
.type-guestbook .gb-field>label,.type-guestbook .gb-helper,.type-guestbook .gb-count,.type-guestbook .gb-post-action{font-size:12px}
.type-guestbook .gb-post-action{min-height:44px}
.type-guestbook .gb-post-time{font-size:11px}
@media(max-width:700px){
  .type-guestbook .gb-page-heading{min-height:128px;margin-bottom:28px}
  .type-guestbook .gb-page-heading h1{padding-right:0}
  .type-guestbook .gb-title-type{font-size:44px}
  .type-guestbook .gb-title-label{font-size:28px}
}

/* Reading pages put the type identity in the header and show one topic title. */
.type-article .wordmark{font-family:var(--type-font);font-size:clamp(44px,7vw,72px);font-weight:500;line-height:1.2;letter-spacing:-.025em}
.type-article .article-title{font-size:clamp(44px,7vw,72px);line-height:1.25;word-break:keep-all}
.type-article .article-view{background:#fff;color:var(--ink);--type-fg:var(--ink);--rule:#deded6;padding:32px;width:calc(100% - 64px)}
.type-article .article-view ::selection{background:var(--ink);color:#fff}
@media(max-width:700px){.type-article .article-view{width:88%;padding:24px 20px}}
@media(max-width:430px){.type-article .site-header{height:auto;min-height:106px;flex-wrap:wrap;gap:10px;padding-top:14px;padding-bottom:14px}.type-article .header-actions{margin-left:auto}.type-article .article-title{font-size:40px}}

#toc-heading:focus{outline:none}
.toc-dialog[data-type=ESFJ] .shape-dialog-content{top:44%;left:24%;width:30%;max-height:38%}
@media(max-width:700px){.toc-dialog[data-type=ESFJ] .dialog-silhouette{left:-19%}.toc-dialog[data-type=ESFJ] .shape-dialog-content{left:23%;width:52%}}

/* Neutral reading pages; the original type identity lives in the header icon. */
.type-reading{background:#fff;color:var(--ink);--rule:#deded6}
.type-reading .site-header{height:164px;min-height:164px;gap:24px;padding-top:12px;padding-bottom:12px}
.type-reading .type-index{top:146px}
.type-reading .wordmark.type-header-icon{position:relative;isolation:isolate;display:grid;place-items:center;width:128px;height:128px;flex:0 0 128px;font-family:var(--type-font);font-size:max(22px,calc(128px * var(--form-font)));font-weight:500;line-height:1;letter-spacing:-.025em;background:transparent;color:var(--type-fg)}
.type-header-icon .type-name{position:relative;z-index:2;translate:var(--form-label-x,0) var(--form-label-y,0);scale:var(--form-label-scale,1)}
.type-reading .type-header-icon:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.type-reading .article-view{margin-top:20px}
.type-guestbook .gb-page-heading{min-height:0}
.type-guestbook .gb-title-type{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:700px){
  .type-reading .site-header{height:auto;min-height:140px;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .type-reading .wordmark.type-header-icon{width:112px;height:112px;flex-basis:112px;font-size:max(20px,calc(112px * var(--form-font)))}
  .type-reading .header-actions{margin-left:auto;gap:16px}
  .type-reading .type-index{top:132px}
  .type-reading .article-view{margin-top:12px}
}
