/*
 * Copyright 2026 Daakaa Contributors
 * Licensed under the Apache License, Version 2.0
 */

/* ── Reset & Base ───────────────────────────────── */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
 * Colour system — three colours only:
 *   black (#000), white (#fff), one grey (--accent).
 *
 * --accent        : the single grey, user-configurable (default: very light)
 * --accent-text   : #000 or #fff, auto-computed from accent luminance
 * --border        : rgba(0,0,0,X) where X matches --accent on white
 * --border-strong : #000
 *
 * Indicator colours (✓ × 〇 —) are exempt from this constraint.
 */

:root {
	--font: "Sarasa UI CL", "Sarasa Gothic CL", "Noto Sans CJK SC", sans-serif;
	--accent: #e0e0e0;
	--accent-text: #000;
	--border: rgba(0, 0, 0, 0.12);
	--border-strong: #000;
	/* Partial 4-tier rollout — t2/t3/t4 split.
   * --t2: stripe fill (accent at 0.18 opacity on white ≈ #f5f5f5 at default)
   * --t3: header fill (accent at 0.65 opacity — lighter than raw accent)
   * --t3-solid: composited-on-white equivalent of --t3, for opaque backgrounds
   * --t4: interaction state (accent at full opacity)
   * All are overwritten by app.js when the user changes the accent colour. */
	--t2: rgba(224, 224, 224, 0.18);
	--t3: rgba(224, 224, 224, 0.65);
	--t3-solid: #ebebeb;
	--t4: #e0e0e0;
	--sidepanel-w: 280px;
	--cell-h: 26px;
	--cell-min-w: 48px;
	--zoom: 1;
	--table-margin: 16px;

	/* Touch UI system — see docs/design/touch-ui-system.md §2 */
	--touch-input-h:       44px;
	--touch-btn-sm-h:      36px;
	--touch-secondary-h:   36px;   /* alias for --touch-btn-sm-h; used by row-detail group section */
	--touch-tab-h:         40px;
	--touch-handle-h:      20px;
	--touch-px:            14px;
	--touch-field-gap:     12px;
	--touch-checkbox-size: 20px;
	--touch-font-base:     15px;
	--touch-font-input:    16px;
	--touch-font-label:    13px;
	--touch-font-sm:       13px;
	--touch-font-btn:      15px;
	--touch-font-header:   15px;
}

@font-face {
	font-family: "Sarasa UI CL";
	src: local("Sarasa UI CL"),
		local("SarasaUICL-Regular"),
		url("/System/Library/Fonts/SarasaUICL-Regular.ttf") format("truetype"),
		url("/usr/share/fonts/sarasa-gothic/SarasaUICL-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sarasa UI CL";
	src: local("Sarasa UI CL Bold"),
		local("SarasaUICL-Bold"),
		url("/System/Library/Fonts/SarasaUICL-Bold.ttf") format("truetype"),
		url("/usr/share/fonts/sarasa-gothic/SarasaUICL-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

html,
body {
	height: 100%;
	overflow: hidden;
	font-family: var(--font);
	font-size: 14px;
	color: #000;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

input, textarea {
	-webkit-user-select: text;
	user-select: text;
}

/* ── Layout ─────────────────────────────────────── */
#app {
	display: flex;
	height: 100%;
	width: 100%;
}

/* ── Sidepanel (right side) ─────────────────────── */
.sidepanel {
	display: flex;
	flex-direction: row;
	width: var(--sidepanel-w);
	min-width: var(--sidepanel-w);
	height: 100%;
	background: #fff;
	border-left: 1px solid var(--border);
	z-index: 10;
	order: 2;
}

.sidepanel.collapsed {
	width: 20px;
	min-width: 20px;
}

.sidepanel.collapsed .sidepanel-content {
	display: none;
}

/* ── Sidepanel tab strip (toggle) ───────────────── */
.sidepanel-tab {
	width: 20px;
	min-width: 20px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: col-resize;
	border: none;
	background: #fff;
	color: var(--accent);
	font-size: 12px;
	user-select: none;
	flex-shrink: 0;
	font-family: var(--font);
	padding: 0;
}

.sidepanel-tab:hover {
	background: var(--accent);
	color: var(--accent-text);
}

/* ── Sidepanel content — hidden scrollbar ───────── */
.sidepanel-content {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 20px;
	padding-left: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sidepanel-content::-webkit-scrollbar {
	display: none;
}

.sidepanel-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	letter-spacing: .02em;
}

/* ── Panels ─────────────────────────────────────── */
.panel {
	margin-bottom: 8px;
	border: 1px solid var(--border);
	overflow: hidden;
}

.panel-header {
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	background: var(--accent);
	color: var(--accent-text);
	user-select: none;
	list-style: none;
}

.panel-header::-webkit-details-marker {
	display: none;
}

.panel-header::before {
	content: "▸ ";
	font-size: 11px;
}

details[open]>.panel-header::before {
	content: "▾ ";
}

.panel-body {
	padding: 10px;
}

/* ── Fields ─────────────────────────────────────── */
.field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.field:last-child {
	margin-bottom: 0;
}

.field-label {
	font-size: 12px;
	color: #000;
	white-space: nowrap;
	flex-shrink: 0;
}

.field input[type="number"],
.field input[type="text"],
.field select {
	flex: 1;
	min-width: 0;
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 12px;
	background: #fff;
	color: #000;
}

.field input[type="color"] {
	flex: 0 0 40px;
	height: 28px;
	padding: 2px;
	border: 1px solid var(--border);
	background: #fff;
	cursor: pointer;
}

.field input[type="checkbox"] {
	margin: 0;
}

.fieldset {
	border: 1px solid var(--border);
	padding: 10px;
	margin-bottom: 8px;
}

.fieldset:last-child {
	margin-bottom: 0;
}

.fieldset legend {
	font-size: 11px;
	font-weight: 600;
	color: #000;
	padding: 0 4px;
}

/* ── Pattern item in sidebar ────────────────────── */
.pattern-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	border: 1px solid var(--border);
	background: #fff;
	font-size: 12px;
	margin-bottom: 4px;
}

.pattern-item:last-child {
	margin-bottom: 0;
}

.pattern-item select,
.pattern-item input {
	height: 22px;
	padding: 0 4px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 11px;
	background: #fff;
	color: #000;
}

.pattern-item select {
	flex: 1;
	min-width: 0;
}

.pattern-item input[type="number"] {
	width: 44px;
	flex: 0 0 44px;
}

.pattern-item-btn {
	width: 20px;
	height: 20px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	flex-shrink: 0;
	font-family: var(--font);
	padding: 0;
}

.pattern-item-btn:hover {
	color: var(--accent-text);
	background: var(--accent);
}

/* ── Pattern sub-panel editors ─────────────────── */
.pat-custom-editor,
.pat-mapping-editor {
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--border);
	border-top: none;
	background: #fff;
	margin-bottom: 4px;
	max-height: 160px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pat-custom-editor::-webkit-scrollbar,
.pat-mapping-editor::-webkit-scrollbar {
	display: none;
}

.pat-editor-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}

.pat-editor-row:last-child {
	margin-bottom: 0;
}

.pat-editor-row input {
	height: 22px;
	padding: 0 4px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 11px;
	background: #fff;
	color: #000;
	flex: 1;
	min-width: 0;
}

.pat-editor-row .pat-arrow {
	font-size: 11px;
	color: #000;
	flex-shrink: 0;
}

.pat-editor-header {
	display: flex;
	gap: 4px;
	font-size: 11px;
	color: #000;
	opacity: 0.6;
	margin-bottom: 4px;
	padding: 0 4px;
}

/* ── Buttons ────────────────────────────────────── */
.btn {
	height: 28px;
	padding: 0 12px;
	border: 1px solid var(--border);
	background: #fff;
	font-family: var(--font);
	font-size: 12px;
	cursor: pointer;
	color: #000;
}

.btn:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.btn-sm {
	height: 24px;
	padding: 0 8px;
	font-size: 11px;
}

.btn-row {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

/* ── Editor ─────────────────────────────────────── */
.editor {
	flex: 1;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	order: 1;
	background: #fff;
	position: relative;
}

/* ── View mode toggle button ──────────────────────── */
.view-mode-btn {
	position: absolute;
	bottom: 12px;
	left: 12px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	background: #fff;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 6;
	font-family: var(--font);
	color: #000;
}

.view-mode-btn:hover {
	background: var(--t4);
	color: var(--t4-text);
}

.view-mode-btn.active {
	background: #000;
	color: #fff;
}

/* ── Spreadsheet wrapper — hidden scrollbar ─────── */
.spreadsheet-wrapper {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	background: var(--t3-solid);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.spreadsheet-wrapper::-webkit-scrollbar {
	display: none;
}

/* ── Spreadsheet Table ──────────────────────────── */
.spreadsheet {
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	margin: var(--table-margin);
	margin-bottom: calc(var(--table-margin) * 10);
	font-size: calc(15px * var(--zoom));
}

.spreadsheet th,
.spreadsheet td {
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: calc(var(--cell-h) * var(--zoom));
	min-width: calc(var(--cell-min-w) * var(--zoom));
	color: #000;
	background: #fff;
}

/* ── Sticky top row ─────────────────────────────── */
.spreadsheet thead th {
	position: sticky;
	z-index: 3;
	background: var(--t3-solid);
	color: var(--accent-text);
	text-align: center;
	vertical-align: middle;
	font-weight: 400;
	padding: 0 10px;
	user-select: none;
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}

/* Last header row: strong bottom border at content boundary */
.spreadsheet thead tr:last-child th {
	border-bottom: calc(2px * var(--zoom)) solid var(--border-strong);
}

/* ── Sticky left column ─────────────────────────── */
.spreadsheet .sticky-left {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #fff;
	color: #000;
	text-align: left;
	vertical-align: middle;
	padding: 0 10px;
	font-weight: 400;
	user-select: none;
	min-width: calc(80px * var(--zoom));
	max-width: calc(200px * var(--zoom));
	width: auto;
	border-right: calc(2px * var(--zoom)) solid var(--border-strong);
}

/* ── Corner cell ────────────────────────────────── */
.spreadsheet .corner-cell {
	position: sticky;
	left: 0;
	z-index: 4;
	background: var(--t3-solid);
	color: var(--accent-text);
	text-align: center;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 10px;
	min-width: calc(80px * var(--zoom));
	border-bottom: 1px solid var(--border);
	border-right: calc(2px * var(--zoom)) solid var(--border-strong);
}

/* Last-row corner: also strong bottom border at content boundary */
.spreadsheet thead tr:last-child .corner-cell {
	border-bottom: calc(2px * var(--zoom)) solid var(--border-strong);
}

/* ── Editable cell (double-click state) ─────────── */
.spreadsheet .cell-editing {
	padding: 0;
	outline: 2px solid #000;
	outline-offset: -2px;
	overflow: visible;
}

.spreadsheet .cell-editing input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background: #fff;
	font-family: var(--font);
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
	padding: 0 4px;
	color: #000;
}

/* ── Inline edit toolbar (for sticky-left cells) ── */
.cell-edit-toolbar {
	position: absolute;
	z-index: 20;
	display: flex;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
	padding: 2px;
}

.cell-edit-toolbar button {
	width: 24px;
	height: 22px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	font-size: 12px;
	font-family: var(--font);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.cell-edit-toolbar button:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.cell-edit-toolbar button.active {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--border);
}

/* ── Content cells ──────────────────────────────── */
.spreadsheet .content-cell {
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
}

.spreadsheet .content-cell.cell-selected {
	background: rgba(0, 0, 0, 0.08);
}

.spreadsheet.alt-cols td.content-cell.cell-selected:nth-child(even) {
	background: rgba(0, 0, 0, 0.12);
}

body.input-mouse .spreadsheet .content-cell:hover {
	outline: 1px solid rgba(0,0,0,0.5);
	outline-offset: -1px;
}

.spreadsheet .content-cell[data-value="✓"] {
	color: #2d8a4e;
}

.spreadsheet .content-cell[data-value="×"] {
	color: #c0392b;
}

.spreadsheet .content-cell[data-value="〇"] {
	color: #2980b9;
}

.spreadsheet .content-cell[data-value="—"] {
	color: #000;
}

/* Arrow-prefixed content like ←3✓ */
.spreadsheet .content-cell[data-has-arrow="true"] {
	font-size: calc(11px * var(--zoom));
	letter-spacing: -0.5px;
	color: #000;
}

/* ── Alternating column backgrounds ─────────────── */
/*
 * --t2 (rgba at 0.18 opacity) is the passive stripe tint.
 * --t4 (accent at full opacity) is the hover state.
 * They are always distinct — stripe can never swallow the hover.
 */
.spreadsheet.alt-cols td.content-cell:nth-child(even) {
	background: var(--t2);
}

body.input-mouse .spreadsheet.alt-cols td.content-cell:nth-child(even):hover {
	outline: 1px solid rgba(0,0,0,0.5);
	outline-offset: -1px;
}

/* ── Alternating row backgrounds ─────────────────
 * Mirror of alt-cols: stripes every even row (1-based visual)
 * at the same --t2 tier. Intersection with alt-cols stays at t2
 * (no doubled darkening) because both use the same tier.
 */
.spreadsheet.alt-rows tbody tr.alt-stripe td.content-cell {
	background: var(--t2);
}
.spreadsheet.alt-rows.alt-cols tbody tr.alt-stripe td.content-cell:nth-child(even) {
	background: var(--t2);
}
body.input-mouse .spreadsheet.alt-rows tbody tr.alt-stripe td.content-cell:hover {
	outline: 1px solid rgba(0,0,0,0.5);
	outline-offset: -1px;
}

/* ── Drag row visual ────────────────────────────── */
.spreadsheet tr.drag-hidden {
	visibility: collapse;
}

.spreadsheet tr.drag-gap td {
	height: calc(var(--cell-h) * var(--zoom));
	border: none;
	background: transparent;
}

/* ── Right-click context menu ───────────────────── */
.context-menu {
	position: fixed;
	z-index: 100;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	padding: 4px 0;
	min-width: 160px;
	font-size: 12px;
	font-family: var(--font);
	color: #000;
}

.context-menu-item {
	padding: 6px 14px;
	cursor: pointer;
	white-space: nowrap;
	color: #000;
}

.context-menu-item:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.context-menu-item.destructive {
	color: #c0392b;
}

.context-menu-sep {
	height: 1px;
	background: var(--border);
	margin: 4px 0;
}

.context-menu-input-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 12px;
	color: #000;
}

.context-menu-input-row input {
	width: 48px;
	height: 22px;
	padding: 0 4px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 12px;
	color: #000;
	background: #fff;
}

.context-menu-input-row button {
	height: 22px;
	padding: 0 8px;
	border: 1px solid var(--border);
	background: #fff;
	font-family: var(--font);
	font-size: 11px;
	cursor: pointer;
	color: #000;
}

.context-menu-input-row button:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.context-menu-has-sub {
	position: relative;
	cursor: default;
	padding: 6px 14px;
	white-space: nowrap;
	color: #000;
}

.context-menu-has-sub:hover {
	background: var(--t2);
}

.context-menu-sub {
	display: none;
	position: absolute;
	left: 100%;
	top: -4px;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	padding: 4px 0;
	min-width: 140px;
	z-index: 101;
	border-radius: 4px;
}

.context-menu-has-sub:hover > .context-menu-sub {
	display: block;
}

/* Touch: show submenu on tap (via :active or always-open approach) */
body.input-touch .context-menu-has-sub > .context-menu-sub {
	display: block;
	position: relative;
	left: 0;
	box-shadow: none;
	border: none;
	border-top: 1px solid var(--border);
	padding-left: 12px;
}

/* ── Toast notification ─────────────────────────── */
.toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	color: #fff;
	padding: 8px 20px;
	font-size: 13px;
	font-family: var(--font);
	z-index: 200;
	white-space: nowrap;
	opacity: 1;
}

.toast.fade-out {
	opacity: 0;
	transition: opacity 0.3s;
}

/* ── Confirm overlay ────────────────────────────── */
.confirm-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
}

.confirm-box {
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 20px 24px;
	min-width: 280px;
	max-width: 400px;
	font-family: var(--font);
	font-size: 13px;
	color: #000;
}

.confirm-box p {
	margin-bottom: 16px;
	line-height: 1.5;
}

.confirm-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ── Row Details panel ──────────────────────────── */
.row-details-info {
	font-size: 11px;
	color: #000;
}

.row-details-selection {
	padding: 6px 8px;
	border: 1px solid var(--border);
	background: #fff;
	margin-bottom: 8px;
}

.row-detail-name-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 6px;
}

.row-detail-name-input {
	flex: 1;
	min-width: 0;
	height: 22px;
	padding: 0 4px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 12px;
	color: #000;
	background: #fff;
}

.row-detail-toggles {
	display: flex;
	gap: 4px;
}

.row-detail-toggles button {
	width: 28px;
	height: 24px;
	border: 1px solid var(--border);
	background: #fff;
	cursor: pointer;
	font-size: 12px;
	font-family: var(--font);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.row-detail-toggles button:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.row-detail-toggles button.active {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--border);
}

.row-detail-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.row-detail-actions-label {
	font-size: 11px;
}

.row-detail-move-input {
	width: 48px;
	height: 22px;
	padding: 0 4px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 12px;
	color: #000;
	background: #fff;
}

.row-detail-group-section select {
	width: 100%;
}

/* ── History panel body — flex column so tree scrolls, buttons pin at bottom */
.history-panel-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── History panel (undo tree) ──────────────────── */
.history-panel {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	font-size: 11px;
}

.history-panel::-webkit-scrollbar {
	display: none;
}

.history-graph {
	overflow-x: auto;
}

.history-graph svg {
	display: block;
}

.history-graph svg use[stroke-width="4"] {
	transform: translateX(-2px);
}

/* ── Color targets ──────────────────────────────── */

/* "all" mode: sticky-left also gets accent bg */
[data-color-target="all"] .spreadsheet .sticky-left {
	background: var(--t3-solid);
	color: var(--accent-text);
	border-right: calc(2px * var(--zoom)) solid var(--border-strong);
}

/* ── View mode (drag-to-pan) ───────────────────── */
.view-mode {
	cursor: grab;
}

.view-mode:active {
	cursor: grabbing;
}

.view-mode .spreadsheet .content-cell {
	cursor: grab;
}

body.input-mouse .view-mode .spreadsheet .content-cell:hover {
	background: transparent;
	outline: none;
}

body.input-mouse .view-mode .spreadsheet.alt-cols td.content-cell:nth-child(even):hover {
	background: var(--t2);
	outline: none;
}

/* ── Add-row strip ─────────────────────────────── */
.spreadsheet .add-row-cell {
	height: calc(var(--cell-h) * var(--zoom) * 0.6);
	border: none;
	background: transparent;
	cursor: default;
}

body.input-mouse .spreadsheet .add-row-cell:hover {
	background: var(--t2);
	cursor: pointer;
}

/* ── Bottom-panel elements: hidden on desktop ──── */
.bottom-panel-handle,
.bottom-panel-tabs {
	display: none;
}

/* ── Responsive: iPad ───────────────────────────── */
@media (max-width: 1024px) {
	:root {
		--sidepanel-w: 260px;
	}
}

@media (max-width: 768px) {
	#app {
		flex-direction: column;
	}

	.sidepanel {
		order: 2;
		flex-direction: column;
		width: 100% !important;
		min-width: 100% !important;
		height: 240px;
		min-height: 40px;
		max-height: 70vh;
		border-left: none;
		border-top: 1px solid var(--border);
	}

	.sidepanel.collapsed {
		height: 40px;
		min-height: 40px;
	}

	body.input-touch .sidepanel.collapsed {
		height: calc(var(--touch-tab-h) + var(--touch-handle-h));
		min-height: calc(var(--touch-tab-h) + var(--touch-handle-h));
	}

	/* Hide the right-side tab strip in bottom mode */
	.sidepanel-tab {
		display: none;
	}

	/* Show bottom-panel elements */
	.bottom-panel-handle {
		display: block;
		height: 8px;
		cursor: row-resize;
		background: transparent;
		flex-shrink: 0;
		position: relative;
	}

	.bottom-panel-handle::after {
		content: '';
		position: absolute;
		top: 3px;
		left: 50%;
		transform: translateX(-50%);
		width: 36px;
		height: 3px;
		background: rgba(0,0,0,0.25);
		border-radius: 2px;
	}

	.bottom-panel-tabs {
		display: flex;
		flex-shrink: 0;
		height: 32px;
		background: var(--t3-solid);
		border-bottom: 1px solid var(--border);
	}

	.bottom-tab {
		flex: 1 1 0;
		border: none;
		background: transparent;
		font-family: var(--font);
		font-size: 12px;
		font-weight: 400;
		cursor: pointer;
		color: #000;
		opacity: 0.55;
		border-bottom: 2px solid transparent;
		padding: 0;
	}

	.bottom-tab:hover {
		background: var(--t4);
		opacity: 0.8;
	}

	.bottom-tab.active {
		border-bottom-color: #000;
		font-weight: 600;
		opacity: 1;
	}

	/* Sidepanel content in bottom mode */
	.sidepanel-content {
		padding: 0;
		/* In column-flex bottom mode, force scroll container height to 0
		   so flex:1 + overflow-y:auto activates scrolling on WebKit. */
		height: 0;
	}

	.sidepanel.collapsed .sidepanel-content {
		display: none;
	}

	/* Hide the title in bottom mode */
	.sidepanel-content .sidepanel-title {
		display: none;
	}

	/* Tab content: hide all panels, show only active */
	.sidepanel-content .panel {
		display: none;
	}

	.sidepanel-content .panel.active-tab {
		display: block;
		border: none;
		margin: 0;
	}

	/* Hide the panel header (summary) in bottom mode — tabs replace it */
	.sidepanel-content .panel.active-tab > .panel-header {
		display: none;
	}

	/* The panel body doesn't need extra wrapper */
	.sidepanel-content .panel.active-tab > .panel-body {
		padding: 10px;
	}

	.editor {
		flex: 1;
		min-height: 0;
	}
}

/* ── Touch UI System (body.input-touch) ─────────────
 * All touch-specific sizing and typography rules.
 * Layout (panel position) is handled by @media (max-width: 768px) above.
 * See docs/design/touch-ui-system.md for the spec.
 */

/* §1 — Typography (1.125 modular scale, base 15px) */
body.input-touch .panel-header {
	font-size: var(--touch-font-header);
}

body.input-touch .sidepanel-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

body.input-touch .field-label {
	font-size: var(--touch-font-label);
	line-height: 1.4;
}

body.input-touch .fieldset legend {
	font-size: var(--touch-font-label);
	font-weight: 600;
	line-height: 1.3;
}

/* §2 — Standard input/select/button sizing (44px) */
body.input-touch .field {
	min-height: var(--touch-input-h);
	margin-bottom: var(--touch-field-gap);
}

body.input-touch .field:last-child {
	margin-bottom: 0;
}

body.input-touch .field input[type="text"],
body.input-touch .field input[type="number"],
body.input-touch .field select {
	height: var(--touch-input-h);
	padding: 0 var(--touch-px);
	font-size: var(--touch-font-input);
}

body.input-touch .field input[type="color"] {
	flex: 0 0 var(--touch-input-h);
	height: var(--touch-input-h);
	padding: 4px;
}

body.input-touch .field input[type="checkbox"] {
	width: var(--touch-checkbox-size);
	height: var(--touch-checkbox-size);
	accent-color: #000;
}

body.input-touch .btn {
	height: var(--touch-input-h);
	padding: 0 var(--touch-px);
	font-size: var(--touch-font-btn);
}

body.input-touch .btn-sm {
	height: var(--touch-btn-sm-h);
	padding: 0 10px;
	font-size: var(--touch-font-sm);
}

body.input-touch .btn-row {
	gap: 8px;
}

/* History undo/redo buttons — touch only, pinned at top of panel */
.history-actions {
	display: none;
}
body.input-touch .history-actions {
	display: flex;
	gap: 6px;
	padding-bottom: 4px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 1;
	background: #fff;
}
body.input-touch .history-actions .btn-sm {
	flex: 1;
}

/* §3 — Bottom panel drag handle (touch only) */
body.input-touch .bottom-panel-handle {
	height: var(--touch-handle-h);
}

body.input-touch .bottom-panel-handle::after {
	top: 8px;
	width: 40px;
	height: 4px;
	background: rgba(0, 0, 0, 0.35);
}

body.input-touch .bottom-panel-tabs {
	height: var(--touch-tab-h);
}

body.input-touch .bottom-tab {
	font-size: var(--touch-font-label);
	padding: 0 4px;
	flex: 1 1 0;
}

body.input-touch .bottom-panel-tabs {
	gap: 0;
}

body.input-touch .bottom-tab.active {
	font-weight: 600;
}

/* §3 — Sidepanel toggle strip (right-panel mode) */
body.input-touch .sidepanel-tab {
	width: 32px;
	min-width: 32px;
	font-size: 14px;
}

body.input-touch .sidepanel.collapsed {
	width: 32px;
	min-width: 32px;
}

/* §4.3 — Header Patterns panel */
body.input-touch .pattern-item {
	font-size: var(--touch-font-label);
}

body.input-touch .pattern-item select,
body.input-touch .pattern-item input {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
	padding: 0 8px;
}

body.input-touch .pattern-item input[type="number"] {
	width: 64px;
	flex: 0 0 64px;
}

body.input-touch .pattern-item-btn {
	width: var(--touch-btn-sm-h);
	height: var(--touch-btn-sm-h);
	font-size: var(--touch-font-label);
}

body.input-touch .pat-custom-editor,
body.input-touch .pat-mapping-editor {
	max-height: 200px;
}

body.input-touch .pat-editor-row {
	gap: 8px;
}

body.input-touch .pat-editor-row input {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
	padding: 0 8px;
}

body.input-touch .pat-editor-header {
	font-size: var(--touch-font-label);
}

/* §4.4 — Row Details panel */
body.input-touch .row-details-info {
	font-size: var(--touch-font-label);
	line-height: 1.5;
}

body.input-touch .row-detail-name-input {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
	padding: 0 8px;
}

body.input-touch .row-detail-toggles button {
	width: var(--touch-input-h);
	height: var(--touch-input-h);
	font-size: var(--touch-font-btn);
}

/* §4.4b — Row Details: move-to and group section */
body.input-touch .row-detail-actions-label {
	font-size: var(--touch-font-label);
}

body.input-touch .row-detail-move-input {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
	width: 60px;
	padding: 0 8px;
}

body.input-touch .row-detail-group-section select {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
}

body.input-touch .row-detail-group-section .btn-sm {
	height: var(--touch-secondary-h);
	font-size: var(--touch-font-sm);
}

/* §4.5 — History panel */
body.input-touch .history-panel-body {
	overflow-y: auto;
	overflow-x: hidden;
}
body.input-touch .history-panel {
	font-size: var(--touch-font-label);
	max-height: none;
	overflow-y: visible;
}

/* §7 — Context menu */
body.input-touch .context-menu {
	font-size: var(--touch-font-base);
	min-width: 200px;
}

body.input-touch .context-menu-item {
	padding: 10px 16px;
}

body.input-touch .context-menu-input-row {
	font-size: var(--touch-font-base);
}

body.input-touch .context-menu-input-row input {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
	width: 60px;
}

body.input-touch .context-menu-input-row button {
	height: var(--touch-input-h);
	font-size: var(--touch-font-sm);
}

/* §6 — Touch active/pressed states (replace hover) */
body.input-touch .btn:active,
body.input-touch .btn-sm:active,
body.input-touch .pattern-item-btn:active,
body.input-touch .bottom-tab:active,
body.input-touch .panel-header:active,
body.input-touch .context-menu-item:active,
body.input-touch .row-detail-toggles button:active,
body.input-touch .sidepanel-tab:active {
	background: var(--t4);
	color: var(--accent-text);
}

/* §6 — Focus ring for external keyboards on iPad */
body.input-touch :focus-visible {
	outline: 2px solid #000;
	outline-offset: 1px;
}

/* §2b — Inline cell-edit toolbar (sticky-left cells) */
body.input-touch .cell-edit-toolbar button {
	width: var(--touch-btn-sm-h);
	height: var(--touch-btn-sm-h);
	font-size: var(--touch-font-sm);
}

/* §2c — View mode floating action button */
body.input-touch .view-mode-btn {
	width: var(--touch-input-h);
	height: var(--touch-input-h);
	font-size: 20px;
}

/* §4b — Cell editor sub-panel typography */
body.input-touch .cell-editor-label {
	font-size: var(--touch-font-sm);
}

body.input-touch .cell-editor-hint {
	font-size: var(--touch-font-sm);
}

/* ── Cell editor sub-panel (Row Details) ─────────── */
.row-cell-separator {
	border: none;
	border-top: 1px solid var(--border);
	margin: 8px 0;
}

.row-cell-editor {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 6px;
}

.cell-editor-label {
	font-size: 11px;
	color: #000;
}

.cell-editor-hint {
	font-size: 11px;
	color: #666;
}

.cell-value-buttons {
	display: flex;
	gap: 4px;
}

.cell-val-btn {
	flex: 1;
	min-width: 0;
	height: 28px;
	border: 1px solid var(--border);
	background: #fff;
	color: #000;
	font-family: var(--font);
	font-size: 14px;
	cursor: pointer;
	padding: 0;
}

.cell-val-btn:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.cell-val-btn.active {
	background: var(--accent);
	color: var(--accent-text);
}

body.input-touch .cell-val-btn {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
}

.arrow-count-editor {
	display: flex;
	align-items: center;
	gap: 6px;
}

.arrow-count-editor .arrow-count-input {
	flex: 1;
	min-width: 0;
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--border);
	font-family: var(--font);
	font-size: 12px;
	background: #fff;
	color: #000;
}

body.input-touch .arrow-count-editor .arrow-count-input {
	height: var(--touch-input-h);
	font-size: var(--touch-font-input);
	padding: 0 var(--touch-px);
}

.arrow-count-editor .arrow-count-dec,
.arrow-count-editor .arrow-count-inc {
	width: 36px;
	flex: 0 0 36px;
}

body.input-touch .arrow-count-editor .arrow-count-dec,
body.input-touch .arrow-count-editor .arrow-count-inc {
	width: var(--touch-input-h);
	flex: 0 0 var(--touch-input-h);
}

/* ── Corner label + Selected header fields ───────── */
.corner-label-field .corner-label-input::placeholder,
.selected-header-field .selected-header-input::placeholder {
	color: #888;
	font-style: italic;
}

.corner-label-clear,
.selected-header-clear {
	flex: 0 0 auto;
	width: 28px;
	padding: 0;
}

body.input-touch .corner-label-clear,
body.input-touch .selected-header-clear {
	width: var(--touch-btn-sm-h);
}

/* ── Touch hit-area container for floating action buttons ── */
.view-mode-container {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 6;
	display: flex;
	gap: 8px;
	padding: 12px;
}

.view-mode-container .view-mode-btn {
	position: static;
}

/* ── Task 2: Last-saved timestamp display ──────────── */
.last-saved-display {
	font-size: 11px;
	color: #666;
	text-align: center;
	padding: 2px 0;
	white-space: nowrap;
	flex-shrink: 0;
}

body.input-touch .last-saved-display {
	font-size: var(--touch-font-label);
	padding: 4px 0;
}

/* ── Group header rows ─────────────────────────────────────────── */

.spreadsheet tr.group-header-row {
	cursor: pointer;
}

.spreadsheet tr.group-header-row td {
	background: var(--t2);
	border-bottom: calc(1px * var(--zoom)) solid var(--border);
	height: calc(var(--cell-h) * var(--zoom));
}

/* ── Named vs. system section headers ──────────────────────────── */

.spreadsheet tr.group-header-row[data-group-type="named"] td {
	border-top: calc(1px * var(--zoom)) solid var(--border-strong);
}

.spreadsheet tr.group-header-row[data-group-type="pinned"] td,
.spreadsheet tr.group-header-row[data-group-type="other"] td {
	border-top: calc(1px * var(--zoom)) solid var(--border);
	opacity: 0.75;
}

/* ── Sticky-left label cell ─────────────────────────────────────── */

.spreadsheet td.group-header-label {
	background: var(--t3-solid);
	padding: 0 8px 0 6px;
	overflow: hidden;
	white-space: nowrap;
}

.spreadsheet td.group-header-label > * {
	display: inline;
	vertical-align: middle;
}

.spreadsheet td.group-header-label .group-toggle {
	margin-right: 6px;
}


[data-color-target="all"] .spreadsheet td.group-header-label {
	background: var(--t3-solid);
}

.group-header-row[data-group-type="named"] .group-header-label {
	cursor: grab;
}

/* ── Toggle indicator ───────────────────────────────────────────── */

.spreadsheet .group-toggle {
	font-size: calc(9px * var(--zoom));
	line-height: 1;
	display: inline;
	vertical-align: middle;
	color: inherit;
	opacity: 0.7;
}

/* ── Group label text ───────────────────────────────────────────── */

.spreadsheet .group-label-text {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline;
	vertical-align: middle;
}

.spreadsheet tr.group-header-row[data-group-type="pinned"] .group-label-text,
.spreadsheet tr.group-header-row[data-group-type="other"] .group-label-text {
	font-weight: 500;
}

/* ── Summary text (inline within group-header-label) ───────────── */

.spreadsheet .group-summary-text {
	font-size: calc(11px * var(--zoom));
	opacity: 0.55;
	letter-spacing: 0.01em;
	white-space: nowrap;
	margin-left: 8px;
}

/* ── Drag hover feedback (cross-group drag target) ──────────────── */

.spreadsheet tr.group-header-row.drag-target-group td.group-header-label {
	border-left: calc(3px * var(--zoom)) solid var(--border-strong);
	padding-left: calc(3px * var(--zoom) + 6px);
}

/* ── Empty group visual ─────────────────────────────────────────── */

.spreadsheet tr.group-header-row.group-empty .group-label-text {
	opacity: 0.45;
}
.spreadsheet tr.group-header-row.group-empty .group-toggle {
	opacity: 0.3;
}

/* ── Selected group header (sidepanel selection) ────────────────── */

.spreadsheet tr.group-header-row.group-header-selected td.group-header-label {
	border-left: calc(3px * var(--zoom)) solid var(--border-strong);
	padding-left: calc(3px * var(--zoom) + 6px);
}

/* ── Touch adaptations (body.input-touch) ───────────────────────── */

body.input-touch .spreadsheet tr.group-header-row td {
	height: var(--touch-input-h);
}

body.input-touch .spreadsheet .group-toggle {
	font-size: calc(11px * var(--zoom));
}

body.input-touch .spreadsheet .group-summary-text {
	font-size: 12px;
}

body.input-touch .spreadsheet .group-label-text {
	font-size: var(--touch-font-base);
}