/*
    Copyright (c) 2025 KYU @ https://github.com/KYU49

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
*/

body {
	font-family: 'Noto Sans Regular', Arial, sans-serif;
	margin: 20px;
	background: #f5f5f5;
}
input[type="text"] {
	font-family: 'Noto Sans Regular', Arial, sans-serif;
	min-width: 4em;
}

.hide {
	display: none;
}
.hidden {
	display: none;
}

h1 {
	color: #333;
}

ul {
	padding-left: 1em;
	margin: 0;
}
ul li{
	padding: 0.3em 0;
}

math {
	padding: 1em 0;
}

.conc-input {
	width: 3em;
}

.input-row {
	display: flex;
	gap: 0.5em;
	align-items: stretch;	/* 高さを揃える */
}

.input-block {
	display: flex;
	flex-direction: column;
	flex: 1;
}

textarea {
	font-family: 'Noto Sans Mono', 'Noto Sans Regular', Arial, sans-serif;
	white-space: nowrap;	/* 改行しない */
	overflow-x: auto;		/* 横スクロール */
	resize: vertical;		/* 縦方向リサイズ可 */
	line-height: 1.5em;		/* 行間を調整 */
}

.abs-textarea {
	flex: 1;	/* 高さをラベル以外で揃える */
	width: 10em;	/* absは狭め */
}

label {
	margin-right: 15px;
}
.bold {
	font-weight: bold;
}

button {
	margin: 5px 10px 15px 0;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	background: #ab1c23;
	color: white;
}

#sequence{
	font-family: "Firge", 'NOTO Sans Mono', monospace, Arial, sans-serif;
}

button:disabled {
	background: #aaa;
	cursor: not-allowed;
}

#results {
	overflow-x: auto;
}

table {
	border-collapse: collapse;
	width: 100%;
	background: white;
	margin: 0.5em 0 0.3em 0;
}

th, td {
	overflow-x: hidden!important;
	text-overflow: ellipsis;
	border: 1px solid #ccc;
	padding: 6px 10px;
	text-align: center;
	max-width: 25em;
}

th {
	background: #eee;
}

.abs-input {
	width: 3em;
	text-align: center;
}

.auto-width-table {
    table-layout: auto; /* デフォルトだが明示的に指定 */
    width: auto;        /* 内容に合わせる */
    border-collapse: collapse; /* optional: 枠線を詰めたい場合 */
}
.auto-width-table td, th{
    padding: 4px 10px; /* 必要に応じて調整 */
    white-space: nowrap; /* 長いテキストを折り返さずに幅を決める */
}

/* 画面全体を覆う暗い背景 */
.modal-overlay {
	border: 1px solid #ab1c23;
	padding: 0;
}
.modal-overlay::backdrop {
	background-color: rgba(0, 0, 0, 0.8);
}
.modal-box {
	background-color: rgb(240, 240, 255);
	max-width: 80vw;
	overflow-wrap: anywhere;
	line-height: 1.5em;
	padding: 40px 60px;
}