fix: naming-scheme short field names ({n}, {s00e00}, etc.) are now real clickable chips

Previously these only appeared as plain, non-clickable <code> text in the hint
paragraph below the field-chip groups, styled almost identically to the real
chips (same tinted-pill background) - a user reported field references as
'not clickable, you have to type it out' after clicking that inert text
instead of the real chips above it. Added a proper 'Short names' chip group
so they're actually clickable, and changed the remaining plain hint-text code
snippets to a dotted underline instead of a pill background so they can't be
mistaken for buttons again.

src/components/RenamePanel.css

@@ -262,14 +262,20 @@
   line-height: 1.5;
 }
 
+/* Deliberately NOT styled like .format-field-chip below (no tinted pill background) -
+   this is plain inline documentation text, not a clickable control, and using the same
+   pill treatment as the real chips made it look interactive when it wasn't. A user
+   reported field references as "not clickable, you have to type it out" after clicking
+   text like this instead of the real chips in .format-fields above; that only happened
+   because the two looked so similar. Underline instead, which reads as "reference text"
+   without implying a click target. */
 .format-hint code,
 .format-editor label code {
-  background: var(--tint-06);
-  border-radius: 4px;
-  padding: 1px 5px;
   font-family: ui-monospace, "SF Mono", monospace;
   font-size: 10.5px;
-  color: var(--text);
+  color: var(--muted-text);
+  text-decoration: underline dotted var(--surface-deep);
+  text-underline-offset: 2px;
 }
 
 .format-hint a {

src/components/RenamePanel.tsx

@@ -1874,6 +1874,24 @@ export default function RenamePanel() {
               <FieldChip token="{md5}" />
               <FieldChip token="{sha1}" />
             </div>
+            {/* Short, FileBot-style aliases for several of the fields above (e.g. {n} is the
+                same value as {show name}/{movie name}) - these previously only appeared as
+                plain, non-clickable <code> text in the paragraph below, which looks almost
+                identical to a real field chip (same tinted-pill styling) and led a user to
+                report field references as "not clickable" when what they'd actually clicked
+                was this inert prose text. Giving the short names their own real chip group
+                fixes that directly instead of just re-explaining it in the hint text. */}
+            <div className="format-fields-group">
+              <span className="format-fields-group-title">Short names (same fields, FileBot-style)</span>
+              <FieldChip token="{n}" />
+              <FieldChip token="{s00e00}" />
+              <FieldChip token="{t}" />
+              <FieldChip token="{y}" />
+              <FieldChip token="{vf}" />
+              <FieldChip token="{vc}" />
+              <FieldChip token="{ac}" />
+              <FieldChip token="{group}" />
+            </div>
           </div>
           <p className="format-hint">
             Match scans filenames locally for season/episode or movie title/year patterns, plus release-tag text
@@ -1896,10 +1914,9 @@ export default function RenamePanel() {
             need their own free API credential set there first). The separate Fetch Data button next to New Names
             still works on its own too, for re-fetching after changing the source or fixing a guessed name by hand. A
             batch can freely mix TV and movie files, even against different sources — each file only fills in the
-            fields that apply to it. Short field names (<code>{"{n}"}</code>, <code>{"{s00e00}"}</code>,{" "}
+            fields that apply to it. The short, FileBot-style field names in the last group above ({"{n}"},{" "}
-            <code>{"{t}"}</code>, <code>{"{y}"}</code>, <code>{"{vf}"}</code>, <code>{"{vc}"}</code>,{" "}
+            {"{s00e00}"}, and the rest) are just aliases for the same values as the human-readable names — use
-            <code>{"{ac}"}</code>, <code>{"{group}"}</code>, etc.) still work too, side by side with the names
+            whichever you prefer, or mix both in one scheme.
-            above.
           </p>
           <p className="format-hint">
             Use <code>{"/"}</code> in the scheme to organize files into subfolders as part of renaming, e.g.{" "}