/* Story (#story, item 29): the chapter list beside the editor, quest cards with objectives and rewards, the
   checks and the "ผู้เล่นจะเห็น" preview; everything stacks on phones (390px). */
.story-main{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:12px;align-items:start}
.story-main[hidden]{display:none}
.story-list{display:flex;flex-direction:column;gap:8px;position:sticky;top:8px;max-height:calc(100vh - 40px);overflow:auto}
.story-rows{display:flex;flex-direction:column;gap:6px}
.story-row{display:flex;gap:6px;align-items:stretch}
.story-row-open{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 10px;border:1px solid #e3d3b4;border-radius:10px;background:#fffdf7;text-align:left;cursor:pointer}
.story-row[aria-current=true] .story-row-open{border-color:#2f5b3e;box-shadow:inset 0 0 0 1px #2f5b3e;background:#eef5e6}
.story-row-open small{color:#8c7b6b;font-size:11.5px}
.story-move{display:flex;flex-direction:column;gap:4px}
.story-move button{padding:2px 8px;font-size:11px}
.story-tags{display:flex;flex-wrap:wrap;gap:4px}
.story-tag{display:inline-block;padding:1px 8px;border-radius:999px;background:#efe6d3;color:#5d4a36;font-size:11px;font-weight:800}
.story-tag.on{background:#dcefd8;color:#2f5b3e}.story-tag.off{background:#eee;color:#777}.story-tag.draft{background:#fff1c9;color:#7a5410}.story-tag.bad{background:#fdece6;color:#9a3f2b}.story-tag.live{background:#e4ecf6;color:#2c4a6b}
.story-editor{display:flex;flex-direction:column;gap:12px;min-width:0}
.story-meta,.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px;align-items:end}
.story-wide{grid-column:1/-1}
.story-meta textarea,.story-step-edit textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;line-height:1.55}
.story-meta input[type=text],.story-step-edit input[type=text],.story-meta select,.story-step-edit select{min-width:0;max-width:100%}
.story-check{display:flex;align-items:center;gap:6px;font-size:13px}
.story-check.off{opacity:.6}
.story-page .story-check input{width:auto;flex:none;margin:0}
.story-page .items-field{min-width:0}
.story-save{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.story-dirty{margin-right:auto;font-size:12.5px;font-weight:700;color:#7a5410}
.story-dirty[hidden]{display:none}
.story-checks{margin:0;padding:8px 14px 8px 28px;border:1px solid #e3b3a3;border-radius:8px;background:#fdece6;color:#9a3f2b;font-size:12.5px}
.story-checks[hidden]{display:none}
.story-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:12px;align-items:start}
.story-steps{display:flex;flex-direction:column;gap:10px;min-width:0}
.story-step-edit{display:flex;flex-direction:column;gap:8px}
.story-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.story-step-head strong{margin-right:auto}
.story-small{padding:3px 9px!important;font-size:11.5px}
.story-sub{font-size:11.5px;font-weight:800;color:#8c7b6b}
.story-objectives-edit{display:flex;flex-direction:column;gap:6px}
.story-line-edit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:#f6efe0}
.story-line-edit input[type=number]{width:86px}
.story-line-edit input[type=text]{flex:1 1 120px;min-width:0}
.story-hint{color:#8c7b6b;font-size:11.5px}
.story-pictures{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.story-picture{width:52px;height:52px;padding:3px;border:1px solid #e3d3b4;border-radius:8px;background:#fffdf7;cursor:pointer;font-size:10px}
.story-picture[aria-pressed=true]{border-color:#2f5b3e;box-shadow:inset 0 0 0 2px #2f5b3e}
.story-picture img{width:100%;height:100%;object-fit:contain}
.story-preview{position:sticky;top:8px;display:flex;flex-direction:column;gap:8px}
.story-preview-card{display:grid;gap:4px;padding:10px;border:1px solid #c9a84f;border-radius:10px;background:#fff8e4;color:#3a2c14}
.story-preview-card small{color:#7a5a1d}
.story-preview-card ul{margin:0;padding-left:18px;font-size:12.5px}
.story-preview-line{margin:0;white-space:pre-line;font-size:12.5px}
.story-preview-reward{margin:0;color:#2f6b3f;font-weight:700;font-size:12.5px}
.story-preview-button{justify-self:start;padding:4px 12px;border-radius:999px;background:#d9a72e;color:#2d2006;font-weight:700;font-size:12px}
.story-preview-track{padding:6px 10px;border-radius:8px;background:#173322;color:#fff4cf;font-size:12.5px}
@media (max-width:1200px){.story-body{grid-template-columns:minmax(0,1fr)}.story-preview{position:static}}
@media (max-width:600px){
 .story-main{grid-template-columns:minmax(0,1fr)}
 .story-list{position:static;max-height:none}
 .story-line-edit select{flex:1 1 140px;min-width:0}
}