new paste tab: rework number box submenus (#157)

Give the custom expiry and readable N times submenus a shared boxed
container with proper padding, indent them under their parent option,
and style the number inputs and unit select with palette vars, the
existing radius scale, and the select chevron. No em dashes, no hard
coded colors in new rules.

internal/web/templates/new.html

@@ -46,15 +46,17 @@
         <label><input type="radio" name="exp" value="720h"> 30 days</label>
         <label><input type="radio" name="exp" value="custom"> Custom</label>
       </div>
-      <div class="pw-row hidden" id="customexp-row">
-        <input type="number" id="expnum" min="1" class="input-num" placeholder="90"> 
-        <select id="expunit">
-          <option value="m">minutes</option>
-          <option value="h" selected>hours</option>
-          <option value="d">days</option>
-          <option value="w">weeks</option>
-          <option value="mo">months</option>
-        </select>
+      <div class="pw-row submenu hidden" id="customexp-row">
+        <div class="exp-group">
+          <input type="number" class="num-input" id="expnum" min="1" placeholder="90" aria-label="Custom expiry amount">
+          <select id="expunit" class="unit-select">
+            <option value="m">minutes</option>
+            <option value="h" selected>hours</option>
+            <option value="d">days</option>
+            <option value="w">weeks</option>
+            <option value="mo">months</option>
+          </select>
+        </div>
         <div class="hint danger-hint hidden" id="customexp-err"></div>
       </div>
     </div>
@@ -64,7 +66,7 @@
         <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
         <div class="pw-row hidden" id="pwrow"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
         <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
-        <div class="pw-row hidden" id="burnrow"><label class="hint hint-lg">Readable <input type="number" id="burnreads" min="1" value="1" class="input-num-sm"> times</label></div>
+        <div class="pw-row submenu hidden" id="burnrow"><div class="exp-group readable-group"><label class="hint readable-label">Readable</label><input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable"><label class="hint readable-label">times</label></div></div>
         <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
       </div>
     </div>