Settings stand as a sidebar beside the open section on a computer (L43) (#464)

ddiff --git a/public/css/my.css b/public/css/my.css
iindex 867d76c9..642be1f2 100644
---- a/public/css/my.css
++++ b/public/css/my.css
@@@ -39,6 +39,15 @@ body{min-height:100%;color:var(--text);font-family:'Inter',-apple-system,BlinkMa
  }
  .section-tabs button.active{background:var(--bg-card);color:var(--accent-light)}
  .section-tabs button:hover:not(.active){color:var(--text)}
++/* On a computer the tabs stand as a sidebar beside the open section (L43): every setting in view, the page shorter. */
++@media (min-width:1000px){
++    .page{max-width:1080px}
++    .settings{display:grid;grid-template-columns:208px minmax(0,1fr);gap:28px;align-items:start}
++    .settings .section-tabs{position:sticky;top:76px;flex-direction:column;gap:2px;margin:0;padding:6px;overflow:visible}
++    .settings .section-tabs button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13.5px;text-align:left}
++    .settings .section-tabs button i{width:16px;text-align:center;opacity:.85}
++    .settings .section-tabs button.active{box-shadow:inset 3px 0 0 var(--accent)}
++}
  
  /* Approvals (my/approvals.js): one row per waiting request, and the count on its tab */
  .section-tabs .tab-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent, #fff));font-size:11px;line-height:18px;text-align:center}
ddiff --git a/public/my.html b/public/my.html
iindex b62ed189..cc3071d9 100644
---- a/public/my.html
++++ b/public/my.html
@@@ -100,6 +100,8 @@
  
      <h2 class="settings-h" id="settings">Settings</h2>
  
++    <!-- Settings: tabs on a phone, a sidebar beside the open section on a computer (L43, kit.sidebar's shape). -->
++    <div class="settings">
      <div class="section-tabs">
          <button class="active" onclick="showSection('profile',this)"><i class="fa-solid fa-user"></i> Profile</button>
          <button onclick="showSection('themes',this)"><i class="fa-solid fa-palette"></i> Themes</button>
@@@ -421,6 +423,7 @@
              </div>
          </div>
      </div>
++    </div>
  </div>
  
  <!-- Shared scripts -->
ddiff --git a/test/my-today.test.js b/test/my-today.test.js
iindex 1404aeaf..ba163b16 100644
---- a/test/my-today.test.js
++++ b/test/my-today.test.js
@@@ -62,6 +62,9 @@ assert.ok(HTML.indexOf('id="today"') < HTML.indexOf('id="settings"') && HTML.ind
  assert.ok(!/user\.email \? ' · '/.test(PROFILE), 'the email is not beside your name (this page may be on a stream)');
  assert.match(BOOT, /loadToday\(\)/, 'boot starts it');
  assert.match(HTML, /id="coins"/, 'the navbar\'s OpenCoins chip (/my#coins) lands on Your money');
++const CSS = fs.readFileSync(path.join(__dirname, '..', 'public/css/my.css'), 'utf8');
++assert.ok(HTML.indexOf('<div class="settings">') < HTML.indexOf('class="section-tabs"') && HTML.indexOf('class="section-tabs"') < HTML.indexOf('id="sec-anon"'), 'the settings are one block: the tabs, then every section');
++assert.match(CSS, /@media \(min-width:1000px\)\{[\s\S]*\.settings\{display:grid;grid-template-columns:208px minmax\(0,1fr\)/, 'on a computer the tabs are a sidebar beside the open section (L43)');
  
  (async () => {
      // ── Everything at once ──