Simplify share button

hdyc-svelte/src/lib/components/Calculator.svelte

@@ -18,6 +18,9 @@
   let swapState: { originalField: 1 | 2; originalValue: string } | null = null;
   let copyStatus: 'idle' | 'copied' | 'failed' = 'idle';
   let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+  let copyStatusMessage = '';
+  let hasInputs = false;
+  let hasInputs = false;
 
   $: has3 = ['3col', '3col-mul'].includes(config.type) || !!config.labels.in3;
   $: isTextInput = ['base', 'text-bin', 'bin-text', 'dec-frac', 'dms-dd', 'dd-dms'].includes(config.type);
@@ -104,6 +107,19 @@
     }
   }
 
+  $: hasInputs =
+    Boolean(
+      val1.trim() ||
+        val2.trim() ||
+        (has3 && val3.trim())
+    );
+  $: copyStatusMessage =
+    copyStatus === 'copied'
+      ? 'Link copied to clipboard'
+      : copyStatus === 'failed'
+        ? 'Failed to copy link'
+        : '';
+
   onMount(() => {
     const params = new URLSearchParams($page.url.search);
     if (params.has('v1')) { val1 = params.get('v1')!; handleInput(1); }
@@ -182,15 +198,16 @@
   </div>
 
   <div class="calc-footer">
+    <div class="footer-controls">
       <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
         Clear
       </button>
       <button
         type="button"
-      class="link-btn"
+        class="icon-btn"
         on:click={copyLink}
         aria-label="Copy calculator link"
-      disabled={!val1 && !val2 && !(val3 && has3)}
+        disabled={!hasInputs}
       >
         <svg viewBox="0 0 24 24" role="presentation" aria-hidden="true">
           <path
@@ -202,13 +219,11 @@
             stroke-linejoin="round"
           />
         </svg>
-      Link
-      {#if copyStatus === 'copied'}
-        <span class="status-badge">Copied</span>
-      {:else if copyStatus === 'failed'}
-        <span class="status-badge">Failed</span>
-      {/if}
       </button>
+      <span class="sr-only" aria-live="polite">
+        {copyStatusMessage}
+      </span>
+    </div>
     {#if config.factor && config.type === 'standard'}
       <span class="formula-hint">
         1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}
@@ -348,6 +363,13 @@
     padding: 1rem 2rem 1.25rem;
     border-top: 1px solid var(--border);
   }
+  .footer-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+  }
+
   .clear-btn {
     padding: 0.5rem 1.25rem;
     border: 1px solid var(--border);
@@ -367,39 +389,42 @@
     outline: none;
     box-shadow: 0 0 0 3px var(--accent-glow);
   }
-  .link-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.5rem 1rem;
+  .icon-btn {
+    width: 40px;
+    height: 40px;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--section-bg);
     color: var(--text);
-    font-size: 0.85rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s;
   }
-  .link-btn svg {
-    width: 1rem;
-    height: 1rem;
+  .icon-btn svg {
+    width: 1.1rem;
+    height: 1.1rem;
   }
-  .link-btn:disabled {
+  .icon-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .link-btn:not(:disabled):hover {
+  .icon-btn:not(:disabled):hover {
     border-color: var(--accent);
     background: var(--surface-hover);
   }
-  .status-badge {
-    font-size: 0.7rem;
-    background: var(--accent);
-    color: #fff;
-    border-radius: 999px;
-    padding: 0.05rem 0.55rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
   .formula-hint {
     font-size: 0.78rem;