relmio 0.3.0 → 0.3.1

package/src/ui/styles.css

@@ -28,8 +28,8 @@
     0 12px 36px -14px rgb(13 27 24 / 18%);
   --radius-sm: 0.5rem;
   --radius: 0.875rem;
-  --radius-lg: 1.25rem;
-  --header-height: 3.75rem;
+  --radius-lg: 1rem;
+  --header-height: 3.25rem;
 }
 
 :root[data-theme="dark"] {
@@ -102,8 +102,13 @@ html {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
   min-width: 20rem;
+  height: 100vh;
+  height: 100svh;
   margin: 0;
+  overflow: hidden;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
@@ -126,7 +131,8 @@ select {
 button:focus-visible,
 input:focus-visible,
 select:focus-visible,
-a:focus-visible {
+a:focus-visible,
+summary:focus-visible {
   outline: 3px solid #f2a94a;
   outline-offset: 2px;
 }
@@ -152,21 +158,30 @@ a:focus-visible {
   transform: translateY(0);
 }
 
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* ---------- Header ---------- */
 
 .site-header {
-  position: sticky;
-  top: 0;
-  z-index: 20;
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 0.75rem;
   min-height: var(--header-height);
-  padding: 0.5rem clamp(1rem, 4vw, 3rem);
-  border-bottom: 1px solid rgb(221 227 223 / 75%);
-  background: color-mix(in srgb, var(--background) 82%, transparent);
-  backdrop-filter: blur(14px) saturate(1.4);
-  -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  padding: 0.375rem clamp(1rem, 3vw, 2rem);
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
 }
 
 .brand {
@@ -184,9 +199,6 @@ a:focus-visible {
   height: 1.75rem;
   flex: none;
   border-radius: 0.4375rem;
-  transition:
-    background 180ms var(--ease),
-    box-shadow 180ms var(--ease);
 }
 
 .header-actions {
@@ -266,18 +278,6 @@ a:focus-visible {
   outline-offset: 2px;
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .local-badge {
   display: inline-flex;
   align-items: center;
@@ -300,34 +300,22 @@ a:focus-visible {
   content: "";
 }
 
-/* ---------- Shell & intro ---------- */
+/* ---------- App shell ---------- */
 
 .shell {
-  width: min(100% - 2rem, 62rem);
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(17.5rem, 21rem) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  gap: clamp(1rem, 2vw, 1.5rem);
+  width: min(100% - 2.5rem, 76rem);
   margin: 0 auto;
-  padding: 1.75rem 0 3.5rem;
-}
-
-.intro {
-  max-width: 44rem;
+  padding: clamp(0.75rem, 1.6vh, 1.25rem) 0;
 }
 
-body:not([data-current-step="1"]) .intro {
-  display: none;
-}
-
-body:not([data-current-step="1"]) .shell {
-  padding-top: 1rem;
-}
-
-.eyebrow,
-.step-kicker {
-  margin: 0 0 0.5rem;
-  color: var(--accent);
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+.shell:focus {
+  outline: none;
 }
 
 h1,
@@ -337,80 +325,165 @@ p {
   margin-top: 0;
 }
 
-h1 {
-  max-width: 42rem;
-  margin-bottom: 0.75rem;
-  font-size: clamp(1.9rem, 5vw, 3rem);
-  line-height: 1.04;
-  letter-spacing: -0.045em;
+h3 {
+  margin-bottom: 0.625rem;
+  font-size: 1rem;
+}
+
+/* ---------- Rail: progress & safety context ---------- */
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  min-height: 0;
+  overflow-y: auto;
 }
 
-h2 {
+.intro h1 {
   margin-bottom: 0.5rem;
-  font-size: clamp(1.45rem, 4vw, 1.9rem);
-  line-height: 1.2;
-  letter-spacing: -0.025em;
+  font-size: clamp(1.375rem, 1.125rem + 0.9vw, 1.625rem);
+  line-height: 1.14;
+  letter-spacing: -0.03em;
 }
 
-h3 {
-  margin-bottom: 0.75rem;
-  font-size: 1rem;
+.lede {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  font-size: 0.875rem;
 }
 
-.lede,
-.panel-heading p {
+.steps {
+  padding-top: 0.875rem;
+  border-top: 1px solid var(--border);
+}
+
+.steps ol {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0.125rem 0;
+  list-style: none;
+}
+
+.steps li {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.75rem minmax(0, 1fr);
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.3125rem 0;
   color: var(--text-muted);
+  font-size: 0.8125rem;
 }
 
-.lede {
-  max-width: 42rem;
-  margin-bottom: 0;
-  font-size: 1rem;
+.steps li::before {
+  position: absolute;
+  top: -0.3125rem;
+  left: calc(0.875rem - 1px);
+  width: 2px;
+  height: 0.625rem;
+  background: var(--border);
+  content: "";
+  transition: background 400ms var(--ease);
 }
 
-/* ---------- Toasts ---------- */
+.steps li:first-child::before {
+  display: none;
+}
 
-.toast-stack {
-  position: fixed;
-  top: calc(var(--header-height) + 0.5rem);
-  right: clamp(0.75rem, 3vw, 2rem);
-  z-index: 15;
+.steps li span {
+  position: relative;
+  z-index: 1;
   display: grid;
-  gap: 0.5rem;
-  width: min(25rem, calc(100vw - 1.5rem));
-  max-height: calc(100svh - var(--header-height) - 1rem);
-  overflow-y: auto;
-  pointer-events: none;
+  width: 1.75rem;
+  height: 1.75rem;
+  place-items: center;
+  border: 2px solid var(--border-strong);
+  border-radius: 50%;
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  font-size: 0.75rem;
+  font-weight: 800;
+  transition:
+    border-color 300ms var(--ease),
+    background 300ms var(--ease),
+    color 300ms var(--ease),
+    box-shadow 300ms var(--ease);
+}
+
+.steps li em {
+  font-style: normal;
+  font-weight: 600;
+}
+
+.steps li[aria-current="step"] {
+  color: var(--text);
+}
+
+.steps li[aria-current="step"] em {
+  font-weight: 750;
+}
+
+.steps li[aria-current="step"] span {
+  border-color: var(--accent);
+  color: #fff;
+  background: var(--accent);
+  box-shadow: 0 0 0 4px rgb(19 124 116 / 15%);
 }
 
-.toast {
-  pointer-events: auto;
+.steps li.complete span {
+  border-color: var(--accent);
+  color: transparent;
+  background: var(--accent);
+}
+
+.steps li.complete span::after {
+  position: absolute;
+  color: #fff;
+  font-size: 0.75rem;
+  content: "✓";
+}
+
+.steps li.complete::before,
+.steps li[aria-current="step"]::before {
+  background: var(--accent);
+}
+
+/* ---------- Notices (in-flow, never overlay content) ---------- */
+
+.toast-stack {
+  display: grid;
+  gap: 0.625rem;
+  padding-top: 0.875rem;
+  border-top: 1px solid var(--border);
 }
 
 .safety-note {
   position: relative;
   display: grid;
-  grid-template-columns: 2rem minmax(0, 1fr) auto;
-  gap: 0.25rem 0.875rem;
+  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
+  gap: 0.125rem 0.625rem;
   align-items: start;
   margin: 0;
-  padding: 0.875rem 0.875rem 0.875rem 1rem;
+  padding: 0.625rem 0.625rem 0.625rem 0.75rem;
   border: 1px solid var(--accent-border);
   border-radius: var(--radius);
   background: var(--accent-soft);
   box-shadow: var(--shadow-sm);
+  font-size: 0.8125rem;
 }
 
 .safety-note::before {
   display: grid;
-  width: 2rem;
-  height: 2rem;
+  width: 1.75rem;
+  height: 1.75rem;
   grid-row: span 2;
   place-items: center;
-  border-radius: 0.625rem;
+  border-radius: 0.5rem;
   color: var(--accent-deep);
   background: var(--accent-icon);
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 800;
   content: "✓";
 }
@@ -421,7 +494,6 @@ h3 {
 
 .safety-note span {
   color: var(--accent-copy);
-  font-size: 0.875rem;
 }
 
 .backup-note {
@@ -441,8 +513,8 @@ h3 {
 
 .toast-close {
   display: inline-grid;
-  width: 1.75rem;
-  min-height: 1.75rem;
+  width: 1.625rem;
+  min-height: 1.625rem;
   padding: 0;
   place-items: center;
   border: 0;
@@ -451,7 +523,7 @@ h3 {
   background: transparent;
   box-shadow: none;
   cursor: pointer;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1;
 }
 
@@ -470,113 +542,16 @@ h3 {
   grid-row: 1;
 }
 
-/* ---------- Stepper ---------- */
-
-.steps {
-  margin: 1.5rem 0 0.75rem;
-}
-
-.steps ol {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.steps li {
-  position: relative;
-  display: grid;
-  justify-items: center;
-  gap: 0.4375rem;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  text-align: center;
-}
-
-.steps li::before {
-  position: absolute;
-  top: 0.9375rem;
-  right: 50%;
-  z-index: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--border);
-  content: "";
-  transition: background 400ms var(--ease);
-}
-
-.steps li:first-child::before {
-  display: none;
-}
-
-.steps li span {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  width: 2rem;
-  height: 2rem;
-  place-items: center;
-  border: 2px solid var(--border-strong);
-  border-radius: 50%;
-  background: var(--surface);
-  box-shadow: var(--shadow-sm);
-  font-size: 0.8125rem;
-  font-weight: 800;
-  transition:
-    border-color 300ms var(--ease),
-    background 300ms var(--ease),
-    color 300ms var(--ease),
-    box-shadow 300ms var(--ease);
-}
-
-.steps li em {
-  font-style: normal;
-  font-weight: 600;
-}
-
-.steps li[aria-current="step"] {
-  color: var(--text);
-}
-
-.steps li[aria-current="step"] span {
-  border-color: var(--accent);
-  color: #fff;
-  background: var(--accent);
-  box-shadow: 0 0 0 5px rgb(19 124 116 / 15%);
-}
-
-.steps li.complete span {
-  border-color: var(--accent);
-  color: transparent;
-  background: var(--accent);
-}
-
-.steps li.complete span::after {
-  position: absolute;
-  color: #fff;
-  font-size: 0.8125rem;
-  content: "✓";
-}
-
-.steps li.complete::before,
-.steps li[aria-current="step"]::before {
-  background: var(--accent);
-}
-
-/* ---------- Global messages ---------- */
-
 .message,
 .error {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: 0.625rem;
-  min-height: 3rem;
   margin: 0;
-  padding: 0.75rem;
+  padding: 0.625rem 0.75rem;
   border-radius: var(--radius-sm);
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
 }
 
 .message {
@@ -605,10 +580,12 @@ h3 {
   animation: shake 320ms var(--ease);
 }
 
-/* ---------- Panels ---------- */
+/* ---------- Task panel ---------- */
 
 .panel {
-  padding: clamp(1.25rem, 3vw, 1.75rem);
+  min-height: 0;
+  overflow-y: auto;
+  padding: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface);
@@ -617,19 +594,28 @@ h3 {
 }
 
 .panel-heading {
-  margin-bottom: 1.125rem;
+  margin-bottom: 1rem;
+}
+
+.panel-heading h2 {
+  margin-bottom: 0.375rem;
+  font-size: clamp(1.3rem, 1.125rem + 0.7vw, 1.5rem);
+  line-height: 1.2;
+  letter-spacing: -0.025em;
 }
 
 .panel-heading p {
-  max-width: 42rem;
+  max-width: 44rem;
   margin-bottom: 0;
+  color: var(--text-muted);
+  font-size: 0.9375rem;
 }
 
 .status-row {
   display: flex;
   align-items: flex-start;
   gap: 0.875rem;
-  padding: 1rem 1.125rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-muted);
@@ -670,25 +656,25 @@ h3 {
 .field-grid {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr);
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: 0.875rem;
+  margin-bottom: 0.875rem;
 }
 
 .field-grid.single {
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 30rem);
 }
 
 .field {
   display: grid;
   align-content: start;
-  gap: 0.4375rem;
+  gap: 0.375rem;
   font-weight: 700;
 }
 
 .field input,
 .field select {
   width: 100%;
-  min-height: 2.875rem;
+  min-height: 2.75rem;
   padding: 0.625rem 0.875rem;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-sm);
@@ -754,8 +740,8 @@ code {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.75rem;
-  margin-top: 1.75rem;
+  gap: 0.625rem;
+  margin-top: 1.25rem;
 }
 
 .button {
@@ -764,7 +750,7 @@ code {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  min-height: 2.875rem;
+  min-height: 2.75rem;
   padding: 0.625rem 1.125rem;
   border: 1px solid transparent;
   border-radius: 0.625rem;
@@ -847,8 +833,8 @@ code {
 /* ---------- Fingerprint & approvals ---------- */
 
 .fingerprint {
-  margin-top: 1rem;
-  padding: 1.125rem;
+  margin-top: 0.875rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--warning-border);
   border-radius: var(--radius);
   background: var(--warning-soft);
@@ -866,8 +852,8 @@ code {
 
 .fingerprint > code {
   display: block;
-  margin-bottom: 1rem;
-  padding: 0.625rem 0.75rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 0.75rem;
   border: 1px solid var(--warning-border);
   border-radius: var(--radius-sm);
   background: var(--surface);
@@ -893,15 +879,15 @@ code {
 .version-strip {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.625rem;
-  margin-bottom: 1.25rem;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
 }
 
 .version-strip span {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.4375rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-muted);
@@ -913,11 +899,11 @@ code {
 .review-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: 0.875rem;
 }
 
 .review-grid section {
-  padding: 1.125rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-muted);
@@ -936,9 +922,10 @@ code {
 .check-list,
 .no-list {
   display: grid;
-  gap: 0.625rem;
+  gap: 0.5rem;
   margin: 0;
   padding-left: 1.25rem;
+  font-size: 0.9375rem;
 }
 
 .check-list li::marker {
@@ -950,8 +937,8 @@ code {
 }
 
 .approval {
-  margin-top: 1rem;
-  padding: 1rem 1.125rem;
+  margin-top: 0.875rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--warning-border);
   border-radius: var(--radius);
   background: var(--warning-soft);
@@ -959,35 +946,44 @@ code {
 
 /* ---------- Success ---------- */
 
-.success-panel {
-  position: relative;
+.success-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+.success-heading .panel-heading {
+  margin-bottom: 0;
 }
 
 .success-mark {
   display: grid;
-  width: 3.25rem;
-  height: 3.25rem;
-  margin-bottom: 1.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-top: 0.125rem;
+  flex: none;
   place-items: center;
   border-radius: 50%;
   color: #fff;
-  background: linear-gradient(140deg, #1d8a5f, var(--success));
-  box-shadow: 0 0 0 6px rgb(23 101 63 / 14%);
-  font-size: 1.5rem;
+  background: var(--success);
+  box-shadow: 0 0 0 5px rgb(23 101 63 / 14%);
+  font-size: 1.25rem;
   font-weight: 900;
   animation: pop-in 480ms var(--ease);
 }
 
 .result-list {
+  margin: 0;
   border-top: 1px solid var(--border);
 }
 
 .result-list div {
   display: grid;
-  grid-template-columns: 9rem 1fr;
-  gap: 1rem;
+  grid-template-columns: 8.5rem minmax(0, 1fr);
+  gap: 0.75rem;
   align-items: center;
-  padding: 0.875rem 0;
+  padding: 0.5rem 0;
   border-bottom: 1px solid var(--border);
 }
 
@@ -1005,11 +1001,15 @@ code {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: 0.625rem;
+}
+
+#copy-settings {
+  margin-top: 0.875rem;
 }
 
 .copy-value {
-  min-height: 2.125rem;
+  min-height: 2rem;
   padding: 0.3125rem 0.75rem;
   border-radius: 0.5rem;
   font-size: 0.8125rem;
@@ -1018,7 +1018,7 @@ code {
 .model-box,
 .final-note {
   margin-top: 1rem;
-  padding: 1.125rem;
+  padding: 0.75rem 1rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-muted);
@@ -1033,8 +1033,13 @@ code {
   color: var(--text-muted);
 }
 
+.final-note {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
 .recipe-disclosure {
-  margin-top: 1rem;
+  margin-top: 0.75rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-muted);
@@ -1045,7 +1050,8 @@ code {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  padding: 0.875rem 1rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 1rem;
   cursor: pointer;
   font-weight: 750;
   list-style: none;
@@ -1067,11 +1073,6 @@ code {
   content: "−";
 }
 
-.recipe-disclosure summary:focus-visible {
-  outline: 3px solid #f2a94a;
-  outline-offset: -3px;
-}
-
 .recipe-content {
   margin: 0;
   border: 0;
@@ -1079,6 +1080,10 @@ code {
   border-radius: 0;
 }
 
+.recipe-content .result-list {
+  border-top: 0;
+}
+
 .sample-body-row {
   align-items: start !important;
 }
@@ -1098,12 +1103,19 @@ code {
   line-height: 1.45;
 }
 
+#copy-http-recipe {
+  margin-top: 0.875rem;
+}
+
+/* ---------- Footer ---------- */
+
 footer {
-  padding: 1.5rem 1rem;
+  flex: none;
+  padding: 0.4375rem 1rem;
   border-top: 1px solid var(--border);
   color: var(--text-muted);
   background: var(--surface);
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   text-align: center;
 }
 
@@ -1119,22 +1131,12 @@ footer p {
   box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
 }
 
-:root[data-theme="dark"] .eyebrow,
-:root[data-theme="dark"] .step-kicker {
-  color: var(--accent-bright);
-}
-
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) .brand-mark {
     padding: 0.125rem;
     background: #f7f8f5;
     box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
   }
-
-  :root:not([data-theme]) .eyebrow,
-  :root:not([data-theme]) .step-kicker {
-    color: var(--accent-bright);
-  }
 }
 
 /* ---------- Animations ---------- */
@@ -1183,62 +1185,252 @@ footer p {
   }
 }
 
-/* ---------- Responsive ---------- */
+/* ---------- Small screens: stack rail above the task ---------- */
 
-@media (max-width: 42rem) {
-  .local-badge {
-    display: none;
+@media (max-width: 60rem) {
+  .shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    gap: 0.75rem;
+    width: min(100% - 1.25rem, 44rem);
+    padding: 0.75rem 0;
   }
 
-  .site-header {
-    padding-inline: 1rem;
+  .rail {
+    overflow: visible;
+    gap: 0.625rem;
   }
 
-  .header-actions {
-    gap: 0.375rem;
+  .intro h1 {
+    margin-bottom: 0.25rem;
+    font-size: 1.25rem;
   }
 
-  .shell {
-    width: min(100% - 1rem, 62rem);
-    padding: 1.25rem 0 2.5rem;
+  .lede {
+    font-size: 0.8125rem;
+  }
+
+  .steps {
+    padding-top: 0.625rem;
+  }
+
+  .steps ol {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    padding: 0;
+  }
+
+  .steps li {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    gap: 0.3125rem;
+    padding: 0;
+    font-size: 0.75rem;
+    text-align: center;
+  }
+
+  .steps li::before {
+    top: 0.8125rem;
+    right: 50%;
+    left: auto;
+    width: 100%;
+    height: 2px;
+  }
+
+  .steps li span {
+    width: 1.625rem;
+    height: 1.625rem;
   }
 
   .toast-stack {
-    top: calc(var(--header-height) + 0.375rem);
-    right: 0.5rem;
-    width: calc(100vw - 1rem);
-    gap: 0.375rem;
+    padding-top: 0.625rem;
   }
 
-  .safety-note,
-  .field-grid,
-  .review-grid {
+  .panel {
+    padding: 1rem;
+  }
+}
+
+/* Keep every desktop step visible on common 720–768px laptop displays. */
+@media (min-width: 961px) and (max-height: 768px) {
+  .shell {
+    padding-block: 0.5rem;
+  }
+
+  .rail {
+    gap: 0.625rem;
+  }
+
+  .intro h1 {
+    font-size: 1.375rem;
+  }
+
+  .lede {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .steps {
+    padding-top: 0.5rem;
+  }
+
+  .steps ol {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    padding: 0;
+  }
+
+  .steps li {
     grid-template-columns: 1fr;
+    justify-items: center;
+    gap: 0.25rem;
+    padding: 0;
+    font-size: 0.6875rem;
+    text-align: center;
+  }
+
+  .steps li::before {
+    top: 0.75rem;
+    right: 50%;
+    left: auto;
+    width: 100%;
+    height: 2px;
+  }
+
+  .steps li span {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .toast-stack {
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .safety-note {
+    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
+    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
+    font-size: 0.75rem;
   }
 
   .safety-note::before {
-    grid-row: auto;
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
-  .toast-stack .safety-note {
-    grid-template-columns: 2rem minmax(0, 1fr) auto;
-    align-items: center;
+  .safety-note > span {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
   }
 
-  .toast-stack .safety-note::before {
-    grid-row: auto;
+  .message,
+  .error {
+    padding-block: 0.5rem;
+    font-size: 0.75rem;
   }
 
-  .toast-stack .safety-note > span {
+  .panel {
+    padding: 1rem;
+  }
+
+  .panel-heading {
+    margin-bottom: 0.625rem;
+  }
+
+  .panel-heading h2 {
+    margin-bottom: 0.25rem;
+  }
+
+  .panel-heading p {
+    font-size: 0.875rem;
+  }
+
+  .field-grid {
+    gap: 0.5rem 0.75rem;
+    margin-bottom: 0.625rem;
+  }
+
+  .field {
+    gap: 0.25rem;
+  }
+
+  .field input,
+  .field select {
+    min-height: 2.5rem;
+  }
+
+  .field small {
+    font-size: 0.75rem;
+    line-height: 1.25;
+  }
+
+  .fingerprint {
+    margin-top: 0.625rem;
+    padding: 0.625rem 0.75rem;
+  }
+
+  .fingerprint > code {
+    margin-bottom: 0.5rem;
+    padding-block: 0.375rem;
+  }
+
+  .actions {
+    margin-top: 0.75rem;
+  }
+
+  .button {
+    min-height: 2.5rem;
+  }
+
+  .success-heading,
+  .result-list,
+  #copy-settings,
+  .model-box,
+  .final-note,
+  .recipe-disclosure {
+    margin-top: 0.625rem;
+  }
+
+  .success-heading {
+    margin-bottom: 0.625rem;
+  }
+
+  .result-list div {
+    padding-block: 0.375rem;
+  }
+
+  .model-box,
+  .final-note {
+    padding-block: 0.625rem;
+  }
+}
+
+@media (max-width: 42rem) {
+  .local-badge {
     display: none;
   }
 
-  .steps li em {
-    font-size: 0.6875rem;
+  .site-header {
+    padding-inline: 1rem;
   }
 
-  .panel {
-    border-radius: var(--radius);
+  .header-actions {
+    gap: 0.375rem;
+  }
+
+  .safety-note {
+    align-items: center;
+  }
+
+  .safety-note > span {
+    display: none;
+  }
+
+  .field-grid,
+  .review-grid {
+    grid-template-columns: 1fr;
   }
 
   .actions {
@@ -1261,6 +1453,113 @@ footer p {
   }
 }
 
+@media (max-width: 24rem) {
+  .lede {
+    display: none;
+  }
+}
+
+/* Keep task controls usable in phone landscape and other short, narrow views. */
+@media (max-width: 60rem) and (max-height: 36rem) {
+  .shell {
+    grid-template-rows: auto minmax(7rem, 1fr);
+    gap: 0.5rem;
+    padding-block: 0.5rem;
+  }
+
+  .rail {
+    min-width: 0;
+    gap: 0.375rem;
+    overflow: hidden;
+  }
+
+  .intro {
+    display: none;
+  }
+
+  .steps {
+    padding-top: 0.375rem;
+  }
+
+  .steps li {
+    gap: 0.1875rem;
+    font-size: 0.6875rem;
+  }
+
+  .steps li::before {
+    top: 0.75rem;
+  }
+
+  .steps li span {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .toast-stack {
+    display: flex;
+    min-width: 0;
+    gap: 0.5rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-top: 0.375rem;
+    scroll-padding-inline: 0.125rem;
+    scrollbar-width: thin;
+  }
+
+  .toast-stack .toast {
+    flex: 0 0 min(14rem, calc(100vw - 2.5rem));
+    min-width: 0;
+  }
+
+  .safety-note {
+    grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+    gap: 0.125rem 0.5rem;
+    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .safety-note::before {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .safety-note > span {
+    display: none;
+  }
+
+  .message,
+  .error {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  #global-message-text,
+  .error > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .toast-close {
+    width: 1.5rem;
+    min-height: 1.5rem;
+  }
+
+  .panel {
+    min-height: 7rem;
+    overflow-y: auto;
+    padding: 0.875rem;
+  }
+
+  .panel-heading {
+    margin-bottom: 0.625rem;
+  }
+
+  .panel-heading p {
+    font-size: 0.875rem;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;