/* Settings section: How posts are written (settings-writing.js). Uses the Settings tokens from
   settings-view.css and the console's; every var() carries a fallback. Classes are prefixed wr-.
   Each card folds: its summary is the heading. Every control is at least 44px tall on a phone. */

.st .wr-acc{min-width:0}
.st .wr-acc>summary{cursor:pointer;list-style:none;align-items:center;justify-content:space-between;flex-wrap:wrap;
  min-height:44px;position:relative;padding-right:var(--s6,2rem);font-family:inherit;font-size:var(--fs-sm,.8125rem);
  font-weight:600;letter-spacing:normal;text-transform:none;color:var(--fg,#111)}
.st .wr-acc>summary h2{text-transform:none;letter-spacing:var(--track-h3,0)}
.st .wr-acc>summary::-webkit-details-marker{display:none}
.st .wr-acc>summary::after{content:"";position:absolute;right:var(--s2,.5rem);top:50%;width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.st .wr-acc[open]>summary::after{transform:translateY(-30%) rotate(225deg)}
.st .wr-acc>summary:focus-visible{outline:2px solid var(--focus,var(--accent,#333));outline-offset:2px;border-radius:var(--r-sm,8px)}
.st .wr-acc-sub{margin:0}
.st .wr-acc[open]>summary{margin-bottom:var(--s2,.5rem)}
.st .wr-acc-body{min-width:0}

.st .wr-field{border:0;padding:0;margin:var(--s3,.75rem) 0 0;display:flex;flex-direction:column;gap:var(--s2,.5rem);min-width:0}
.st .wr-field legend,.st .wr-legend{font-size:var(--fs-sm,.8125rem);font-weight:600;color:var(--fg,#111);padding:0;margin:0 0 var(--s1,.25rem)}
.st .wr-note{margin:0}
.st .wr-ferr{margin:var(--s1,.25rem) 0 0;color:var(--warn,#a9482b);font-size:var(--fs-sm,.8125rem);line-height:var(--lead-tight,1.35)}
.st .wr-default{display:inline-block;margin-left:var(--s2,.5rem);font-size:var(--fs-meta,.75rem);font-weight:600;
  color:var(--fg-dim,#555);border:1px solid var(--line-strong,#bbb);border-radius:var(--r-pill,99px);padding:0 .45rem}

.st .wr-choices{display:flex;flex-direction:column;gap:var(--s2,.5rem)}
.st .wr-choice{display:flex;align-items:flex-start;gap:var(--s3,.75rem);min-height:44px;padding:var(--s2,.5rem) var(--s3,.75rem);
  border:1px solid var(--line-strong,#bbb);border-radius:var(--r-sm,8px);background:var(--surface,#fff);cursor:pointer;min-width:0}
.st .wr-choice:has(input:checked){border-color:var(--accent,#333);box-shadow:inset 0 0 0 1px var(--accent,#333)}
.st .wr-choice input[type=radio]{flex:none;width:1.25rem;height:1.25rem;margin:.15rem 0 0;padding:0;accent-color:var(--accent,#333)}
.st .wr-choice>span{display:flex;flex-direction:column;gap:.1rem;min-width:0;font-size:1rem;line-height:1.3}
.st .wr-choice b{font-weight:600}
.st .wr-choice:focus-within{outline:2px solid var(--focus,var(--accent,#333));outline-offset:1px}

.st .wr-chips{display:flex;flex-wrap:wrap;gap:var(--s2,.5rem)}
.st .wr-chip{display:inline-flex;align-items:center;gap:.1rem;max-width:100%;min-width:0;overflow-wrap:anywhere;
  border:1px solid var(--line-strong,#bbb);border-radius:var(--r-pill,99px);background:var(--surface-2,#f5f5f5);
  padding:.2rem .2rem .2rem .7rem;font-size:var(--fs-sm,.8125rem);line-height:1.3}
.st button.wr-x{min-height:44px;min-width:44px;padding:0;border:0;border-radius:var(--r-pill,99px);background:none;
  font-size:1.25rem;line-height:1;color:var(--fg-dim,#555)}
.st .wr-chip .st-meta{margin:0}
.st .wr-field .st-inline button{min-height:44px}

.st .wr-locked{margin:var(--s3,.75rem) 0 0;padding:0 0 0 1.1rem;display:flex;flex-direction:column;gap:var(--s2,.5rem);
  font-size:var(--fs-sm,.8125rem);line-height:1.4}
.st .wr-locked b{font-weight:600}

.st .wr-saved{margin-top:var(--s3,.75rem);padding:var(--s3,.75rem);border:1.5px solid var(--accent,#333);border-radius:var(--r,12px);
  background:var(--surface,#fff);display:flex;flex-direction:column;gap:var(--s2,.5rem)}
.st .wr-saved p{margin:0}

/* Tap targets on this screen: every button, field and fold is at least 44px tall. */
.st-sec[data-sec^="writing-"] button,
.st-sec[data-sec^="writing-"] .st-link,
.st-sec[data-sec^="writing-"] summary{min-height:44px}
.st-sec[data-sec^="writing-"] input:not([type=radio]),
.st-sec[data-sec^="writing-"] select{min-height:44px}

@media (min-width:1024px){
  .st .wr-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
}