/* v31.1 «الإعدادات»: list of groups on the side, one group at a time */
.v28-settings.set-tabbed{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start;max-width:1120px}
.v28-settings.set-tabbed>.v28-day-head,.v28-settings.set-tabbed>header,.v28-settings.set-tabbed>.page-heading{grid-column:1/-1}
.set-tabbed .v28-set-nav{position:sticky;top:90px;display:flex!important;flex-direction:column;gap:2px;padding:8px!important;border-radius:16px;background:var(--surface);border:1px solid var(--border);overflow:visible!important}
.set-tabbed .v28-set-nav button{border:0;background:none;color:var(--muted);font:inherit;font-size:14px;text-align:start;padding:10px 12px;border-radius:10px;cursor:pointer}
.set-tabbed .v28-set-nav button:hover{background:var(--surface-2);color:var(--text)}
.set-tabbed .v28-set-nav button[aria-current="true"]{background:var(--surface-2);color:var(--text);font-weight:700;box-shadow:inset 3px 0 0 var(--s-acc,var(--text))}
.set-tabbed .set-body{min-width:0;display:flex;flex-direction:column;gap:16px}
.set-tabbed .set-body>section{margin:0!important}
.set-tabbed .set-body>section[hidden]{display:none!important}
/* the page switches: two columns, so the list is half as long */
.set-tabbed #set-sections{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.set-tabbed #set-sections>h2,.set-tabbed #set-sections>p,.set-tabbed #set-sections>.set-sub,.set-tabbed #set-sections>#set-areas{grid-column:1/-1}
@media (max-width:860px){.v28-settings.set-tabbed{grid-template-columns:1fr}.set-tabbed .v28-set-nav{position:static;flex-direction:row;overflow-x:auto!important}.set-tabbed .v28-set-nav button{white-space:nowrap}.set-tabbed #set-sections{grid-template-columns:1fr}}
/* v31.7 settings search */
.set-search{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted)}
.set-search input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:13px;padding:9px 0;outline:none}
.set-search input::-webkit-search-cancel-button{display:none}
.set-search:focus-within{border-color:var(--text)}
.set-search button{border:0;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:2px 4px}
.set-tabbed .v28-set-nav button.set-dim{opacity:.4}
.set-searching .set-body>section[data-set-hit]{display:block}
.set-searching [data-set-miss]{display:none!important}
.set-noresult{padding:18px;color:var(--muted);text-align:center}
@media (max-width:860px){.set-search{min-width:170px;margin:0 0 0 6px}}
/* v31.7 «المظهر» calmer: the three small choices side by side on top, the colours under them */
@media (min-width:861px){
 .set-tabbed #set-look{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;align-items:stretch}
 .set-tabbed #set-look>h2{grid-column:1/-1}
 .set-tabbed #set-look>.v28-set-row{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;margin:0 0 12px}
 .set-tabbed #set-look>.v28-set-row:has(.ss-picks){grid-column:1/-1;order:9;border:0;padding:6px 0 0;border-top:1px solid var(--border);border-radius:0;margin:0}
 .set-tabbed #set-look>.v28-set-row:has(.ss-picks)>:first-child{width:100%}
}
.set-search{box-sizing:border-box;width:100%;max-width:100%}
@media (min-width:861px){.set-tabbed #set-look>.v28-set-row:has(.ss-picks){flex-direction:column;align-items:stretch}}
@media (min-width:861px){.set-tabbed #set-look>.v28-set-row:has(.ss-picks)>*{width:100%;max-width:none;margin-inline:0}.set-tabbed #set-look .ss-picks{justify-content:flex-start}}
@media (min-width:861px){.set-tabbed #set-look .v28-set-control:has(.ss-picks){flex-direction:column;align-items:stretch}.set-tabbed #set-look .v28-set-control:has(.ss-picks)>div{width:100%}}
/* phones: a settings row never makes the page wider than the screen (the colour picks wrap under their title) */
@media (max-width:860px){
 .v28-set-row:has(.ss-picks){flex-direction:column;align-items:stretch}
 .v28-set-row>*{min-width:0;max-width:100%}
 .v28-set-control{flex-wrap:wrap;max-width:100%}
 .v28-set-control:has(.ss-picks),.v28-set-control:has(.ss-picks)>div{width:100%}
 .ss-picks,.ss-note{max-width:100%}
}