/* THIS IS TIBBIR on phones. Loaded after the story's layered styles: one calm
   column, no colliding labels, and reader controls that fit a 360px screen. */
@media (max-width:760px){
  /* Brand and review badge share the masthead line without overlapping. */
  .tit-brand{flex-shrink:0}
  .tit-stage{flex:0 1 auto;min-width:0;padding:6px 9px;font-size:11px;line-height:1.4;letter-spacing:.06em}

  /* Customizer: the reset control stays one unit next to the kicker. */
  .tit-customizer-head{align-items:flex-start;gap:14px}
  .tit-reset{flex-shrink:0;white-space:nowrap}

  /* Five depth names cannot share one phone row. The chosen level is already
     named above the slider, so the scale keeps only its two ends. */
  .tit-depth-scale{justify-content:space-between;gap:16px;padding-top:4px}
  .tit-depth-scale>span{flex:0 1 auto;max-width:48%;font-size:12px;line-height:1.5}
  .tit-depth-scale>span:not(:first-child):not(:last-child){display:none}

  /* Sticky reader bar: the title gets its own line; below it the text controls
     on the left and icon buttons for settings and sharing on the right. The
     button text stays in the DOM as the accessible name. */
  .tit-reader-toolbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;
    grid-template-areas:'title title title title title' 'original font . settings share';
    align-items:center;gap:6px 8px;min-height:0;padding:8px 10px 10px}
  .tit-reader-toolbar:has([data-manuscript-original-toggle][hidden]){grid-template-areas:'title title title title title' 'font . . settings share'}
  .tit-reader-actions{display:contents}
  .tit-toolbar-title{grid-area:title;display:block;width:0;min-width:100%;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
  .tit-toolbar-title>span{font-size:12px}
  .tit-toolbar-title *{white-space:nowrap!important}
  .tit-reader-actions>button,.tit-font-control button{min-height:40px;font-size:12px}
  .tit-reader-actions>[data-manuscript-original-toggle]{grid-area:original;border:1px solid #37442d;border-radius:3px;padding-inline:10px}
  .tit-reader-actions>[data-manuscript-original-toggle][aria-pressed='true']{background:#263411;border-color:#92bf24;color:#e0f0c4}
  .tit-font-control{grid-area:font;justify-self:start}
  .tit-font-control button{min-width:40px;font-size:14px}
  .tit-reader-actions>[data-tit-customize]{grid-area:settings}
  .tit-reader-actions>[data-tit-share]{grid-area:share}
  .tit-reader-actions>:is([data-tit-customize],[data-tit-share]){position:relative;display:grid;place-items:center;width:42px;min-width:42px;height:40px;padding:0;
    border:1px solid #41512f;border-radius:3px;color:var(--tit-lime)}
  .tit-reader-actions>:is([data-tit-customize],[data-tit-share])>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tit-reader-actions>:is([data-tit-customize],[data-tit-share])::before{content:'';width:20px;height:20px;background:currentColor;
    -webkit-mask:var(--tit-icon) center/contain no-repeat;mask:var(--tit-icon) center/contain no-repeat}
  .tit-reader-actions>[data-tit-customize]{--tit-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M18 6h2M4 12h3M12 12h8M4 18h11M20 18h0'/%3E%3Ccircle cx='15.5' cy='6' r='2.5'/%3E%3Ccircle cx='9.5' cy='12' r='2.5'/%3E%3Ccircle cx='17.5' cy='18' r='2.5'/%3E%3C/svg%3E")}
  .tit-reader-actions>[data-tit-share]{--tit-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7 8l5-5 5 5M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E")}

  /* Chapter strip: snap-scrolling cards that grow with their two-line titles. */
  .tit-outline-head{align-items:flex-start}
  .tit-outline-all{flex-shrink:0;max-width:52%;padding-top:0;text-align:right;line-height:1.6}
  .tit-outline ol{margin-inline:-17px;padding:0 17px 10px;scroll-padding-inline:17px;scroll-snap-type:x mandatory}
  .tit-outline li:not(.tit-future){flex:0 0 min(220px,68vw);scroll-snap-align:start}
  .tit-outline li>button{height:auto;min-height:72px;align-items:flex-start;gap:10px;padding:12px;font-size:14px;line-height:1.4}
  .tit-outline li>button>span:nth-child(2){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .tit-outline li>button>i{align-self:flex-start}
  .tit-outline--expanded ol{margin-inline:0;padding-inline:0}
  .tit-outline--expanded li>button>span:nth-child(2){display:block}
  .tit-share-edition{max-width:none;margin-top:14px;padding:13px 0}

  /* Edition line: dot and profile read as one line, reading time below. */
  .tit-edition-line{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:6px 10px}
  .tit-edition-line>.tit-edition-dot{margin-top:.75em}
  .tit-edition-line>.tit-read-time{grid-column:1/-1}

  /* Figure captions stack instead of squeezing the credit into a 100px column. */
  .tit-pilot-art figcaption,.tit-figure-label{flex-direction:column;align-items:flex-start;gap:3px}
  .tit-pilot-art figcaption span:last-child,.tit-figure-label span:last-child{max-width:none;text-align:left}

  /* Long customizer questions wrap beside their number, not under it. */
  .tit-customizer legend{display:flex;align-items:baseline}
  .tit-field-number{flex-shrink:0}
  /* The live badge keeps one line; the kicker takes the remaining width. */
  .tit-preview-heading{align-items:flex-start}
  .tit-preview-heading .tit-live{flex-shrink:0;white-space:nowrap}
}

@media (max-width:480px){
  /* The close button already names the panel; drop the duplicate kicker. */
  .tit-intro-bar{justify-content:flex-end}
  .tit-intro-bar .tit-kicker{display:none}
  .tit-intro-bar button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tit-tech-choices{grid-template-columns:1fr}
  .tit-tech-choices .tit-choice{min-height:46px}
}