fix(calc-02): tighten calculator layout and panel styling

Wrap the display and control buttons in a shared display block so the
stack and button panels align as a single unit. Reduce corner radii and
adjust gaps/padding across the calculator to better fit the updated
portrait and desktop layouts.

samples/calc-02/index.css

@@ -53,9 +53,8 @@ body {
 	width: min(100vw - 24px, 1120px);
 	height: min(100vh - 24px, 900px);
 	display: grid;
-	gap: clamp(10px, 1.4vw, 18px);
 	padding: clamp(12px, 1.8vw, 18px);
-	border-radius: 28px;
+	border-radius: 8px;
 	background: linear-gradient(180deg, var(--panel2), var(--panel));
 	border: 1px solid var(--edge);
 	box-shadow: 0 26px 70px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
@@ -64,28 +63,39 @@ body {
 	align-content: start;
 	grid-template-areas:
 		"display functions"
-		"buttons functions"
+		"display functions"
 		"keypad functions"
 		"keypad trigo";
-
+	row-gap: 0;
-
+	column-gap: clamp(10px, 1.4vw, 18px);
 }
 
+.display-block,
 .display-panel,
 .display-buttons-panel,
 .keypad-panel,
 .functions-panel,
 .trigo-panel,
 .status-line {
-	border-radius: 18px;
+	border-radius: 8px;
 	border: 1px solid rgba(255, 255, 255, 0.06);
 	background: rgba(6, 10, 16, 0.16);
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
-.display-panel {
+.display-block {
 	grid-area: display;
+	display: grid;
+	gap: 0;
+	align-self: start;
+	justify-items: stretch;
+	grid-template-rows: auto auto;
+	row-gap: 0;
+}
+
+.display-panel {
 	position: relative;
+	width: 100%;
 	padding: clamp(12px, 1.5vw, 16px);
 	padding-bottom: clamp(4px, 0.6vw, 8px);
 	background: linear-gradient(180deg, var(--display), var(--display2));
@@ -95,10 +105,18 @@ body {
 	height: auto;
 	min-height: clamp(112px, 18vw, 124px);
 	max-height: none;
-	align-self: start;
 	margin-bottom: 0;
 }
 
+.display-frame {
+	margin: 0;
+	padding: 0;
+}
+
+.display-buttons-panel {
+	margin-top: 0;
+}
+
 .display-grid {
 	height: 100%;
 	display: grid;
@@ -131,7 +149,7 @@ body {
 }
 
 .display-buttons-panel {
-	grid-area: buttons;
+	width: 100%;
 	padding: 8px;
 	display: grid;
 	grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -168,9 +186,10 @@ body {
 	display: grid;
 	gap: 6px;
 	padding: 10px;
-	border-radius: 14px;
+	border-radius: 8px;
 		background: rgba(18, 24, 33, 0.98);
 	border: 1px solid rgba(255, 255, 255, 0.08);
+
 	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
 }
 
@@ -207,6 +226,7 @@ body {
 	align-self: start;
 	min-height: 0;
 	padding-top: 10px;
+	padding-bottom: 8px;
 }
 
 .trigo-panel {
@@ -215,6 +235,7 @@ body {
 	align-self: start;
 	min-height: 0;
 	padding-top: 10px;
+	padding-bottom: 8px;
 }
 
 .status-bar {
@@ -276,8 +297,9 @@ body {
 
 button {
 	border: 1px solid rgba(14, 18, 25, 0.85);
-	border-radius: 12px;
+	border-radius: 8px;
 	padding: 10px 8px;
+
 	font: inherit;
 	font-weight: 700;
 	color: var(--btnText);
@@ -396,10 +418,10 @@ button:active {
 		height: auto;
 		min-height: calc(100vh - 16px);
 		grid-template-columns: 1fr;
-		grid-template-rows: minmax(160px, auto) auto minmax(220px, auto) auto auto;
+		grid-template-rows: minmax(160px, auto) auto auto auto;
+		row-gap: 6px;
 		grid-template-areas:
 			"display"
-			"buttons"
 			"keypad"
 			"functions"
 			"trigo";
@@ -409,6 +431,10 @@ button:active {
 		grid-template-columns: repeat(4, minmax(0, 1fr));
 		grid-template-rows: repeat(2, auto);
 		margin-top: 0;
+		margin-bottom: 0;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		align-content: start;
 	}
 
 	.keypad-grid {
@@ -417,7 +443,7 @@ button:active {
 
 	.functions-grid,
 	.trigo-grid {
-		grid-auto-rows: minmax(0, 1fr);
+		grid-auto-rows: minmax(0, auto);
 		grid-template-rows: repeat(2, minmax(0, 1fr));
 	}
 }
@@ -430,9 +456,9 @@ button:active {
 	.calculator {
 		width: 100%;
 		min-height: calc(100vh - 16px);
-		border-radius: 20px;
+		border-radius: 8px;
 		padding: 10px;
-		gap: 10px;
+		gap: 12px;
 	}
 
 	.display-panel {
@@ -451,7 +477,7 @@ button:active {
 	}
 
 	button {
-		border-radius: 10px;
+		border-radius: 8px;
 		padding: 8px 6px;
 		font-size: 13px;
 		line-height: 1;

samples/calc-02/index.html

@@ -9,6 +9,7 @@
 <body>
 	<main class="app-shell">
 		<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator">
+			<div class="display-block">
 				<div class="display-panel">
 					<div class="status-bar" id="statusLine" aria-live="polite"></div>
 					<div class="display-frame">
@@ -30,6 +31,7 @@
 					<button id="downButton" class="display-button">↓</button>
 					<button id="rightButton" class="display-button">→</button>
 				</div>
+			</div>
 
 			<div class="keypad-panel">
 				<div class="keypad-grid" id="keypadGrid"></div>