Box the API tokens in Settings

Asked for: the API tokens section of Settings sits in the same rounded box as a feed's download
settings, set apart from the rest of the dialog.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- In Settings, the API tokens sit in a box of their own.
 - A feed's settings are redesigned: downloading on its own is a switch with what depends on it beneath, how many is Default, Newest or All shown on a strip of the show's own episodes, words to pick or hide are chips, the feed's address is at the top with a copy button, and Save is always in reach. Its folder and Directory category are no longer in it.
 - The feed list's traces show each of its database queries, so it can be told where its time goes.
 - Saving a feed's settings asks the database for your subscription once, not twice.

web/app.css

@@ -1085,6 +1085,8 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
    when it is off. In --line, not --edge, so the box shows on a phone, which draws no outlines. The
    rows in a grid of one row, 1fr open and 0fr shut, so the fold has a height to move. */
 .fdl{border:1px solid var(--line);border-radius:12px;padding:4px 14px}
+/* The same box round a part of a dialog that stands apart: API tokens in Settings. */
+.field.boxed{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
 .fdeps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
 .fdeps.off{grid-template-rows:0fr}
 .fdeps>div{min-height:0;overflow:hidden}
@@ -1349,7 +1351,7 @@ body:has(#player.on) #status{padding-bottom:3px}
   .chips{background:var(--panel2);border-color:var(--edge);border-radius:10px}
   .chip{background:var(--panel);font-size:15px;padding:5px 4px 5px 12px}
   .chipx{width:26px;height:26px}
-  .fdl{border-radius:14px;padding:4px 14px}
+  .fdl,.field.boxed{border-radius:14px}
   .toast{border-radius:14px}
 }
 @keyframes sheet{from{transform:translateY(100%)}}

web/src/dialogs.ts

@@ -387,7 +387,7 @@ async function prefsModal(){
       <span class="hint">Comma separated words or phrases, in every feed you read. An item with
       one in its title or text is hidden from you and not downloaded for you. Each feed's
       settings can add more.</span></div>
-    <div class="field"><label for="tokname">API tokens</label>
+    <div class="field boxed"><label for="tokname">API tokens</label>
       <div id="tokens"></div>
       <div class="inline"><input type="text" id="tokname" placeholder="What it is for">
         <button class="btn" id="tokadd" title="Make an API token" aria-label="Make an API token">${ICON.plus} Make</button></div>