/* Realms → Rules (ui/rules-tab.mjs), New ruleset (src/rulesets/new-ui.mjs)
   and the ruleset editor (src/rulesets/editor-ui.mjs): sections down the
   side on a wide screen, a section menu on a phone; long lists as a search
   and one entry's editor beside them (under them on a phone). */
.rules-heading{margin:18px 0 8px;color:var(--accent);font:500 var(--size-ui) var(--head);letter-spacing:.12em;text-transform:uppercase}
.rules-heading:first-child{margin-top:0}
.rules-builtin-hint{margin:0 0 10px}

/* New ruleset */
.ruleset-new .dialog-card{gap:var(--space-6)}
.rs-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.rs-way{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-height:88px;padding:12px;text-align:left;border-color:var(--stone-750);background:var(--surface-low)}
.rs-way b{color:var(--text);font:600 var(--size-ui) var(--head)}
.rs-way small{color:var(--muted);font:400 var(--size-small)/1.35 var(--body);letter-spacing:0}
.rs-way[aria-pressed=true]{border-color:var(--accent);background:var(--accent-950);box-shadow:0 0 0 1px var(--accent)}
.rs-way[aria-pressed=true] b{color:var(--accent-200)}
.ruleset-new .rules-tile{position:relative;display:block;min-width:0;margin:0;cursor:pointer}
.ruleset-new .rs-copies{max-height:min(46dvh,420px);overflow:auto;padding:2px}
.rs-eyebrow{margin:0 0 6px;color:var(--muted);font:600 var(--size-caption) var(--head);letter-spacing:.14em;text-transform:uppercase}
.rs-progress{display:flex;flex-direction:column;gap:var(--space-2);margin:6px 0 0;padding:0;list-style:none}
.rs-progress li{display:flex;justify-content:space-between;gap:var(--space-5);padding:8px 12px;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--surface-low)}
.rs-progress b{color:var(--text-dim);font:600 var(--size-label) var(--head)}
.rs-progress small{color:var(--muted);font-size:var(--size-small)}
.rs-progress li[data-state=writing]{border-color:var(--accent-600);background:var(--accent-950)}
.rs-progress li[data-state=writing] small{color:var(--accent)}
.rs-progress li[data-state=done] small{color:var(--ok)}
.rs-progress li[data-state=failed] small{color:var(--danger)}
.rules-tile-initials{display:grid;place-items:center;width:100%;height:100%;color:var(--accent-450);font:600 var(--size-title) var(--head);letter-spacing:.08em}
@media(max-width:600px){.rs-ways{grid-template-columns:1fr}.rs-way{min-height:0}}

/* The editor */
.ruleset-editor{width:min(1180px,calc(100vw - 24px));max-width:none;height:min(92dvh,1100px);max-height:none}
.ruleset-editor .dialog-card{height:100%;max-height:none;padding:0;gap:0;overflow:hidden;min-width:0}
.rs-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8);padding:16px 20px 12px;border-bottom:1px solid var(--stone-800)}
.rs-top h2{margin:2px 0 0;color:var(--accent);font:500 var(--size-headline)/1.15 var(--body);text-transform:none;overflow-wrap:anywhere}
.rs-top .hint{margin:4px 0 0}
.ruleset-editor .rs-section-pick{display:none}
.rs-body{flex:1;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr)}
.rs-nav{display:flex;flex-direction:column;gap:var(--space-2);padding:14px 12px;overflow:auto;border-right:1px solid var(--stone-800);background:var(--surface-low)}
.rs-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 11px;border:1px solid transparent;border-radius:var(--radius-md);background:none;text-align:left}
.rs-nav button b{color:var(--text-dim);font:600 var(--size-ui) var(--head)}
.rs-nav button small{color:var(--muted);font:400 var(--size-small)/1.3 var(--body);letter-spacing:0}
.rs-nav button[aria-current=true]{border-color:var(--accent-600);background:var(--accent-950)}
.rs-nav button[aria-current=true] b{color:var(--accent)}
.rs-nav button.warn small{color:var(--warn)}
.rs-main{min-width:0;padding:16px 22px 28px;overflow:auto;display:flex;flex-direction:column;gap:var(--space-6)}
.rs-foot{display:flex;align-items:center;gap:var(--space-5);padding:12px 20px;border-top:1px solid var(--stone-800);background:var(--surface)}
.rs-foot [role=status]{flex:1;margin:0;color:var(--muted);font-size:var(--size-small);overflow-wrap:anywhere}

.rs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6)}
.rs-head h3{margin:0;color:var(--text);font:500 var(--size-title) var(--body)}
.rs-sub{margin:10px 0 0;color:var(--accent);font:600 var(--size-caption) var(--head);letter-spacing:.12em;text-transform:uppercase}
.rs-main h5{margin:8px 0 0;color:var(--text-dim);font:600 var(--size-label) var(--head);letter-spacing:.04em}
.rs-main .hint{margin:0;line-height:1.4}
.ruleset-editor label.rs-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;margin:0}
.rs-field>span:not(.pick-field){color:var(--text-dim);font:500 var(--size-label) var(--head)}
.rs-field>small{color:var(--muted);font-size:var(--size-small);line-height:1.35}
.ruleset-editor .rs-main input,.ruleset-editor .rs-main textarea,.ruleset-editor .rs-main select{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px 10px;font-size:var(--size-body)}
/* A model picker keeps room for its chevron, and where the game draws the
   list, for the meters over the field's right end (styles/controls.css). */
.ruleset-editor .rs-main select.pick-select{padding-right:34px}
.ruleset-editor .rs-main .pick-field>select{padding-right:150px}
.ruleset-editor .rs-main textarea{min-height:0;resize:vertical;line-height:1.45}
.ruleset-editor .rs-main input[type=color]{width:64px;padding:3px;min-height:40px}
.ruleset-editor .rs-main input[type=checkbox],.ruleset-editor .rs-main input[type=radio]{flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--accent)}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-5)}
.rs-number input{max-width:140px}
.rs-rows{display:flex;flex-direction:column;gap:var(--space-3)}
.rs-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.rs-row>input,.rs-row>select{flex:1 1 160px;width:auto}
.ruleset-editor .rs-main .rs-small{flex:0 0 76px;width:76px;text-align:center}
.rs-row>span{color:var(--text-dim);font-size:var(--size-small)}
.rs-inline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);color:var(--muted);font-size:var(--size-small)}
.rs-inline select{width:auto;flex:1 1 140px}
.rs-attr{padding:8px 10px;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--surface-low)}
.rs-attr .rs-name{flex:0 1 180px;font-weight:600}
.ruleset-editor label.rs-check{display:inline-flex;flex-direction:row;align-items:center;gap:var(--space-3);margin:0;color:var(--text-dim);font-size:var(--size-small)}
.rs-button{min-height:36px;padding:0 12px;border-radius:var(--radius-md);color:var(--accent-350);font-size:var(--size-label);align-self:flex-start}
.rs-button.danger{color:var(--danger-300);border-color:var(--danger-700)}
.rs-button.primary{color:var(--accent-100)}
.rs-remove{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border-color:var(--stone-750);border-radius:var(--radius-round);color:var(--muted);font:500 18px/1 var(--head)}
.rs-remove:hover{color:var(--danger-300);border-color:var(--danger-700)}
.rs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.rs-box{display:flex;flex-direction:column;gap:var(--space-5);padding:14px;border:1px solid var(--stone-750);border-radius:var(--radius-lg);background:var(--surface-low)}
.rs-box p{margin:0}

.rs-pool{border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--surface-low)}
.rs-pool summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:44px;padding:10px 12px;cursor:pointer}
.rs-pool summary b{color:var(--text);font:600 var(--size-ui) var(--head)}
.rs-pool summary small{color:var(--muted);font-size:var(--size-small)}
.rs-pool[open] summary{border-bottom:1px solid var(--stone-800)}
.rs-pool-body{display:flex;flex-direction:column;gap:var(--space-5);padding:12px}

.rs-steps{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.rs-step{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-color:var(--stone-750);background:var(--surface-low);text-align:left}
.rs-step b{color:var(--text);font:600 var(--size-ui) var(--head)}
.rs-step small{color:var(--muted);font:400 var(--size-small) var(--body);letter-spacing:0}
.rs-step[aria-selected=true]{border-color:var(--accent);background:var(--accent-950)}
.rs-step[aria-selected=true] b{color:var(--accent)}
.rs-split{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--space-8);align-items:start}
.rs-picker{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.rs-list{display:flex;flex-direction:column;max-height:min(60dvh,560px);overflow:auto;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--surface-low)}
.rs-list>button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 11px;border:0;border-bottom:1px solid var(--stone-900);border-radius:0;background:none;text-align:left}
.rs-list>button b{color:var(--text);font:600 var(--size-label) var(--head);overflow-wrap:anywhere}
.rs-list>button small{color:var(--muted);font:400 var(--size-small)/1.3 var(--body);letter-spacing:0;overflow-wrap:anywhere}
.rs-list>button[aria-selected=true]{background:var(--accent-950);box-shadow:inset 3px 0 var(--accent)}
.rs-list>button[aria-selected=true] b{color:var(--accent)}
.rs-list>.hint{padding:10px}
.rs-editor{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.rs-editor-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4)}
.rs-editor-head h4{margin:0;color:var(--accent);font:500 var(--size-title) var(--body);overflow-wrap:anywhere}
.rs-gives{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6)}
.rs-gives>div{display:flex;flex-direction:column;gap:var(--space-3)}
.rs-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.rs-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:2px 4px 2px 10px;border:1px solid var(--stone-750);border-radius:var(--radius-pill);color:var(--text-soft);font:500 var(--size-label) var(--head)}
.rs-chip .rs-remove{width:24px;height:24px;font-size:15px;border:0}
.rs-checks{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:12px 14px 12px 32px;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--surface-low);font-size:var(--size-compact)}
.rs-checks li{line-height:1.4}
.rs-checks li.ok{color:var(--ok)}
.rs-checks li.warn{color:var(--warn)}
.rs-checks button{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:0;text-align:left;text-decoration:underline;text-decoration-color:rgb(var(--accent-rgb) / .4);text-underline-offset:3px;cursor:pointer}
.rs-search{max-width:none}

/* A built-in, read only: lists still pick and search; nothing adds or removes. */
.ruleset-editor.read-only .rs-button,.ruleset-editor.read-only .rs-remove{display:none}

@media(max-width:760px){
  .ruleset-editor{width:100vw;height:100dvh;max-height:none;margin:0}
  .ruleset-editor .dialog-card{border-radius:0;border-width:0}
  .rs-top{padding:12px 14px 10px}
  .rs-top h2{font-size:var(--size-title)}
  .ruleset-editor .rs-section-pick{display:block;margin:0;padding:10px 14px;border-bottom:1px solid var(--stone-800);background:var(--surface-low)}
  .rs-section-pick select{width:100%;min-height:48px;border-color:var(--accent-600);color:var(--accent-100);font:600 var(--size-ui) var(--head)}
  .rs-body{grid-template-columns:1fr}
  .rs-nav{display:none}
  .rs-main{padding:14px 14px 24px}
  .rs-split{grid-template-columns:1fr}
  .rs-list{max-height:40dvh}
  .rs-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .rs-foot [role=status]{flex-basis:100%}
  .rs-foot button{flex:1;min-height:48px}
  .rs-button{min-height:44px}
  .rs-remove{width:40px;height:40px}
}