/* The writing canvas and phone controls have their own layout. */
.editor-primary,.editor-extra{display:contents}
.rich-editor .editor-more{display:none}
.editor-help-details{border:1px solid var(--line);background:var(--white)}
.editor-help-details summary,.writing-typing-settings>summary,.writing-settings>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;color:var(--green);font-size:12px;cursor:pointer;list-style:none}
.editor-help-details summary::-webkit-details-marker,.writing-typing-settings>summary::-webkit-details-marker,.writing-settings>summary::-webkit-details-marker{display:none}
.editor-help-details summary>.icon:last-child,.writing-typing-settings>summary>.icon:last-child,.writing-settings>summary>.icon:last-child{margin-left:auto;flex-shrink:0;width:16px;height:16px;transition:transform .15s}
:is(.editor-help-details,.writing-typing-settings,.writing-settings)[open]>summary>.icon:last-child{transform:rotate(180deg)}
.editor-help-details .editor-help{border:0;padding-top:0;font-size:12px;line-height:1.9}
.writing-typing-settings{border:1px solid var(--line);border-radius:10px;background:var(--surface-inset);margin-bottom:24px;min-width:0}
.writing-typing-settings .tamil-typing{border:0;background:transparent;margin:0;padding-top:4px}
.writing-save-state{font-size:11px;line-height:1.8;color:var(--muted);margin:0 0 12px}
.writing-settings{border:1px solid var(--line);border-radius:12px;margin-top:24px;min-width:0}
.writing-settings>summary{font-size:14px;padding:14px 16px}
.writing-settings>summary span{min-width:0}
.writing-settings>summary small{display:block;color:var(--muted);font-size:11px;line-height:1.9;font-weight:400}
.writing-settings-content{padding:16px 20px 0}
.writing-settings-content>.form-row{gap:20px}
.writing-page .policy-links{font-size:11px;line-height:2;color:var(--muted);margin-top:20px}
.rich-surface:is(:empty,:has(>p:only-child:empty),:has(>p:only-child>br:only-child)):before{content:'இங்கே எழுதத் தொடங்குங்கள்…';color:var(--muted);pointer-events:none}

@media(max-width:760px){
  /* Across forms, remove the second desktop gutter and use readable labels. */
  :is(#write-form,#review-form,#published-edit-form){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .form-container label,.writing-container label{font-size:13px;line-height:1.9}
  .form-container label small,.writing-container label small{font-size:11px;line-height:1.9}
  .form-container .optional,.writing-container .optional{font-size:11px}
  .writing-container :is(input:not([type=checkbox]),textarea,select){min-width:0;max-width:100%;font-size:16px}
  .writing-container :is(.form-row,.options-grid){grid-template-columns:minmax(0,1fr);gap:0}
  .writing-container :is(.series-fields,.release-fields){padding:14px;min-width:0}
  .writing-container :is(.series-fields,.release-fields) legend{font-size:13px}
  .writing-container .small{font-size:12px;line-height:1.9}
  .writing-container .checkbox-label{font-size:13px;min-height:44px}
  .writing-container .checkbox-label input{flex-shrink:0;margin-top:4px}
  .writing-container .review-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .writing-container .review-actions .button{font-size:13px;width:100%}

  /* While composing, the writing actions take the bottom navigation's place. */
  body:has(#write-form){padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  body:has(#write-form) .mobile-nav,body:has(#write-form) footer{display:none}
  body:has(#write-form) .site-header{position:static}
  .writing-page{padding:16px 16px 24px}
  .writing-page>.page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px}
  .writing-page>.page-heading .eyebrow,.writing-page>.page-heading p{display:none}
  .writing-page>.page-heading h1{font-size:20px;line-height:1.6;margin:0}
  .writing-page>.page-heading>.quiet-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:12px;margin:0;flex-shrink:0}
  #write-form{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  #write-form .writing-title{margin:0 0 8px;font-size:12px;color:var(--muted)}
  #write-form .title-input{font-size:20px;line-height:1.7;min-height:56px;margin-top:6px;background:var(--white);padding:12px;border-radius:8px}
  #write-form .title-input::placeholder{font-size:17px;font-weight:400}
  .writing-typing-settings{margin-bottom:16px;background:var(--white)}
  .writing-typing-settings>summary{padding:8px 12px;min-height:44px;font-size:12px}
  .writing-typing-settings .tamil-typing{padding:8px 12px 14px}
  .writing-typing-settings .typing-controls{gap:6px}
  .writing-save-state{font-size:11px;margin:0 0 12px;min-height:20px}
  .writing-page .rich-editor{margin-top:0}

  /* A single row stays reachable while the document scrolls. More tools expand. */
  .rich-editor .editor-toolbar{position:sticky;top:0;z-index:5;display:block;padding:6px;border-radius:10px 10px 0 0;background:var(--white);box-shadow:0 2px 8px var(--shadow-color)}
  body:not(:has(#write-form)) .rich-editor{scroll-margin-top:64px}
  body:not(:has(#write-form)) .rich-editor .editor-toolbar{top:64px}
  .editor-primary{display:flex;align-items:center;min-width:0;flex-wrap:nowrap;justify-content:space-between;gap:2px}
  .rich-editor .editor-toolbar button{height:44px;min-height:44px;min-width:44px;padding:10px;flex-shrink:0;color:var(--green)}
  .rich-editor .editor-toolbar .icon{width:20px;height:20px}
  .rich-editor .editor-toolbar button span{display:none}
  .rich-editor .editor-more{display:inline-flex}
  .rich-editor .editor-toolbar [data-editor-command=preview]{margin-left:auto;background:var(--soft-green);gap:6px}
  .rich-editor .editor-toolbar button[data-editor-command=preview] span{display:inline;font-size:11px}
  .rich-editor .editor-extra{display:none}
  .rich-editor.editor-tools-open .editor-extra{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:4px;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
  .rich-editor .editor-extra select{grid-column:span 2;max-width:100%;width:100%;height:44px;padding:6px;font-size:16px}
  .rich-editor .editor-extra button{width:100%;justify-content:center}
  .rich-editor .editor-toolbar .editor-extra button[data-editor-command=image] span{display:none}
  .editor-help-details{border-radius:8px}
  .editor-help-details summary{min-height:44px;padding:8px 12px;font-size:11px;color:var(--muted)}
  .editor-help-details summary>.icon{width:16px;height:16px}
  :is(#write-form,#review-form,#published-edit-form) :is(.rich-surface,#writing-preview){font-size:18px;line-height:2;min-height:max(360px,55svh);padding:16px 12px;border-radius:0 0 10px 10px;overflow-wrap:anywhere;scroll-margin-top:64px}
  .rich-editor .rich-surface{overflow:visible}
  .rich-editor .rich-surface:focus{box-shadow:inset 0 0 0 1px var(--green)}
  .editor-status{font-size:11px;gap:6px;padding:10px 2px}
  .editor-message:empty{display:none}
  .writing-settings{margin-top:16px;border-radius:10px;background:var(--white)}
  .writing-settings>summary{padding:12px;font-size:13px;min-height:64px}
  .writing-settings-content{padding:16px 12px 0}
  .writing-page .writing-settings .additional-options{padding:14px;background:transparent;margin-bottom:16px}
  .writing-page .writing-options-heading,.writing-page .writing-options-heading span{font-size:12px;line-height:1.9}
  .writing-page .policy-links{margin:16px 0 0;font-size:11px;line-height:1.9}
  #write-form .writing-footer{position:fixed;inset:auto 0 0;z-index:40;margin:0;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--white);border-top:1px solid var(--line);box-shadow:0 -3px 16px var(--shadow-color)}
  #write-form .writing-footer>span{display:none}
  #write-form .writing-footer>div{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;margin:0}
  #write-form .writing-footer .button{font-size:13px;min-height:48px;padding:10px 12px}
  #write-form .writing-footer .icon{width:17px;height:17px}
  #write-form.keyboard-open .writing-footer{position:static;padding:14px 0 0;margin-top:18px;box-shadow:none}
  body:has(#write-form.keyboard-open){padding-bottom:16px}
  .editor-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:20px 16px}
  .editor-dialog label{font-size:13px}
  .editor-dialog input,.editor-dialog select{font-size:16px;min-height:44px}
  .editor-dialog .dialog-actions .button{flex:1;font-size:13px}
  /* A short viewport leaves room for the keyboard and the current line. */
  @media(max-height:540px){
    #write-form .writing-footer{position:static;padding:14px 0 0;margin-top:18px;box-shadow:none}
    body:has(#write-form){padding-bottom:16px}
    body:has(#write-form) .editor-help-details:not([open]){display:none}
  }
}
@media(max-width:360px){
  .writing-page{padding-inline:12px}
  .writing-page>.page-heading h1{font-size:18px}
  .writing-page>.page-heading>.quiet-link{font-size:11px}
  .rich-editor .editor-toolbar button[data-editor-command=preview] span{display:none}
}