v0.315.0: style the app page's tab bar, and reuse the hero classes that already have rules

FOUND IN A BROWSER, and findable no other way. Every endpoint-level marker passed and the page was
unusable: the tab bar rendered as four bare underlined links run together, and the app logo filled a
third of the screen. The shell had been written with new class names — app-hero, app-hero-logo,
app-tabs — and only the first two of those had any CSS at all, under the names the design system
already uses.

  - the shell now reuses .app-info-hero / .app-info-logo / .app-info-hero-text, which carry the
    80px logo box, the hairline border and the 2px radius. Inventing a parallel name is what left
    the logo unsized; REUSE.md's first rule, learned again.
  - .app-tabs / .app-tab / .app-tab-active are genuinely new and are now styled to design system
    v2: 2px radius, hairline --line border, no shadow, --text-2 for an inactive tab and
    --blue-bright only for the one the household is on (blue marks where you are, not a deviation),
    the active tab sitting on the bar's own line, and a narrower gutter under 640px.
  - .after-start-card gets a blue left hairline — it is a request, not a fault, so no amber.
  - .app-faq gets its dt/dd rules.

TestAppPage_DeployedDefaultsToSettings sliced the header at `class="app-hero"`; it now slices at the
reused class and fails loudly if either marker is gone, instead of slicing on -1. The 36 app-page
parity fixtures are recaptured — and no other fixture moved, which is the evidence that the shell
change reaches only the app page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0117kRTSgs3rJWUFGxyoWN6Y

controller/internal/web/templates/app_shell.html

@@ -28,11 +28,11 @@
     </div>
 </div>
 
-<div class="app-hero">
-    <img class="app-hero-logo" src="{{logoURL .Meta.Slug}}"
+<div class="app-info-hero">
+    <img class="app-info-logo" src="{{logoURL .Meta.Slug}}"
          alt="{{.Meta.DisplayName}}" data-fallback="/static/app-placeholder.svg"
          onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Meta.Slug}}';}else if(this.dataset.fallback&&this.dataset.step==='1'){this.dataset.step='2';this.src=this.dataset.fallback;}else{this.onerror=null;this.style.visibility='hidden';}">
-    <div class="app-hero-text">
+    <div class="app-info-hero-text">
         {{if .AppInfo.Tagline}}<p class="app-info-tagline">{{.AppInfo.Tagline}}</p>{{else}}<p class="app-info-tagline">{{.Meta.Description}}</p>{{end}}
         <div class="stack-meta-badges">
             <span class="meta-badge">~{{.Meta.Resources.MemRequest}} RAM</span>

controller/internal/web/templates/style.css

@@ -1300,6 +1300,50 @@ a.stat-card:hover {
 .login-footer a:hover { color: var(--blue); }
 
 /* --- App Info Page --- */
+/* THE APP PAGE'S TAB BAR (v0.315.0) — links, not panels.
+   Design system v2: 2px radius, hairline borders, no shadow, and blue reserved for the tab the
+   household is ON. An inactive tab is --text-2: a tab bar is navigation, not a deviation. */
+.app-tabs {
+    display: flex;
+    gap: .25rem;
+    flex-wrap: wrap;
+    margin: 1.25rem 0 1.5rem;
+    border-bottom: 1px solid var(--line);
+}
+.app-tab {
+    padding: .55rem 1rem;
+    color: var(--text-2);
+    text-decoration: none;
+    font-size: .9rem;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: var(--radius) var(--radius) 0 0;
+    /* The bar's own 1px line is what the active tab sits on, so each tab reaches it. */
+    margin-bottom: -1px;
+    white-space: nowrap;
+}
+.app-tab:hover { color: var(--text-1); background: var(--bg-1); }
+.app-tab-active {
+    color: var(--blue-bright);
+    background: var(--bg-1);
+    border-color: var(--line);
+    border-bottom: 1px solid var(--bg-1);
+}
+.app-tab-active:hover { color: var(--blue-bright); }
+@media (max-width: 640px) {
+    .app-tabs { gap: 0; }
+    .app-tab { padding: .55rem .6rem; font-size: .85rem; }
+}
+
+/* „Még egy lépés" — a value the app wants once it is running (Part 4). It is a request, not a
+   fault, so it stays neutral: the blue hairline marks it as the thing to do next. */
+.after-start-card { border-left: 2px solid var(--blue); }
+
+/* The guide's FAQ. */
+.app-faq { margin: .5rem 0 0; }
+.app-faq dt { color: var(--text-1); font-weight: 600; margin-top: .85rem; }
+.app-faq dd { color: var(--text-2); margin: .25rem 0 0; padding: 0; }
+
 .app-info-hero {
     display: flex;
     align-items: center;