/* Opt-in three-step shell. Older inline blog applets retain their two-pane layout. */
.blog-three .blog-workspace{grid-template-rows:auto minmax(0,1fr) auto}
.blog-three .blog-switch{display:flex;gap:8px}
.blog-three .blog-switch button{flex:1}
.blog-three .blog-columns{display:grid;grid-template-columns:minmax(0,1fr)}
.blog-three [data-blog-panel][hidden]{display:none!important}
.blog-three #blog-preview,.blog-three #blog-editor{width:100%;max-width:1000px;justify-self:center}
.blog-three .blog-bottom{display:flex;align-items:center;gap:12px;justify-content:center;min-height:0}
.blog-three .blog-bottom .blog-actions{margin:0;width:min(100%,400px)}
.blog-three .blog-bottom>.blog-hint{display:none}
.blog-three #blog-status:empty{display:none}.blog-three #blog-status{margin:0;max-width:320px}
.blog-three #blog-body{max-height:none}
.blog-three #blog-gallery{margin:16px 0}
.blog-three #blog-design{padding:0;overflow:hidden}
.design-workspace{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 44px 240px;gap:12px}
.design-sheet-scroll,.design-tools{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:20px}
.design-tools{border-left:1px solid var(--ah-divider);background:var(--ah-canvas)}
.design-sheet{max-width:100%;margin:0 auto;min-width:0}
.design-grid-wrap{container-type:inline-size}
#design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.470588cqw;position:relative;background:repeating-linear-gradient(180deg,transparent 0,transparent calc(16.176471cqw - 1px),var(--ah-divider) calc(16.176471cqw - 1px),var(--ah-divider) 16.176471cqw),repeating-linear-gradient(90deg,transparent 0,transparent calc(33.823529cqw - 1px),var(--ah-divider) calc(33.823529cqw - 1px),var(--ah-divider) 33.823529cqw);background-position:0 -0.735294cqw,-0.735294cqw 0}
.design-block{position:relative;min-width:0;min-height:0;background:var(--ah-surface);border-radius:var(--ah-radius-control);outline:1px dashed var(--ah-border)}
.design-block.is-selected{outline:3px solid var(--ah-focus);z-index:1}
.design-block>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--ah-play-surface)}
.design-text{padding:1.470588cqw;font:3.1862745cqw/4.6568627cqw Arial,sans-serif;color:var(--ah-ink)}.design-text>span{display:block;white-space:pre}
.design-select{position:absolute;inset:0;width:100%;height:100%;min-height:44px;min-width:44px;background:transparent;border:0;cursor:pointer;border-radius:inherit}
.design-select:focus-visible{outline:3px solid var(--ah-focus);outline-offset:-3px}
.design-tools label{display:block;font-size:14px;margin:12px 0 6px;font-weight:bold}
.design-tools select{display:block;max-width:100%;width:100%;min-height:44px;font:inherit;padding:8px;color:var(--ah-ink);background:var(--ah-surface);border:1px solid var(--ah-border);border-radius:var(--ah-radius-control)}
.design-tools select:focus-visible{outline:3px solid var(--ah-focus);outline-offset:2px}
.design-tools>button{margin-top:12px;width:100%}
@media(max-width:739px){.design-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(80px,1fr) auto minmax(100px,28%);gap:0}.design-tools{border-left:0;border-top:1px solid var(--ah-divider);padding:12px}.design-sheet-scroll{padding:16px}.blog-three .blog-bottom{flex-wrap:wrap;gap:4px}.blog-three #blog-status{max-height:44px;overflow:auto}}



/* Compact Write header: profile and title share a row when space permits. */
.blog-three #blog-preview{padding:12px 16px;container-type:inline-size}
.blog-three #blog-preview>.blog-hint{margin:6px 0 10px}
.blog-three .write-byline{display:grid;grid-template-columns:minmax(120px,28%) minmax(0,1fr);gap:16px;align-items:center}
.blog-three .write-byline .blog-author{margin:0;gap:8px;min-width:0}
.blog-three .write-title{min-width:0}
.blog-three #blog-preview .blog-field-label{margin:8px 0 4px}
.blog-three #blog-preview .write-title .blog-field-label{margin-top:0}
.blog-three #blog-title{margin:0;padding:8px 10px}
.blog-three #blog-body{padding:8px 10px}
.blog-three #blog-body-hint{margin:6px 0 0}
@container(max-width:460px){.blog-three .write-byline{grid-template-columns:minmax(0,1fr);gap:8px}}

/* Match Builder PLAY's compact rail, without irrelevant rotate/delete actions. */
.design-toolrail{align-self:start;display:flex;flex-direction:column;gap:12px;padding:12px 0}
.design-toolgroup{display:flex;flex-direction:column;gap:6px}
.design-toolrail .ah-button{flex:0 0 44px;width:44px;height:44px;padding:0}
@media(max-width:739px){.design-toolrail{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px}.design-toolgroup{flex-direction:row}.design-tools{border-top:1px solid var(--ah-divider)}}
@media(max-height:599px){.blog-three #blog-design{overflow:auto}.design-workspace{min-height:440px}}

.design-heading{display:flex;align-items:center;gap:8px}.design-heading h2{flex:1;margin:0}.design-heading .ah-button{flex-shrink:0}

#design-crop h3{font-size:16px;margin:12px 0 0}#design-crop input{width:100%;min-height:44px;accent-color:var(--ah-ink)}

/* JHS Share keeps its controls outside the independently scrolling, natural-height image. */
.blog-three #share-dialog[open]{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 28px)}
.blog-three #share-dialog>.dialog-heading,.blog-three #share-dialog>#share-status,.blog-three #share-dialog>#download-photo{flex-shrink:0}
.blog-share-scroll{min-height:0;overflow:auto;overscroll-behavior:contain}
.blog-three #share-dialog #blog-snapshot{width:100%;height:auto;max-height:none;margin:0}
.blog-share-scroll:focus-visible{outline:3px solid var(--ah-focus);outline-offset:-3px}
.blog-three .edition{display:inline}
/* JHS navigation is a tab strip, distinct from action buttons. */
.blog-three .blog-switch{gap:4px;border-bottom:1px solid var(--ah-border);padding:0 4px;align-items:end}
.blog-three .blog-switch [role=tab]{position:relative;flex:1;border:1px solid transparent;border-bottom:0;border-radius:var(--ah-radius-control) var(--ah-radius-control) 0 0;background:transparent;color:var(--ah-muted);margin-bottom:-1px;min-height:44px;padding:10px 16px;transform:none}
.blog-three .blog-switch [role=tab][aria-selected=true]{background:var(--ah-surface);border-color:var(--ah-border);color:var(--ah-ink);font-weight:bold;border-bottom:1px solid var(--ah-surface)}
.blog-three .blog-switch [role=tab][aria-selected=true]::before{content:"";position:absolute;top:0;left:12px;right:12px;height:3px;border-radius:0 0 3px 3px;background:var(--ah-selected-border)}
@media(hover:hover){.blog-three .blog-switch [role=tab]:not([aria-selected=true]):hover{background:var(--ah-hover);color:var(--ah-ink)}}
.blog-three .blog-switch [role=tab]:focus-visible{outline-offset:-4px;z-index:1}

.blog-guided .help-toggle{display:flex;align-items:center;gap:8px;min-height:44px}.blog-guided .help-toggle input{width:22px;height:22px;accent-color:var(--ah-selected-border)}
.blog-guided #blog-sentences input{border:1px solid var(--ah-divider);border-radius:var(--ah-radius-control);padding:6px 8px;background:var(--ah-canvas);margin:3px 0}.blog-guided #blog-sentences input::placeholder{color:var(--ah-muted);opacity:.7}.blog-guided #blog-sentences input[hidden]{display:none}
.blog-guided #blog-sentences p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}

/* ES handwriting guides repeat on wrapped rows; only the baseline uses the theme accent. */
.blog-guided #blog-sentences{font-family:"Comic Sans MS","Chalkboard SE","Chalkboard",cursive;font-size:34px;font-weight:400;line-height:64px;color:#000}
.blog-guided #blog-sentences p{gap:0 8px;align-items:center;margin:12px 0;line-height:64px;background-image:linear-gradient(to bottom,transparent 46px,var(--ah-selected-border) 46px,var(--ah-selected-border) 48px,transparent 48px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='64'%3E%3Cpath d='M0 16H8M0 57H8' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M0 30H8' fill='none' stroke='black' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E");background-size:100% 64px,8px 64px;background-repeat:repeat-y,repeat}
.blog-guided #blog-sentences input{font:inherit;line-height:64px;height:64px;min-height:64px;padding:0 5px;margin:0;border:0;border-radius:0;background:transparent;vertical-align:baseline;box-shadow:none}
.blog-guided #blog-sentences input::placeholder{color:var(--ah-muted);opacity:.65}
.blog-guided #blog-sentences input.sentence-answer::placeholder{color:var(--ah-selected-border);opacity:.65}
.blog-guided #blog-sentences input:focus-visible{outline:2px solid var(--ah-focus);outline-offset:-2px;border-radius:4px}
.blog-guided #blog-sentences p>span{line-height:64px}

/* Fields follow their measured text width; the last field and period wrap together. */
.blog-guided #blog-sentences .sentence-group{display:flex;align-items:center;gap:0;flex:0 1 auto;min-width:0;max-width:100%;line-height:64px}
.blog-guided #blog-sentences input.sentence-frame,.blog-guided #blog-sentences input.sentence-answer{flex:0 1 auto;min-width:44px;max-width:100%;padding-left:2px;padding-right:2px}
.blog-guided #blog-sentences .sentence-period{flex:0 0 auto;line-height:64px}
.blog-guided #blog-sentences p{column-gap:4px}

.es-byline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;flex-wrap:wrap}.es-byline .blog-author{margin:0}.ink-mode-toggle .switch-track{width:132px}.ink-mode-toggle input:checked+.switch-track .switch-knob{transform:translateX(88px)}
#blog-handwriting[hidden],#blog-sentences[hidden]{display:none!important}.ink-tools{display:flex;gap:8px;flex-wrap:wrap}.ink-pad{margin:12px 0 20px}.ink-pad-heading{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}.ink-pad-heading h3{font-size:16px;margin:0;color:var(--ah-muted)}
.ink-canvas{display:block;width:100%;height:64px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.ink-canvas[hidden]{display:none}.design-ink{display:block;width:100%;height:100%;object-fit:contain}
/* Keep ES help and input-mode controls outside the sentence scroller. */
.blog-guided #blog-preview{display:flex;flex-direction:column;overflow:hidden;scrollbar-gutter:auto}
.blog-guided #blog-preview>article{display:flex;flex-direction:column;flex:1;min-height:0}
.blog-guided #blog-preview>.blog-heading,.blog-guided #blog-preview>.blog-hint,.blog-guided .es-byline{flex-shrink:0}
.blog-guided #blog-handwriting,.blog-guided #blog-sentences{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:6px}
@media(max-height:599px){
 .blog-guided #blog-preview{padding:8px 12px}
 .blog-guided #blog-preview>.blog-hint{display:none}
 .blog-guided #blog-preview .blog-heading h1{margin:0;font-size:20px}
 .blog-guided .es-byline{margin:4px 0;gap:4px}
 .blog-guided #blog-avatar{width:44px;height:44px;flex-basis:44px}
}

/* Prevent iPad long-press selection between handwriting strokes. */
#blog-handwriting{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.ink-pad{position:relative}
.ink-pad-heading[hidden],.ink-select[hidden]{display:none!important}
.ink-select{position:absolute;inset:0;z-index:1;width:100%;border:0;background:transparent;cursor:pointer;border-radius:4px;touch-action:pan-y}
.ink-select:focus-visible{outline:2px solid var(--ah-focus);outline-offset:-2px}
.ink-pad.is-active{box-shadow:inset 3px 0 var(--ah-selected-border);padding-inline-start:10px}
.ink-done{margin-inline-start:auto}
.blog-writing,.blog-writing *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ink-pad:not(.is-active) .ink-canvas{touch-action:pan-y}