/* Optional account photo settings remain open in the desktop sidebar. */
.account-photo-settings>summary{display:none}

@media(max-width:760px){
  html{scroll-padding-top:80px}
  #main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select),#modal :is(input,textarea,select){font-size:16px;min-width:0;max-width:100%}
  #main :is(button,select,summary){min-height:44px}
  #main :is(button,select){min-width:44px}
  .feed-date-button{min-width:44px}
  .page-heading .eyebrow:empty{display:none}
  #main :is(input,textarea,select){scroll-margin-block:90px 100px}
  #main :is(.back-link,.quiet-link){min-height:44px;display:inline-flex;align-items:center;gap:6px}

  /* Edit the name and introduction first; the photo opens when requested. */
  .account-profile-page{padding-top:18px}
  .account-profile-page>.page-heading{margin-bottom:16px}
  .account-profile-page>.page-heading .eyebrow{display:none}
  .account-profile-page .page-heading h1{font-size:22px;margin:0 0 8px}
  .account-profile-page .account-view-profile{margin-top:12px;font-size:12px}
  .account-profile-layout{gap:16px}
  .account-photo-settings{border:1px solid var(--line);border-radius:10px;background:var(--white);min-width:0}
  .account-photo-settings>summary{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--green);list-style:none;cursor:pointer}
  .account-photo-settings>summary::-webkit-details-marker{display:none}
  .account-photo-settings>summary>.icon:last-child{margin-left:auto;width:16px;height:16px}
  .account-photo-settings[open]>summary>.icon:last-child{transform:rotate(180deg)}
  .account-photo-settings .account-photo-card{border:0;box-shadow:none;border-radius:0}
  .account-photo-settings .account-photo-cover{display:none}
  .account-photo-settings .profile-photo{padding:8px 14px 14px}
  .account-photo-settings .portrait{margin-top:0;width:64px;height:64px}
  .account-photo-settings .account-profile-note{padding:0 14px 14px;font-size:12px}
  .account-form-card{padding:16px}
  .account-profile-fields{gap:16px}
  .account-card-heading{gap:10px;padding-bottom:14px;margin-bottom:16px}
  .account-card-heading h2{font-size:16px}
  .account-card-heading p,.account-field-help{font-size:12px;line-height:1.9}
  .account-profile-fields label{font-size:13px;line-height:1.9}
  .account-profile-fields input:not([type=checkbox]),.account-profile-fields textarea{font-size:16px;padding:12px;min-height:48px}
  .account-profile-fields .optional,.account-required{font-size:11px}
  .account-contact-card>summary{padding:14px 16px}
  .account-contact-title small{font-size:12px}
  .account-contact-fields{padding:0 16px 16px}
  .account-contact-notice,.account-profile-fields .account-public-consent{font-size:12px;line-height:1.9}
  .account-profile-fields .account-public-consent{min-height:44px}
  .account-save-card{padding:16px}
  .account-save-actions>span{font-size:12px}
  .account-save-actions>.button{font-size:13px;white-space:normal}

  /* A writer's introduction uses the full width below the name and portrait. */
  .writer-profile-identity{display:contents}
  .writer-profile-identity h1{grid-column:2;align-self:center;font-size:22px;margin:0}
  .writer-profile-identity .writer-profile-bio{grid-column:1/-1;max-width:none;width:100%;font-size:14px;line-height:1.9;margin:0}
  .writer-profile-topics{grid-column:1/-1;margin-top:0;gap:8px 16px}
  .writer-profile-actions{grid-column:1/-1;max-width:none;padding:0}
  .writer-profile-actions .writer-edit-link{margin-bottom:0}
  .writer-profile-actions .writer-follow{justify-content:space-between}
  .writer-profile-topics li{font-size:12px}
  .writer-posts-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:16px;padding-bottom:14px}
  .writer-post-sort{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:12px;width:100%}
  .writer-post-sort select{width:100%;font-size:16px}

  /* Keep the start-reading action above a tall cover or optional introduction. */
  .series-detail-header{grid-template-columns:80px minmax(0,1fr);gap:10px 14px;padding:16px;border-radius:10px}
  .series-detail-cover{grid-column:1;grid-row:1/4;width:80px;max-width:80px;margin:0}
  .series-detail-intro{display:contents}
  .series-detail-intro>.series-state{grid-column:2;justify-self:start;align-self:start;font-size:12px}
  .series-detail-intro h1{grid-column:2;font-size:20px;line-height:1.8;margin:0}
  .series-detail-author{grid-column:2;font-size:12px;min-height:44px;overflow-wrap:anywhere}
  .series-detail-author .avatar,.series-detail-author>.icon{flex-shrink:0}
  .series-detail-intro .series-facts{grid-column:1/-1;margin:6px 0;font-size:12px;gap:10px 16px}
  .series-detail-intro>.series-description{grid-column:1/-1;grid-row:7;font-size:14px;margin:4px 0;line-height:1.9}
  .series-detail-intro .series-facts{grid-row:4}
  .series-detail-intro>.button{grid-column:1/-1;grid-row:6;margin:0;min-height:48px;font-size:13px;white-space:normal;justify-content:center}
  .series-detail-intro>.series-start{grid-row:5}
  .series-chapters{margin:24px 0}
  .series-chapter{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 12px;padding:16px 0}
  .series-chapter-number{min-width:0;font-size:16px;align-self:start;line-height:2}
  .series-chapter-copy{min-width:0}
  .series-chapter h3{font-size:16px;line-height:1.9}
  .series-chapter h3 a{display:block;min-height:44px}
  .series-chapter p{font-size:12px;line-height:1.8}
  .series-chapter>.series-read-toggle{grid-column:2;justify-self:start;margin:0;min-height:44px;font-size:12px}
  .series-pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:center;font-size:12px}
  .series-pagination>span{grid-column:1/-1;grid-row:1}
  .series-pagination .button{min-height:48px;white-space:normal;font-size:12px}
  .series-summary-card{gap:14px;padding:16px}
  .series-summary-content .series-facts{font-size:12px;line-height:1.9;gap:6px 12px;margin:12px 0 0}

  /* Comments retain a useful text column even after several replies. */
  .discussion .section-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .discussion .section-heading h2{font-size:19px}
  .discussion #comment-sort{width:100%;font-size:16px;min-height:48px;margin:0}
  #comment-form{padding:10px 12px}
  #comment-form textarea,#reply-form textarea{font-size:16px;line-height:1.9;min-height:48px}
  .comment-composer-actions{flex-wrap:wrap;gap:8px}
  .comment-composer-actions p{font-size:12px}
  .comment-composer-actions .button{font-size:13px;min-height:44px;margin-left:auto;white-space:normal}
  #comments{--comment-avatar:28px;--comment-gap:10px;margin-top:20px}
  .comment-heading{font-size:13px;gap:4px 8px}
  .comment-heading>time{font-size:11px}
  .comment>p{margin:10px 0 6px;font-size:15px;line-height:1.9}
  .comment-actions{margin-left:0;gap:4px;display:flex;flex-wrap:wrap}
  .comment-actions .text-button{min-width:44px;min-height:44px;padding:8px;font-size:12px}
  .comment-actions .text-button:first-child{margin-left:0}
  .comment-replies{margin:12px 0 0 10px;padding-left:12px}
  .comment-replies .comment-replies{margin-left:0;padding-left:0;border-left:0}
  #reply-form{padding:14px}
  #reply-form .button{min-height:44px;font-size:13px}
  .reactions>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}
  .reactions .button{font-size:12px;padding:10px 8px;white-space:normal;min-height:48px}
  .article-tags a{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .series-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;font-size:12px}
  .series-navigation>a{display:flex;align-items:center;gap:6px;min-height:44px;overflow-wrap:anywhere}
  .series-navigation>a[href^="/series"]{grid-column:1/-1;grid-row:1;justify-content:center;border-bottom:1px solid var(--line);padding-bottom:8px}
  .series-navigation>a:last-child{justify-content:flex-end}

  /* Notification text gets a full row; its action sits below it. */
  .notification-tools{display:grid;grid-template-columns:minmax(0,1fr);padding:12px;gap:8px}
  .notification-tools>.button{font-size:13px;white-space:normal}
  .notification-tools>.quiet-link{justify-content:center;font-size:12px}
  .notification-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px}
  .notification-row>a{display:flex;gap:6px;min-width:0;font-size:13px;line-height:1.9}
  .notification-row>a strong{font-size:14px}
  .notification-row time{font-size:12px}
  .notification-row>button{justify-self:start;min-height:44px;font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:7px}
  .notification-preferences{padding:16px}
  .notification-preferences h2{font-size:19px;line-height:1.8}
  .notification-preferences p,.notification-preferences .checkbox-label{font-size:13px;line-height:1.9}
  .notification-preferences .checkbox-label{min-height:44px}
  .notification-preferences>.button{width:100%;font-size:13px;white-space:normal}

  /* Search stays in one input/action row when the keyboard reduces the height. */
  #modal.search-modal{width:min(650px,calc(100vw - 24px));padding:16px;max-height:calc(100dvh - 24px)}
  #modal.search-modal .modal-heading{gap:10px;padding-bottom:12px;margin-bottom:14px}
  #modal.search-modal .modal-heading h2{font-size:18px;line-height:1.8;min-width:0}
  #modal.search-modal .modal-heading .icon-button{flex-shrink:0}
  #modal.search-modal .search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
  #modal.search-modal #search-input{margin:0;font-size:16px;min-height:48px;padding:10px 12px}
  #modal.search-modal .search-form .button{width:auto;min-height:48px;font-size:12px;padding:10px}
  #modal.search-modal #search-help{font-size:12px;line-height:1.9;margin-top:10px}
  #modal.search-modal .search-topics{margin-top:14px}
  #modal.search-modal .search-topic-list{max-height:none}

  body.mobile-keyboard-open .mobile-nav{display:none}
  body.mobile-keyboard-open{padding-bottom:16px}
  @media(max-height:540px){
    body:has(:is(input:not([type=checkbox]),textarea,[contenteditable=true]):focus) .mobile-nav{display:none}
    body:has(:is(input:not([type=checkbox]),textarea,[contenteditable=true]):focus){padding-bottom:16px}
    #modal{max-height:calc(100dvh - 24px);overflow:auto}
    #modal.search-modal #search-help,#modal.search-modal .search-topics{display:none}
  }
}
@media(max-width:380px){
  /* The editorial shortcut remains available in the More menu. */
  .header-actions .editor-workspace-link{display:none}
  .site-header .brand{min-width:128px}
}