/* ==========================================================================
   中山僑聯 活動報名 — refreshed design system
   --------------------------------------------------------------------------
   Built from "中山僑聯 UI 改版 Mockups" (25 screens). This sheet OWNS the
   public pages' layout: base.html no longer loads the Untree.co theme, so
   nothing here is an override — every rule states the design directly.

   The manager panel (mockups 11-25) is in here too: manage/base_manage.html
   extends the public base.html, so those pages load this sheet and nothing else.
   refresh.css is the superseded predecessor and is no longer linked anywhere.

   Palette   teal #005555 · ink #12312f · paper #f5f4f0
   Type      Work Sans (latin) + Noto Sans TC (漢字)
   Radius    8 / 11 / 14
   ========================================================================== */

:root {
	--ocs-teal: #005555;
	--ocs-teal-dark: #003f3f;
	--ocs-teal-bright: #008080;
	--ocs-teal-tint: #f0f6f5;
	--ocs-teal-line: #cfe0df;

	--ocs-ink: #12312f;
	--ocs-body: #3a4a49;
	--ocs-muted: #6b7b7a;
	--ocs-faint: #8a9998;
	--ocs-disabled: #a8b4b3;

	--ocs-paper: #f5f4f0;
	--ocs-card: #ffffff;
	--ocs-line: #e6e2da;
	--ocs-line-soft: #eef0ef;
	--ocs-field-line: #d6d6d6;

	--ocs-ok: #1a7a4c;
	--ocs-ok-bg: #e6f4ec;
	--ocs-warn: #b98600;
	--ocs-warn-bg: #fdf4e0;
	--ocs-danger: #c0392b;
	--ocs-danger-bg: #fdeceb;
	--ocs-info: #0d7c8c;
	--ocs-info-bg: #e4f4f6;

	--ocs-r-sm: 8px;
	--ocs-r-md: 11px;
	--ocs-r-lg: 14px;

	--ocs-nav-h: 66px;

	--ocs-font: "Work Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ocs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

body {
	font-family: var(--ocs-font);
	color: var(--ocs-body);
	background-color: var(--ocs-paper);
	text-wrap: pretty;
	/* Short pages (permission denied, empty manager lists) used to leave the
	   footer floating mid-screen. The content band grows instead.
	   短頁面時讓內容區撐開，頁尾固定在視窗底部。 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	/* mobile browsers with collapsing toolbars */
}

body>.section {
	flex: 1 0 auto;
}

/* margin-top:auto pins the footer even on a page whose content is not in
   .section, so this does not depend on which sibling grows.
   頁尾以 auto 上邊界固定在底部，不依賴內容區塊。 */
body>.site-footer {
	flex-shrink: 0;
	margin-top: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ocs-font);
	color: var(--ocs-ink);
	letter-spacing: .01em;
}

h1 {
	font-weight: 800;
}

h2,
h3 {
	font-weight: 700;
}

a {
	color: var(--ocs-teal);
	text-decoration: none;
}

a:hover {
	color: var(--ocs-teal-bright);
}

.ocs-muted {
	color: var(--ocs-muted);
}

.ocs-faint {
	color: var(--ocs-faint);
}

/* The content wrapper base.html puts around every {% block content %}. */
.section {
	padding-top: 44px;
	padding-bottom: 48px;
}

/* --------------------------------------------------------------------------
   2. Navigation — flush teal bar, in normal flow above the hero (mockup 01)
   -------------------------------------------------------------------------- */

.ocs-nav {
	background-color: var(--ocs-teal);
	position: relative;
	z-index: 20;
}

.ocs-nav-inner {
	height: var(--ocs-nav-h);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ocs-brand {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.ocs-brand:hover {
	color: #fff;
}

.ocs-brand-sub {
	font-weight: 500;
	opacity: .65;
	font-size: 15px;
}

.ocs-brand-sub::before {
	content: "|";
	margin-right: 8px;
	opacity: .7;
}

.ocs-brand-member {
	font-size: 11.5px;
	font-weight: 700;
	color: #ffd76a;
	border: 1px solid rgba(255, 215, 106, .5);
	border-radius: 999px;
	padding: 1px 8px;
}

.ocs-nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 28px;
}

.ocs-nav-links>li {
	position: relative;
}

.ocs-nav-links>li>a {
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
	opacity: .8;
	transition: opacity .18s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.ocs-nav-links>li>a:hover,
.ocs-nav-links>li.active>a {
	color: #fff;
	opacity: 1;
}

.ocs-nav-links .dropdown-toggle::after {
	margin-left: 2px;
	vertical-align: .18em;
}

.ocs-nav-user {
	opacity: .9;
}

.ocs-tag {
	font-size: 10.5px;
	font-weight: 600;
	background: rgba(255, 255, 255, .2);
	border-radius: 4px;
	padding: 1px 6px;
}

.ocs-dropdown {
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	box-shadow: 0 14px 34px -20px rgba(0, 60, 60, .45);
	padding: 6px;
	margin-top: 10px;
}

.ocs-dropdown .dropdown-item {
	border-radius: var(--ocs-r-sm);
	font-size: .9rem;
	color: var(--ocs-body);
	padding: 9px 12px;
}

.ocs-dropdown .dropdown-item:hover {
	background-color: var(--ocs-teal-tint);
	color: var(--ocs-teal);
}

/* Language pill (mockup 01: outlined chip in the bar). */
.ocs-lang-form {
	margin: 0;
}

.ocs-lang-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	padding: 3px 13px;
	transition: background-color .2s ease, color .2s ease;
}

.ocs-lang-btn:hover,
.ocs-lang-btn:focus-visible {
	background-color: #fff;
	color: var(--ocs-teal);
}

.ocs-nav-toggle {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	padding: 4px 2px;
}

/* Mobile off-canvas (mockup 24). */
.ocs-offcanvas {
	background-color: var(--ocs-teal);
	color: #fff;
	max-width: 82vw;
}

.ocs-offcanvas .offcanvas-header {
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ocs-offcanvas .offcanvas-title {
	color: #fff;
	font-weight: 700;
}

.ocs-offcanvas-links {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.ocs-offcanvas-links>li+li {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.ocs-offcanvas-links>li>a {
	color: #fff;
	display: block;
	padding: 13px 2px;
	font-size: 15px;
	font-weight: 500;
}

.ocs-offcanvas-links>li>a:hover {
	color: #fff;
	opacity: .75;
}

/* --------------------------------------------------------------------------
   3. Hero — solid band under the nav, content centred (mockup 01)
   -------------------------------------------------------------------------- */

.ocs-hero {
	position: relative;
	min-height: 260px;
	padding: 40px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--ocs-teal-dark);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ocs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 55, 55, .55), rgba(0, 45, 45, .78));
}

.ocs-hero>* {
	position: relative;
	z-index: 1;
}

.ocs-hero-eyebrow {
	color: rgba(255, 255, 255, .8);
	font-size: clamp(.875rem, 1.4vw, 1.0625rem);
	letter-spacing: .3em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.ocs-hero h1 {
	color: #fff;
	font-size: clamp(2.5rem, 6.5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .02em;
	margin: 0;
}

.ocs-hero-sub {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	line-height: 1.7;
	max-width: 520px;
	margin: 16px auto 0;
}

@media (max-width: 575.98px) {
	.ocs-hero {
		min-height: 190px;
		padding: 26px 18px;
	}

	.ocs-hero-eyebrow {
		font-size: 14px;
		margin-bottom: 8px;
	}

	.ocs-hero-sub {
		font-size: 14px;
		margin-top: 12px;
	}
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
	border-radius: var(--ocs-r-sm);
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none;
	padding: 9px 20px;
	font-size: 14px;
}

.btn-primary,
.btn-primary:visited {
	background-color: var(--ocs-teal);
	border-color: var(--ocs-teal);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--ocs-teal-dark);
	border-color: var(--ocs-teal-dark);
	color: #fff;
}

.btn-outline-primary {
	color: var(--ocs-teal);
	border-color: var(--ocs-teal-line);
	background-color: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	background-color: var(--ocs-teal);
	border-color: var(--ocs-teal);
	color: #fff;
}

.btn-lg {
	font-size: 15.5px;
	padding: 12px 26px;
	border-radius: 10px;
}

.btn-sm {
	font-size: 13px;
	padding: 6px 14px;
}

.btn:focus-visible {
	outline: 2px solid var(--ocs-teal-bright);
	outline-offset: 2px;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Section headings
   -------------------------------------------------------------------------- */

.ocs-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.ocs-section-head h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0;
}

.ocs-count {
	font-size: 13.5px;
	color: var(--ocs-muted);
}

/* --------------------------------------------------------------------------
   6. Cards & panels
   -------------------------------------------------------------------------- */

.ocs-card {
	background: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ocs-card-pad {
	padding: 24px 26px;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

.ocs-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ocs-ink);
	margin-bottom: 6px;
}

.form-control,
.form-select {
	border: 1px solid var(--ocs-field-line);
	border-radius: var(--ocs-r-sm);
	padding: 10px 13px;
	font-size: 14.5px;
	color: var(--ocs-ink);
	background-color: #fff;
}

.form-control::placeholder {
	color: var(--ocs-disabled);
}

/* Bootstrap pulls the "Choose File" button out with margin:-.375rem -.75rem,
   which assumes Bootstrap's own field padding. Ours is 10px 13px, so the grey
   button sat inset instead of flush with the field edges. Match the real padding.
   選擇檔案按鈕的負邊界需與欄位內距一致，否則會偏移。 */
.form-control[type="file"]::file-selector-button {
	padding: 10px 13px;
	margin: -10px -13px;
	margin-inline-end: 13px;
}

.form-control[type="file"]::-webkit-file-upload-button {
	padding: 10px 13px;
	margin: -10px -13px;
	-webkit-margin-end: 13px;
	margin-inline-end: 13px;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--ocs-teal);
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .12);
}

.form-control:disabled,
.form-control[readonly] {
	background-color: #f4f5f5;
	color: var(--ocs-muted);
}

.ocs-help {
	font-size: 12.5px;
	color: var(--ocs-faint);
	margin-top: 5px;
}

.ocs-error {
	font-size: 12.5px;
	color: var(--ocs-danger);
	margin-top: 5px;
}

/* --------------------------------------------------------------------------
   8. Status pills
   -------------------------------------------------------------------------- */

.ocs-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
}

.ocs-pill--ok {
	background: var(--ocs-ok-bg);
	color: var(--ocs-ok);
}

.ocs-pill--warn {
	background: var(--ocs-warn-bg);
	color: var(--ocs-warn);
}

.ocs-pill--danger {
	background: var(--ocs-danger-bg);
	color: var(--ocs-danger);
}

.ocs-pill--info {
	background: var(--ocs-info-bg);
	color: var(--ocs-info);
}

.ocs-pill--teal {
	background: var(--ocs-teal-tint);
	color: var(--ocs-teal);
}

.ocs-pill--neutral {
	background: var(--ocs-line-soft);
	color: var(--ocs-muted);
}

/* Solid member-only flag used on event titles (mockup 01). */
.ocs-flag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--ocs-danger);
	border-radius: 5px;
	padding: 2px 7px;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   9. Event cards (mockup 01 / 24)
   -------------------------------------------------------------------------- */

.ocs-event-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

@media (max-width: 991.98px) {
	.ocs-event-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 575.98px) {
	.ocs-event-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

.ocs-event-card {
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	overflow: hidden;
	background: var(--ocs-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}

.ocs-event-card:hover {
	box-shadow: 0 14px 30px -18px rgba(0, 60, 60, .45);
	transform: translateY(-2px);
}

/* 16:9 matches the ratio the cover image is cropped at on the edit page. */
/* 與編輯頁封面裁切比例 16:9 一致。 */
.ocs-event-poster {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ocs-line-soft);
	overflow: hidden;
}

.ocs-event-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ocs-event-body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ocs-event-title {
	font-size: 17.5px;
	font-weight: 700;
	color: var(--ocs-ink);
	line-height: 1.3;
	margin-bottom: 12px;
}

.ocs-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	color: #5c6c6b;
	font-size: 13.5px;
	margin-bottom: 18px;
}

.ocs-event-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ocs-event-meta i {
	color: var(--ocs-teal-bright);
}

.ocs-event-body .btn {
	align-self: flex-start;
	margin-top: auto;
}

@media (max-width: 575.98px) {
	.ocs-event-body {
		padding: 13px 14px 15px;
	}

	.ocs-event-title {
		font-size: 15.5px;
		margin-bottom: 8px;
	}

	.ocs-event-meta {
		font-size: 12.5px;
		gap: 12px;
		margin-bottom: 13px;
	}
}

/* --------------------------------------------------------------------------
   10. Pagination (mockup 01: round teal current page)
   -------------------------------------------------------------------------- */

.ocs-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 34px;
}

.ocs-pagination a,
.ocs-pagination span {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ocs-line-soft);
	color: #5c6c6b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 500;
	transition: background-color .18s ease, color .18s ease;
}

.ocs-pagination a:hover {
	background: var(--ocs-teal-tint);
	color: var(--ocs-teal);
}

.ocs-pagination .active {
	background: var(--ocs-teal);
	color: #fff;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Empty & result states (mockup 09)
   -------------------------------------------------------------------------- */

.ocs-empty {
	background: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	padding: 54px 30px;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.ocs-empty-icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--ocs-teal-tint);
	color: var(--ocs-teal);
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}

.ocs-empty h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 8px;
}

.ocs-empty p {
	font-size: 14px;
	color: var(--ocs-muted);
	line-height: 1.7;
	margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   12. Login card (mockup 02)
   -------------------------------------------------------------------------- */

.ocs-hero-sm {
	min-height: 170px;
	padding: 30px 24px;
}

.ocs-hero-sm h1 {
	font-size: clamp(2rem, 4.5vw, 2.75rem);
}

.ocs-hero-sm .ocs-hero-eyebrow {
	font-size: clamp(.8125rem, 1.4vw, 1rem);
	margin-bottom: 8px;
}

.ocs-login {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	background: #fbfbfb;
	border: 1px solid #ececec;
	border-radius: var(--ocs-r-lg);
	padding: 30px 26px;
	box-shadow: 0 8px 28px -12px rgba(0, 0, 0, .18);
}

.ocs-login-title {
	text-align: center;
	font-size: 21px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0 0 22px;
}

.ocs-login .field-group {
	margin-bottom: 16px;
}

.ocs-login .form-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--ocs-ink);
	font-size: 14px;
	margin-bottom: 7px;
}

.ocs-login .form-label i {
	color: var(--ocs-teal);
}

.ocs-login .form-control,
.ocs-login .form-select {
	border-radius: 10px;
}

.ocs-login .btn-submit {
	display: block;
	width: 100%;
	font-size: 15px;
	padding: 11px;
	border-radius: 9px;
	margin-top: 6px;
}

.ocs-login-divider {
	border-top: 1px solid #ececec;
	margin: 22px 0 18px;
}

.ocs-login-alt {
	text-align: center;
}

.ocs-login-alt p {
	font-size: 12.5px;
	color: var(--ocs-muted);
	margin: 0 0 10px;
}

.ocs-login-alt .btn {
	font-size: 12.5px;
	padding: 5px 14px;
}

/* --------------------------------------------------------------------------
   13. Event detail (mockup 03)
   -------------------------------------------------------------------------- */

/* Breadcrumb band, sitting directly under the nav. */
.ocs-crumbbar {
	background: linear-gradient(180deg, rgba(0, 55, 55, .72), rgba(0, 45, 45, .82)), var(--ocs-teal);
	color: #fff;
	font-size: 14px;
	padding: 22px 0;
}

.ocs-crumbbar a {
	color: rgba(255, 255, 255, .75);
}

.ocs-crumbbar a:hover {
	color: #fff;
}

.ocs-crumb-sep {
	opacity: .5;
	margin: 0 10px;
}

/* Banner slider frame (mockup 03: rounded 16:6 band above the detail grid). */
.img-property-slide-wrap {
	position: relative;
	border-radius: var(--ocs-r-lg);
	overflow: hidden;
	margin-bottom: 30px;
	background: var(--ocs-line-soft);
}

/* 3:1 matches the ratio the banner image is cropped at on the edit page. */
/* 與編輯頁橫幅裁切比例 3:1 一致。 */
.img-property-slide {
	aspect-ratio: 3 / 1;
	position: relative;
}

.img-property-slide img {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-property-slide img.is-active {
	display: block;
}

.ocs-banner-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	color: var(--ocs-faint);
	font-size: 14px;
}

.banner-nav {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

.banner-nav-btn {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 44px;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, .10);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	transition: background .2s ease;
}

.banner-nav-btn:hover {
	background: rgba(0, 0, 0, .28);
}

.banner-nav-prev {
	left: 0;
}

.banner-nav-next {
	right: 0;
}

@media (max-width: 575.98px) {
	.img-property-slide {
		aspect-ratio: 3 / 1;
	}

	.banner-nav-btn {
		width: 32px;
		font-size: 1.3rem;
	}
}

.ocs-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 38px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.ocs-detail-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

.ocs-detail-date {
	color: #7a8a8a;
	font-size: 14px;
	margin-bottom: 6px;
}

.ocs-detail h1 {
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	font-weight: 800;
	color: var(--ocs-teal);
	line-height: 1.2;
	margin: 0 0 26px;
}

.ocs-detail h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0 0 6px;
}

.ocs-detail p {
	font-size: 16px;
	color: var(--ocs-body);
	margin: 0 0 22px;
}

.ocs-detail-value {
	font-size: 15px;
	line-height: 1.75;
	color: #4a5a59;
}

.ocs-detail-value p {
	font-size: 15px;
	margin-bottom: 12px;
}

/* Ticket-selection rail. */
.ocs-rail {
	border: 1px solid #e0ddd4;
	border-radius: 16px;
	padding: 22px;
	background: #fdfcfa;
	box-shadow: 0 12px 34px -26px rgba(0, 60, 60, .55);
}

@media (min-width: 992px) {

	/* Bounded height because the ticket-editor rail can hold a long form preview
	   under the card; without it a long field list runs off the viewport. */
	.ocs-rail-sticky {
		position: sticky;
		top: 22px;
		max-height: calc(100vh - 44px);
		overflow-y: auto;
	}
}

.ocs-rail-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ocs-faint);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.ocs-rail .list-group {
	border: 0;
}

.ocs-choice {
	border: 1px solid #e0ddd4;
	border-radius: var(--ocs-r-md);
	padding: 15px 16px;
	margin-bottom: 11px;
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.ocs-choice:hover {
	border-color: var(--ocs-teal-line);
}

.ocs-choice.active {
	border: 2px solid var(--ocs-teal);
	background: var(--ocs-teal-tint);
	color: inherit;
}

.ocs-choice.is-disabled {
	opacity: .62;
	pointer-events: none;
}

.ocs-choice-name {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ocs-ink);
}

.ocs-choice-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--ocs-teal);
	margin-top: 3px;
}

.ocs-choice-desc {
	font-size: 13px;
	color: var(--ocs-muted);
	margin-top: 6px;
	line-height: 1.45;
	word-break: break-word;
}

.ocs-choice-meta {
	font-size: 12.5px;
	color: var(--ocs-muted);
	margin-top: 4px;
}

/* Registration-form preview in the ticket editor's rail. Deliberately muted so it
   reads as a picture of the student's form, not a second form to fill in.
   票券編輯頁的報名表單預覽，刻意做淡以避免誤認為可填寫的表單。 */
.ocs-formpreview {
	border: 1px dashed #d8d4c9;
	border-radius: var(--ocs-r-md);
	padding: 15px 16px;
	background: #fff;
	pointer-events: none;
	opacity: .85;
}

.ocs-formpreview> :last-child {
	margin-bottom: 0;
}

.ocs-formpreview .form-label {
	font-size: 13.5px;
	margin-bottom: 5px;
}

.ocs-formpreview .ocs-fieldset-title {
	margin-top: 14px;
	margin-bottom: 8px;
}

.ocs-formpreview>.ocs-fieldset-title:first-child {
	margin-top: 0;
}

.ocs-formpreview .form-control,
.ocs-formpreview .form-check-input {
	background-color: #f7f6f2;
}

.ocs-formpreview .form-check-label {
	font-size: 13.5px;
}

.ocs-rail .btn-primary {
	font-size: 15px;
	font-weight: 700;
	padding: 13px;
	border-radius: var(--ocs-r-md);
}

/* Mobile bottom action bar (mockup 24). */
.ocs-stickybar {
	display: none;
}

@media (max-width: 991.98px) {
	.ocs-stickybar {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		background: #fff;
		border-top: 1px solid var(--ocs-line);
		padding: 12px 15px;
		box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .3);
	}

	.ocs-stickybar .ocs-choice-name {
		flex: 1;
		font-size: 14px;
	}

	.ocs-stickybar .btn {
		padding: 11px 22px;
		border-radius: 10px;
	}

	/* Keep the footer clear of the fixed bar. */
	body:has(.ocs-stickybar) .site-footer {
		padding-bottom: 96px;
	}
}

/* --------------------------------------------------------------------------
   14. Registration flow: step tracker + summary rail (mockups 04, 05)
   -------------------------------------------------------------------------- */

.ocs-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 34px;
}

.ocs-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ocs-disabled);
	white-space: nowrap;
}

.ocs-step .n {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	background-color: #e7eae9;
	color: var(--ocs-faint);
	flex: none;
}

.ocs-step.is-current {
	color: var(--ocs-teal);
	font-weight: 700;
}

.ocs-step.is-current .n,
.ocs-step.is-done .n {
	background-color: var(--ocs-teal);
	color: #fff;
}

.ocs-step.is-done {
	color: var(--ocs-body);
}

.ocs-step-line {
	width: 44px;
	height: 2px;
	background-color: #cdd8d7;
	flex: none;
}

.ocs-step-line.is-done {
	background-color: var(--ocs-teal);
}

@media (max-width: 575.98px) {
	.ocs-step-line {
		width: 20px;
	}

	.ocs-step {
		font-size: .78rem;
	}
}

/* Two-column flow layout: event summary rail + the task itself. */
.ocs-flowgrid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.ocs-flowgrid--payment {
	grid-template-columns: 250px minmax(0, 1fr);
}

@media (max-width: 991.98px) {

	.ocs-flowgrid,
	.ocs-flowgrid--payment {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

.ocs-side {
	background-color: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	padding: 20px;
}

.ocs-side-poster {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	margin-bottom: 16px;
}

.ocs-side h3 {
	font-size: 1.19rem;
	font-weight: 800;
	color: var(--ocs-teal);
	margin: 0 0 10px;
}

.ocs-side-meta {
	font-size: .84rem;
	line-height: 1.9;
	color: var(--ocs-body);
}

.ocs-side-meta b {
	color: var(--ocs-ink);
	font-weight: 600;
}

.ocs-side-box {
	background-color: #fdfcfa;
	border: 1px solid #e0ddd4;
	border-radius: var(--ocs-r-md);
	padding: 14px 16px;
	margin-top: 16px;
}

.ocs-side-box h5 {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ocs-faint);
	margin: 0 0 8px;
}

.ocs-form-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0 0 22px;
}

.ocs-fieldset-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 26px 0 4px;
	padding-top: 18px;
	border-top: 1px solid var(--ocs-line-soft);
}

.ocs-flowgrid .form-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ocs-ink);
	margin-bottom: 6px;
}

.ocs-req {
	color: var(--ocs-danger);
	font-weight: 700;
}

.ocs-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 575.98px) {
	.ocs-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.ocs-flowgrid .form-check {
	margin-bottom: 7px;
}

.ocs-flowgrid .form-check-input:checked {
	background-color: var(--ocs-teal);
	border-color: var(--ocs-teal);
}

.ocs-flowgrid .form-check-input:focus {
	border-color: var(--ocs-teal);
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .12);
}

.ocs-flowgrid .form-check-label {
	font-size: 14px;
	color: var(--ocs-body);
}

/* The task column sits on its own card so it reads as the thing to do. */
.ocs-flowgrid>div:last-child>form,
.ocs-flowgrid>div:last-child>.ocs-formcard {
	background-color: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	padding: 26px;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--ocs-ink);
	color: rgba(255, 255, 255, .62);
	padding: 44px 0 38px;
	font-size: 13.5px;
}

.site-footer p {
	margin-bottom: 6px;
}

.site-footer a {
	color: rgba(255, 255, 255, .82);
	text-decoration: underline;
}

.site-footer a:hover {
	color: #fff;
}

.ocs-footer-brand {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   16. Result cards, ticket stub, reservations, committee, payment
   --------------------------------------------------------------------------
   Ported from refresh.css: these components were written directly from the
   mockups and never depended on the Untree theme, so they carry over as-is.
   -------------------------------------------------------------------------- */

.ocs-ticketgrid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.ocs-ticketgrid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.ocs-ticketrow {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 16px;
}

@media (max-width: 767.98px) {
	.ocs-ticketrow {
		grid-template-columns: 1fr;
	}
}

.ocs-result {
	max-width: 420px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	overflow: hidden;
	box-shadow: 0 12px 32px -24px rgba(0, 60, 60, .5);
}

.ocs-result-accent {
	height: 5px;
	background-color: var(--ocs-teal);
}

.ocs-result-accent--ok {
	background-color: var(--ocs-ok);
}

.ocs-result-accent--warn {
	background-color: #e0a300;
}

.ocs-result-accent--info {
	background-color: var(--ocs-info);
}

.ocs-result-accent--danger {
	background-color: var(--ocs-danger);
}

.ocs-result-body {
	padding: 30px 28px 28px;
	text-align: center;
}

.ocs-result-icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	margin: 0 auto 18px;
	background-color: var(--ocs-teal-tint);
	color: var(--ocs-teal);
}

.ocs-result-icon--ok {
	background-color: var(--ocs-ok-bg);
	color: var(--ocs-ok);
}

.ocs-result-icon--warn {
	background-color: var(--ocs-warn-bg);
	color: var(--ocs-warn);
}

.ocs-result-icon--info {
	background-color: var(--ocs-info-bg);
	color: var(--ocs-info);
}

.ocs-result-icon--danger {
	background-color: var(--ocs-danger-bg);
	color: var(--ocs-danger);
}

.ocs-result h3 {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--ocs-ink);
	margin: 0 0 10px;
}

.ocs-result p {
	font-size: .875rem;
	line-height: 1.7;
	color: var(--ocs-muted);
	margin: 0 0 20px;
}

.ocs-result-code {
	font-size: 3.25rem;
	font-weight: 800;
	color: var(--ocs-teal);
	line-height: 1;
	margin-bottom: 8px;
}

.ocs-result-actions {
	display: flex;
	gap: 10px;
}

.ocs-result-actions .btn {
	flex: 1;
}

.ocs-summary {
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	overflow: hidden;
	text-align: left;
	margin-bottom: 22px;
}

.ocs-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	font-size: .875rem;
	border-bottom: 1px solid #f2f4f3;
}

.ocs-summary-row:last-child {
	border-bottom: 0;
}

.ocs-summary-row .k {
	color: var(--ocs-faint);
}

.ocs-summary-row .v {
	color: var(--ocs-ink);
	font-weight: 700;
	text-align: right;
}

.ocs-ticket {
	max-width: 380px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 44px -22px rgba(0, 60, 60, .5);
}

.ocs-ticket-head {
	background-color: var(--ocs-teal);
	color: #fff;
	padding: 22px 26px;
}

.ocs-ticket-kicker {
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 7px;
}

.ocs-ticket-title {
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.3;
}

.ocs-ticket-sub {
	font-size: .84rem;
	opacity: .85;
	margin-top: 6px;
}

.ocs-ticket-body {
	padding: 24px 26px 6px;
}

.ocs-ticket-tear {
	position: relative;
	height: 30px;
	margin-top: 16px;
}

.ocs-ticket-tear::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 14px;
	border-top: 2px dashed #dbe3e2;
}

.ocs-ticket-tear::after,
.ocs-ticket-notch {
	content: "";
	position: absolute;
	top: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--ocs-paper);
}

.ocs-ticket-tear::after {
	left: -11px;
}

.ocs-ticket-notch {
	right: -11px;
}

.ocs-ticket-qr {
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto 16px;
	border-radius: 12px;
}

.ocs-ticket-foot {
	border-top: 1px solid var(--ocs-line-soft);
	padding-top: 14px;
	text-align: left;
}

.ocs-ticket-serial {
	font-family: var(--ocs-mono);
	font-size: .68rem;
	color: #9aa5a4;
	margin-top: 4px;
	word-break: break-all;
}

.ocs-reservation {
	display: flex;
	flex-direction: column;
	border-radius: var(--ocs-r-lg);
	overflow: hidden;
	background-color: #fff;
	box-shadow: 4px 5px 9px rgba(0, 0, 0, .08), 12px 16px 28px rgba(0, 0, 0, .10);
	margin-bottom: 18px;
}

/* 3:1 matches the ratio the reservation card image is cropped at on the edit page. */
/* 與編輯頁預約卡裁切比例 3:1 一致。 */
.ocs-reservation-media {
	width: 100%;
	aspect-ratio: 3 / 1;
	background-color: var(--ocs-line-soft);
	background-size: cover;
	background-position: center;
}

.ocs-reservation-body {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 28px;
}

.ocs-reservation-info {
	flex: 1 1 auto;
	min-width: 0;
}

.ocs-reservation h2,
.ocs-reservation .title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ocs-ink);
	margin: 0 0 10px;
}

.ocs-reservation .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	color: var(--ocs-body);
	font-size: .935rem;
}

.ocs-reservation .meta i {
	color: var(--ocs-teal-bright);
}

.ocs-reservation-side {
	display: flex;
	align-items: center;
	flex: none;
}

.ocs-stamp {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	border: 4px solid var(--ocs-danger);
	color: var(--ocs-danger);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	font-weight: 800;
	transform: rotate(-12deg);
	flex: none;
	/* Multi-word labels (English "Under review", "On-site payment") wrap inside the
	   circle; centre them and keep the padding so no line touches the ring.
	   英文標籤會換行，置中並保留內距避免超出圓框。 */
	text-align: center;
	line-height: 1.15;
	padding: 0 4px;
	box-sizing: border-box;
}

/* English labels are several words long, so they need a smaller face to fit the ring.
   英文字較長，縮小字級以塞進圓框。 */
:lang(en) .ocs-stamp {
	font-size: 1rem;
}

.ocs-stamp--pending {
	border-color: var(--ocs-warn);
	color: var(--ocs-warn);
}

.ocs-stamp--onsite {
	border-color: var(--ocs-info);
	color: var(--ocs-info);
}

.ocs-stamp--unpaid {
	border-color: #757575;
	color: #757575;
}

a.ocs-reservation {
	text-decoration: none;
	color: inherit;
	transition: transform .22s ease, box-shadow .22s ease;
}

a.ocs-reservation:hover,
a.ocs-reservation:focus-visible {
	color: inherit;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -22px rgba(0, 60, 60, .45), 4px 5px 9px rgba(0, 0, 0, .08);
}

a.ocs-reservation:focus-visible {
	outline: 3px solid rgba(0, 85, 85, .45);
	outline-offset: 3px;
}

.ocs-reservation.is-expired {
	filter: grayscale(100%);
	opacity: .6;
}

.ocs-reservation-side .btn {
	position: relative;
	z-index: 5;
}

@media (max-width: 767.98px) {
	.ocs-reservation-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ocs-stamp {
		width: 84px;
		height: 84px;
		font-size: 1.05rem;
	}

	:lang(en) .ocs-stamp {
		font-size: .8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.ocs-reservation {
		transition: none;
	}
}

/* The head is a real <button> (Bootstrap collapse toggle), so it needs the
   button chrome stripped back to how the old <div> heading looked.
   標題是收合按鈕，必須把瀏覽器預設按鈕樣式清掉。 */
.ocs-period-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 2px solid var(--ocs-line);
	width: 100%;
	background: none;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.ocs-period-head h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.ocs-period-head:hover h2 {
	color: var(--ocs-teal);
}

.ocs-period-head .yr {
	font-size: .875rem;
	color: var(--ocs-muted);
}

.ocs-period-head .n {
	margin-left: auto;
	font-size: .82rem;
	color: var(--ocs-muted);
}

.ocs-period-caret {
	margin-left: 4px;
	color: var(--ocs-muted);
	transition: transform .2s ease;
}

.ocs-period-head[aria-expanded="true"] .ocs-period-caret {
	transform: rotate(180deg);
}

.ocs-division {
	background-color: #fff;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	height: 100%;
}

.ocs-division-img {
	aspect-ratio: 16 / 7;
	object-fit: cover;
	width: 100%;
	background-color: #eef0ef;
}

.ocs-division-body {
	padding: 18px 20px 20px;
}

.ocs-division h4 {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--ocs-teal);
	margin: 0 0 14px;
}

/* Members run two per row: left, right, then down. 幹部兩人一列。 */
.ocs-members {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 10px;
}

.ocs-member {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.ocs-member--full {
	grid-column: 1 / -1;
}

.ocs-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background-color: #e3efed;
	color: var(--ocs-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
}

.ocs-avatar--empty {
	background-color: var(--ocs-line-soft);
	color: var(--ocs-disabled);
}

.ocs-member-name {
	font-size: .95rem;
	font-weight: 600;
	color: var(--ocs-ink);
	overflow-wrap: anywhere;
}

.ocs-member-dept {
	font-size: .78rem;
	line-height: 1.3;
	color: var(--ocs-faint);
	overflow-wrap: anywhere;
}

.ocs-dropzone {
	position: relative;
	display: block;
	border: 2px dashed #c3d1d0;
	background-color: #f7faf9;
	border-radius: var(--ocs-r-md);
	padding: 34px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.ocs-dropzone:hover {
	border-color: var(--ocs-teal-line);
	background-color: var(--ocs-teal-tint);
}

.ocs-dropzone i {
	font-size: 30px;
	color: var(--ocs-teal);
	display: block;
	margin-bottom: 8px;
}

.ocs-dropzone .cap {
	font-size: .81rem;
	color: var(--ocs-muted);
}

.ocs-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ocs-dropzone:focus-within {
	border-color: var(--ocs-teal);
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .15);
}

.ocs-paygrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.ocs-paygrid {
		grid-template-columns: 1fr;
	}
}

.ocs-numstep {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.ocs-numstep .n {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--ocs-teal);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.ocs-numstep h6 {
	font-size: .84rem;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0 0 3px;
}

.ocs-numstep h6.is-critical {
	color: var(--ocs-danger);
}

.ocs-numstep p {
	font-size: .78rem;
	color: var(--ocs-muted);
	line-height: 1.6;
	margin: 0 0 4px;
}

.ocs-chip {
	background: #f0f2f1;
	border-radius: 4px;
	padding: 1px 5px;
	font-family: var(--ocs-mono);
	font-size: .78rem;
	color: var(--ocs-ink);
}

.ocs-chip-copy {
	border: 1px solid #cfdad9;
	background: #fff;
	color: var(--ocs-teal);
	border-radius: 5px;
	font-size: .68rem;
	font-weight: 600;
	padding: 2px 8px;
	margin-left: 6px;
	cursor: pointer;
}

.ocs-chip-copy:hover {
	background-color: var(--ocs-teal-tint);
}

.ocs-ph {
	background-image: repeating-linear-gradient(135deg,
			rgba(0, 85, 85, .10) 0, rgba(0, 85, 85, .10) 10px,
			rgba(0, 85, 85, .04) 10px, rgba(0, 85, 85, .04) 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4b6b6b;
	font-family: var(--ocs-mono);
	font-size: .7rem;
	letter-spacing: .04em;
}

.ocs-offcanvas-lang {
	margin: 0;
}

/* --------------------------------------------------------------------------
   17. Manager panel components (mockups 11-23, 25)
   --------------------------------------------------------------------------
   Ported from refresh.css. The manager markup was already written to the
   mockups in the ocs-* vocabulary; only the Untree-era shell around it was
   the problem, and base_manage.html no longer loads that shell.
   -------------------------------------------------------------------------- */

.card-header,
.ocs-card-header {
	background-color: var(--ocs-teal);
	color: #fff;
	font-size: .97rem;
	font-weight: 700;
	padding: 13px 20px;
	border: 0;
	border-radius: calc(var(--ocs-r-lg) - 1px) calc(var(--ocs-r-lg) - 1px) 0 0;
}

.ocs-dl {
	display: grid;
	grid-template-columns: 132px 1fr;
	row-gap: 13px;
	column-gap: 14px;
	font-size: .935rem;
	align-items: baseline;
	margin: 0;
}

.ocs-dl dt,
.ocs-dl .dt {
	color: var(--ocs-faint);
	font-weight: 400;
	margin: 0;
}

.ocs-dl dd,
.ocs-dl .dd {
	color: var(--ocs-ink);
	margin: 0;
}

@media (max-width: 575.98px) {
	.ocs-dl {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}

	.ocs-dl dd,
	.ocs-dl .dd {
		margin-bottom: 10px;
	}
}

.ocs-affix {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ocs-field-line);
	border-radius: 9px;
	overflow: hidden;
	background-color: #fff;
}

.ocs-affix .affix {
	display: flex;
	align-items: center;
	padding: 0 11px;
	background-color: #f4f5f5;
	border-right: 1px solid var(--ocs-field-line);
	font-family: var(--ocs-mono);
	font-size: .8rem;
	color: var(--ocs-faint);
	white-space: nowrap;
}

.ocs-affix .form-control {
	border: 0;
	border-radius: 0;
	flex: 1;
	min-width: 0;
}

.ocs-affix:focus-within {
	border-color: var(--ocs-teal);
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .15);
}

.ocs-repeat-box {
	background-color: #fbfaf7;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	padding: 14px 16px;
	margin-bottom: 12px;
}

.ocs-repeat-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 12px;
	align-items: end;
}

@media (max-width: 575.98px) {
	.ocs-repeat-row {
		grid-template-columns: 1fr;
	}
}

.ocs-addrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	justify-content: center;
	border: 1px dashed #c3d1d0;
	background-color: transparent;
	color: var(--ocs-teal);
	border-radius: var(--ocs-r-md);
	padding: 11px 16px;
	font-size: .875rem;
	font-weight: 600;
	min-height: 44px;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.ocs-addrow:hover {
	background-color: var(--ocs-teal-tint);
	border-color: var(--ocs-teal-line);
}

.ocs-formfoot {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--ocs-line-soft);
	padding-top: 22px;
	margin-top: 26px;
}

.ocs-formfoot .ocs-push {
	margin-left: auto;
}

.ocs-segmented {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 10px;
}

.ocs-segmented label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	background-color: #fff;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ocs-body);
	cursor: pointer;
	text-align: center;
	transition: border-color .18s ease, background-color .18s ease;
}

.ocs-segmented input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.ocs-segmented label:has(input:checked) {
	border: 2px solid var(--ocs-teal);
	background-color: var(--ocs-teal-tint);
	color: var(--ocs-teal);
}

.ocs-segmented label:focus-within {
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .15);
}

@media (max-width: 575.98px) {
	.ocs-segmented {
		grid-auto-flow: row;
	}
}

.ocs-officer-head,
.ocs-officer-row {
	display: grid;
	grid-template-columns: 1fr 240px 44px;
	gap: 12px;
	align-items: center;
}

.ocs-officer-head {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ocs-faint);
	padding: 0 16px 8px;
}

.ocs-officer-position {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ocs-teal);
}

.ocs-officer-lock {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ocs-r-sm);
	background-color: #e7ecec;
	color: var(--ocs-disabled);
	cursor: not-allowed;
}

/* min-height alone grows the button box while the inline <i> stays at the top,
   so the glyph sat high. Centre it explicitly, and drop the icon font's own
   vertical-align nudge. 圖示需在按鈕內置中，否則會偏上。 */
.ocs-officer-row .btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ocs-officer-row .btn>.bi,
.ocs-officer-lock>.bi {
	display: block;
	line-height: 1;
	vertical-align: baseline;
}

@media (max-width: 575.98px) {
	.ocs-officer-head {
		display: none;
	}

	.ocs-officer-row {
		grid-template-columns: 1fr;
	}
}

.ocs-fieldrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ocs-fieldrow-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* :not(:disabled) matches Bootstrap reboot's button cursor rule, which would
   otherwise win on specificity and leave the handle showing a pointer.
   加上 :not(:disabled) 才能蓋過 Bootstrap 的游標設定。 */
.ocs-grip:not(:disabled) {
	cursor: grab;
}

.ocs-grip {
	color: var(--ocs-muted);
	font-size: 1.35rem;
	margin-top: 21px;
	padding: 6px 5px;
	flex: none;
	background: none;
	border: 0;
	line-height: 1;
	border-radius: var(--ocs-r-sm);
	transition: color .12s ease, background-color .12s ease;
	/* Without this the browser scrolls the page instead of letting the pointer
	   handler drag the row on touch. 否則手機上會變成捲動頁面。 */
	touch-action: none;
}

.ocs-grip:hover,
.ocs-grip:focus-visible {
	color: var(--ocs-teal);
	background-color: var(--ocs-teal-tint);
}

.ocs-grip:focus-visible {
	outline: 2px solid var(--ocs-teal);
	outline-offset: 1px;
}

/* While a row is being dragged the whole editor stops selecting text, or the
   pointer sweep highlights every label it passes over.
   拖曳時停用選取，否則會把沿途文字全部反白。 */
.ocs-sorting {
	user-select: none;
}

/* The clone that follows the pointer. It sits on <body> so nothing in the page
   can clip it, and takes no pointer events so the row underneath stays
   hit-testable. The tight shadow is what reads as "lifted" — a single wide
   soft one is invisible against the cream page.
   跟著游標的分身，放在 body 上避免被裁切，並且不接受滑鼠事件。 */
/* Compound selector on purpose: a later `.ocs-repeat-box { position: relative }`
   ties on specificity and would otherwise pin the ghost back into the flow.
   必須用複合選擇器，否則後面的 .ocs-repeat-box 規則會蓋掉 position。 */
.ticket-field-form.ocs-drag-ghost {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1080;
	margin: 0;
	opacity: .8;
	pointer-events: none;
	background-color: var(--ocs-card);
	border-color: var(--ocs-teal);
	box-shadow: 0 2px 6px rgba(0, 45, 45, .22),
		0 14px 30px rgba(0, 45, 45, .30);
}

/* The real row stays in the list as the landing slot, sliding between its
   neighbours as the ghost moves. 原本的列留在清單中當作落點。 */
.ticket-field-form.is-drag-source {
	border-style: dashed;
	border-color: var(--ocs-teal);
	background-color: var(--ocs-teal-tint);
}

.ticket-field-form.is-drag-source>* {
	opacity: .25;
}

.ocs-sorting .ocs-grip:not(:disabled) {
	cursor: grabbing;
}

.ocs-fieldrow .delete-field-btn {
	flex: none;
	margin-top: 26px;
}

/* Required switch. A styled checkbox, not a Yes/No select — one tap on a phone.
   Same :has(input:checked) idiom as .ocs-segmented above.
   必填開關：以 checkbox 呈現為切換鈕，手機上單擊即可。 */
.ocs-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	min-height: 44px;
	margin-top: 26px;
	padding: 0 2px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ocs-body);
	cursor: pointer;
	user-select: none;
}

.ocs-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ocs-switch-track {
	flex: none;
	position: relative;
	display: block;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background-color: var(--ocs-field-line);
	transition: background-color .18s ease;
}

.ocs-switch-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(18, 49, 47, .28);
	transition: transform .18s ease;
}

.ocs-switch:has(input:checked) .ocs-switch-track {
	background-color: var(--ocs-teal);
}

.ocs-switch:has(input:checked) .ocs-switch-knob {
	transform: translateX(18px);
}

.ocs-switch:has(input:checked) .ocs-switch-text {
	color: var(--ocs-teal);
}

.ocs-switch:focus-within .ocs-switch-track {
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .15);
}

@media (prefers-reduced-motion: reduce) {

	.ocs-switch-track,
	.ocs-switch-knob {
		transition: none;
	}
}

/* Option chips. The visual language matches .ocs-memberchips further down; the
   hidden JSON input next to them is the value that actually posts.
   選項標籤，與 .ocs-memberchips 同一套視覺。 */
.ocs-optionchips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 2px 0 6px;
}

.ocs-optionchip {
	display: inline-flex;
	align-items: center;
	background-color: var(--ocs-teal-tint);
	border: 1px solid var(--ocs-teal-line);
	border-radius: 999px;
	overflow: hidden;
}

.ocs-optionchip-label,
.ocs-optionchip-x {
	border: 0;
	background: none;
	color: var(--ocs-ink);
	font-family: inherit;
	line-height: 1.2;
}

.ocs-optionchip-label {
	min-height: 32px;
	padding: 4px 4px 4px 12px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: left;
	cursor: text;
}

.ocs-optionchip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 8px 0 4px;
	font-size: 15px;
	color: var(--ocs-muted);
	cursor: pointer;
}

.ocs-optionchip-x:hover,
.ocs-optionchip-x:focus-visible {
	color: var(--ocs-danger);
}

.ocs-optionchip-add {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 12px;
	border: 1px dashed var(--ocs-teal-line);
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ocs-teal);
	cursor: pointer;
}

.ocs-optionchip-add:hover {
	background-color: var(--ocs-teal-tint);
}

/* 16px keeps iOS Safari from zooming the page when the editor takes focus.
   字級 16px 可避免 iOS Safari 聚焦時自動放大頁面。 */
.ocs-optionchip-input {
	min-width: 9rem;
	max-width: 100%;
	min-height: 34px;
	padding: 4px 12px;
	border: 1px solid var(--ocs-teal);
	border-radius: 999px;
	background-color: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--ocs-ink);
}

.ocs-optionchip-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 85, 85, .15);
}

@media (max-width: 575.98px) {
	.ocs-switch {
		margin-top: 4px;
	}

	.ocs-optionchip-label {
		min-height: 40px;
		padding-left: 14px;
		font-size: 13.5px;
	}

	.ocs-optionchip-x {
		min-width: 40px;
		min-height: 40px;
		font-size: 17px;
	}

	.ocs-optionchip-add {
		min-height: 40px;
		font-size: 13.5px;
	}

	.ocs-optionchip-input {
		min-height: 40px;
	}
}

.ocs-imgslots {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 767.98px) {
	.ocs-imgslots {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ocs-imgslot {
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	background-color: #fff;
	padding: 14px;
	text-align: center;
}

.ocs-imgslot .form-label {
	display: block;
	font-size: .81rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.ocs-imgslot .ocs-pill {
	margin-bottom: 10px;
}

.ocs-imgslot .form-control {
	font-size: .78rem;
	text-align: left;
}

.ocs-imgslot .ocs-help {
	display: block;
	margin-top: 8px;
	font-size: .72rem;
}

.ocs-imgslot img {
	margin-top: 12px;
}

.ocs-switchbox {
	background-color: #fbfaf7;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	padding: 13px 16px;
}

.ocs-switchbox .note {
	font-size: .78rem;
	color: var(--ocs-faint);
	margin: 4px 0 0 2.5em;
}

.ocs-copyfield {
	display: flex;
	align-items: stretch;
	border: 1px solid #e0ddd4;
	border-radius: 9px;
	overflow: hidden;
	background-color: #fbfaf7;
}

.ocs-copyfield code,
.ocs-copyfield .val {
	flex: 1;
	padding: 10px 14px;
	font-family: var(--ocs-mono);
	font-size: .82rem;
	color: var(--ocs-body);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ocs-copyfield button {
	border: 0;
	border-left: 1px solid #e0ddd4;
	background: #fff;
	padding: 10px 16px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ocs-teal);
	cursor: pointer;
}

.ocs-copyfield button:hover {
	background-color: var(--ocs-teal-tint);
}

.ocs-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: var(--ocs-r-md);
	padding: 13px 16px;
	font-size: .875rem;
	line-height: 1.55;
	margin-bottom: 20px;
}

.ocs-banner i {
	font-size: 1.1rem;
	flex: none;
}

.ocs-banner b {
	color: var(--ocs-ink);
}

.ocs-banner--ok {
	background-color: var(--ocs-ok-bg);
	border: 1px solid #b7dcc6;
	color: #2c5a42;
}

.ocs-banner--ok i {
	color: var(--ocs-ok);
}

.ocs-banner--warn {
	background-color: #fdf7e8;
	border: 1px solid #ecd9a8;
	color: #7a6a44;
}

.ocs-banner--warn i {
	color: var(--ocs-warn);
}

.ocs-banner--info {
	background-color: var(--ocs-info-bg);
	border: 1px solid #bfe3e8;
	color: #0b5b66;
}

.ocs-banner--info i {
	color: var(--ocs-info);
}

.ocs-banner--danger {
	background-color: var(--ocs-danger-bg);
	border: 1px solid #f1c6c1;
	color: #8f2418;
}

.ocs-banner--danger i {
	color: var(--ocs-danger);
}

.ocs-table-wrap {
	background-color: #fff;
	border: 1px solid var(--ocs-line);
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.table.ocs-table {
	margin: 0;
	font-size: .84rem;
	color: var(--ocs-body);
	vertical-align: middle;
	border-color: #f2f4f3;
}

.table.ocs-table>thead>tr>th {
	background-color: #f7f8f8;
	color: #7a8a8a;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ocs-line-soft);
	padding: 11px 16px;
	white-space: nowrap;
}

.table.ocs-table>tbody>tr>td {
	padding: 12px 16px;
	border-bottom: 1px solid #f2f4f3;
}

.table.ocs-table>tbody>tr:last-child>td {
	border-bottom: 0;
}

.table.ocs-table>tbody>tr:nth-child(even) {
	background-color: #fbfcfc;
}

.table.ocs-table>tbody>tr:hover {
	background-color: var(--ocs-teal-tint);
}

.ocs-table .id,
.ocs-table .mono {
	font-family: var(--ocs-mono);
	font-size: .78rem;
	font-weight: 600;
	color: var(--ocs-ink);
}

.ocs-table .email {
	font-size: .74rem;
	color: var(--ocs-muted);
	word-break: break-all;
}

.ocs-table .btn-sm {
	font-size: .76rem;
	padding: 6px 12px;
	border-radius: 7px;
}

.ocs-thumb {
	width: 44px;
	height: 34px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--ocs-line);
	cursor: zoom-in;
}

.ocs-previewgrid {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 28px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.ocs-previewgrid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

.ocs-recipient {
	padding: 8px 0;
	border-bottom: 1px solid var(--ocs-line-soft);
}

.ocs-recipient:last-of-type {
	border-bottom: 0;
}

.ocs-recipient .name {
	font-size: .81rem;
	font-weight: 600;
	color: var(--ocs-ink);
}

.ocs-recipient .mail {
	font-family: var(--ocs-mono);
	font-size: .72rem;
	color: var(--ocs-faint);
	word-break: break-all;
}

.ocs-sendgate {
	border-top: 1px solid var(--ocs-line-soft);
	margin-top: 16px;
	padding-top: 16px;
}

.ocs-counttile {
	background-color: var(--ocs-teal-tint);
	border: 1px solid var(--ocs-teal-line);
	border-radius: var(--ocs-r-md);
	padding: 16px 20px;
	margin-bottom: 20px;
}

.ocs-counttile .n {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--ocs-teal);
	line-height: 1.1;
}

.ocs-counttile .l {
	font-size: .82rem;
	color: var(--ocs-muted);
	margin-top: 2px;
}

.ocs-counttile .note {
	font-size: .78rem;
	color: var(--ocs-faint);
	margin-top: 6px;
}

.ocs-tabs {
	display: flex;
	gap: 8px;
}

.ocs-tab {
	border: 1px solid var(--ocs-line);
	background-color: #fff;
	border-radius: 999px;
	padding: 7px 18px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ocs-body);
	cursor: pointer;
	min-height: 36px;
}

.ocs-tab:hover {
	background-color: var(--ocs-teal-tint);
}

.ocs-tab.is-active {
	background-color: var(--ocs-teal);
	border-color: var(--ocs-teal);
	color: #fff;
}

.ocs-bodyarea {
	font-size: .84rem;
	line-height: 1.8;
}

.ocs-attachrow {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	background-color: #fbfaf7;
	padding: 14px 16px;
}

.ocs-attachrow img {
	width: 74px;
	height: 56px;
	object-fit: cover;
	border-radius: 7px;
	border: 1px solid var(--ocs-line);
	flex: none;
}

.ocs-attachrow-main {
	flex: 1 1 200px;
	min-width: 0;
}

.ocs-attachrow-main .form-label {
	margin-bottom: 2px;
}

.ocs-attachrow .form-control {
	flex: 0 1 260px;
	font-size: .8rem;
}

.ocs-progress {
	min-width: 96px;
}

.ocs-progress .n {
	font-size: .78rem;
	font-weight: 600;
	color: var(--ocs-ink);
	margin-bottom: 5px;
	white-space: nowrap;
}

.ocs-progress .bar {
	height: 5px;
	border-radius: 999px;
	background-color: #e7eae9;
	overflow: hidden;
}

.ocs-progress .fill {
	height: 100%;
	border-radius: 999px;
	background-color: var(--ocs-ok);
	transition: width .22s ease;
}

.ocs-progress .fill--queued {
	background-color: var(--ocs-info);
}

.ocs-progress .fill--failed {
	background-color: var(--ocs-danger);
}

.ocs-subject .cn {
	font-size: .81rem;
	font-weight: 600;
	color: var(--ocs-ink);
}

.ocs-subject .en {
	font-size: .72rem;
	color: var(--ocs-faint);
}

.ocs-twoline .a {
	display: block;
}

.ocs-twoline .b {
	display: block;
	font-size: .72rem;
	color: var(--ocs-faint);
}

.ocs-filterpills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ocs-filterpills a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ocs-line);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--ocs-body);
	text-decoration: none;
	background-color: #fff;
	min-height: 34px;
}

.ocs-filterpills a:hover {
	background-color: var(--ocs-teal-tint);
	border-color: var(--ocs-teal-line);
}

.ocs-filterpills a.is-active {
	background-color: var(--ocs-teal);
	border-color: var(--ocs-teal);
	color: #fff;
}

.ocs-filterpills a.is-danger {
	border-color: var(--ocs-danger);
	color: var(--ocs-danger);
}

.ocs-filterpills a.is-danger.is-active {
	background-color: var(--ocs-danger);
	color: #fff;
}

.ocs-attend-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ocs-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-size: .875rem;
	color: var(--ocs-body);
}

.ocs-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ocs-legend-item b {
	color: var(--ocs-ink);
}

.ocs-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex: none;
}

.ocs-dot--member {
	background-color: #1a7a4c;
}

.ocs-dot--nonmember {
	background-color: #e0a300;
}

.ocs-search {
	position: relative;
	min-width: 260px;
}

.ocs-search i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ocs-faint);
	font-size: .9rem;
}

.ocs-search .form-control {
	padding-left: 34px;
}

/* Sort controls + answer summary on the attendance page.
   出席名單的排序控制與作答統計。 */

/* The header carets are the only sort control; the answer summary reuses .ocs-table.
   排序靠表頭，作答統計沿用表格樣式。 */

/* The header link has to inherit the <th> type styling, or the caret column would read
   as body text next to the uppercase labels it sits in. */
.table.ocs-table>thead>tr>th .ocs-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.table.ocs-table>thead>tr>th .ocs-sort i {
	font-size: .68rem;
	opacity: .35;
	transition: opacity .15s ease;
}

.table.ocs-table>thead>tr>th .ocs-sort:hover {
	color: var(--ocs-teal);
}

.table.ocs-table>thead>tr>th .ocs-sort:hover i {
	opacity: .8;
}

.table.ocs-table>thead>tr>th .ocs-sort.is-active {
	color: var(--ocs-teal);
}

.table.ocs-table>thead>tr>th .ocs-sort.is-active i {
	opacity: 1;
}

.ocs-answer-summary {
	margin: 8px 0 56px;
}

.ocs-answer-summary h2 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0 0 4px;
}

.ocs-answer-summary>p {
	font-size: .8rem;
	margin: 0 0 20px;
}

.ocs-answer-block {
	margin-bottom: 28px;
}

.ocs-answer-block h3 {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: .92rem;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0 0 10px;
}

.ocs-answer-total {
	font-size: .78rem;
	font-weight: 400;
	color: var(--ocs-faint);
}

/* Two columns only, so the table fills the width instead of shrinking to its content. */
.table.ocs-answer-table {
	width: 100%;
}

/* Darker than the teal question bands below it, so the three levels of this table read as
   a ramp: header darkest, question band teal, option rows plain.
   表頭比題目列更深，形成表頭→題目→選項的層次。 */
.table.ocs-answer-table>thead>tr>th {
	background-color: var(--ocs-teal-dark);
	color: #fff;
	border-bottom: 0;
}

.table.ocs-answer-table .ocs-answer-amount {
	text-align: right;
	width: 120px;
	font-variant-numeric: tabular-nums;
}

.table.ocs-answer-table>tbody>tr>td {
	padding-left: 28px;
}

/* The question band: full width, and visually the parent of the option rows under it.
   Solid teal (the .ocs-card-header treatment) rather than a tint, so where one question
   ends and the next begins is obvious at a glance.
   題目列用實心 teal，較容易分辨不同題目。 */
.table.ocs-answer-table>tbody>tr.ocs-answer-question>td {
	padding-left: 16px;
	background-color: var(--ocs-teal);
	color: #fff;
	font-weight: 700;
}

.table.ocs-answer-table>tbody>tr.ocs-answer-question>td .ocs-answer-note {
	display: block;
	font-weight: 400;
	font-size: .74rem;
	color: rgba(255, 255, 255, .78);
	margin-top: 2px;
}

.table.ocs-answer-table>tbody>tr.is-muted>td {
	color: var(--ocs-faint);
}

.ocs-table td:empty::after {
	content: "—";
	color: var(--ocs-disabled);
}

.ocs-rowactions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.ocs-rowactions .btn {
	white-space: nowrap;
}

.ocs-counters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ocs-counter {
	border: 1px solid var(--ocs-line);
	background-color: #fff;
	border-radius: 10px;
	padding: 9px 16px;
	text-align: center;
	min-width: 78px;
}

.ocs-counter .n {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.1;
}

.ocs-counter .l {
	font-size: .72rem;
	color: var(--ocs-faint);
	margin-top: 2px;
}

.ocs-counter .n--warn {
	color: var(--ocs-warn);
}

.ocs-counter .n--ok {
	color: var(--ocs-ok);
}

.ocs-counter .n--mute {
	color: #7a8a8a;
}

.ocs-crumbs {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .84rem;
	color: var(--ocs-muted);
	margin-bottom: 16px;
}

.ocs-crumbs a {
	color: var(--ocs-teal);
	text-decoration: none;
}

.ocs-crumbs .sep {
	opacity: .5;
}

.ocs-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ocs-page-head h1 {
	font-size: 1.55rem;
	font-weight: 700;
	margin: 0 0 5px;
}

.ocs-page-head p {
	font-size: .84rem;
	color: var(--ocs-faint);
	margin: 0;
}

.ocs-showgrid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.ocs-showgrid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.ocs-timestamps {
	font-size: .75rem;
	color: #9aa5a4;
	margin-top: 18px;
}

.ocs-role-card {
	border: 2px solid var(--ocs-teal);
	border-radius: 12px;
	background-color: #fff;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.ocs-role-card .ocs-role-tag {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--ocs-teal);
	border-radius: 6px;
	padding: 3px 10px;
	margin-bottom: 12px;
}

.ocs-role-card h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #002b5c;
	margin: 0 0 12px;
}

.ocs-role-card .ocs-role-meta {
	font-size: .84rem;
	color: #5f6672;
	line-height: 1.9;
}

.ocs-role-card .ocs-role-meta b {
	color: #343a40;
}

.ocs-role-actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: none;
	width: 150px;
}

.ocs-role-actions .btn {
	min-height: 44px;
}

.ocs-role-card .ocs-role-icon {
	width: 7.5rem;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ocs-r-sm);
	flex: none;
}

.ocs-role-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ocs-role-card.position-viceCoordinator {
	border-color: #3f6ad8;
}

.ocs-role-card.position-secretary {
	border-color: #6f42c1;
}

.ocs-role-card.position-treasurer {
	border-color: #198754;
}

.ocs-role-card.position-generalAffairsOfficer {
	border-color: #fd7e14;
}

.ocs-role-card.position-eventPlanningTeam {
	border-color: #d63384;
}

.ocs-role-card.position-informationSystemsTeam {
	border-color: #0dcaf0;
}

.ocs-role-card.position-teamLeader {
	border-color: #20c997;
}

.ocs-role-card.position-emcee {
	border-color: #dc3545;
}

.ocs-role-card.position-photographer {
	border-color: #6f42c1;
}

.ocs-role-tag.position-viceCoordinator {
	background-color: #3f6ad8;
}

.ocs-role-tag.position-secretary {
	background-color: #6f42c1;
}

.ocs-role-tag.position-treasurer {
	background-color: #198754;
}

.ocs-role-tag.position-generalAffairsOfficer {
	background-color: #fd7e14;
}

.ocs-role-tag.position-eventPlanningTeam {
	background-color: #d63384;
}

.ocs-role-tag.position-informationSystemsTeam {
	background-color: #0dcaf0;
	color: #102027;
}

.ocs-role-tag.position-teamLeader {
	background-color: #20c997;
	color: #102027;
}

.ocs-role-tag.position-emcee {
	background-color: #dc3545;
}

.ocs-role-tag.position-photographer {
	background-color: #6f42c1;
}

.ocs-role-actions .btn-outline-info {
	border-color: #0dcaf0;
	color: #087990;
}

.ocs-role-actions .btn-outline-info:hover {
	background-color: #0dcaf0;
	color: #04333d;
}

.ocs-role-actions .btn-outline-warning {
	border-color: #ffc107;
	color: #946200;
}

.ocs-role-actions .btn-outline-warning:hover {
	background-color: #ffc107;
	color: #3d2900;
}

.ocs-role-actions .btn-outline-purple {
	border-color: #6f42c1;
	color: #6f42c1;
	background-color: #fff;
}

.ocs-role-actions .btn-outline-purple:hover {
	background-color: #6f42c1;
	color: #fff;
}

@media (max-width: 575.98px) {
	.ocs-role-card {
		padding: 18px;
		gap: 16px;
	}

	.ocs-role-card h2 {
		font-size: 1.3rem;
	}

	.ocs-role-actions {
		width: 100%;
	}
}

.ocs-mono {
	font-family: var(--ocs-mono);
}

/* Panel landing tiles. The panel is a pure navigation page, so each destination
   is one full-card target instead of a lone button on an empty page.
   後台首頁只是導覽頁，每個入口做成整塊可點擊區域。 */
.ocs-hubgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.ocs-hub {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px 26px;
	background: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.ocs-hub:hover {
	border-color: var(--ocs-teal-line);
	box-shadow: 0 14px 30px -18px rgba(0, 60, 60, .45);
	transform: translateY(-2px);
}

.ocs-hub:focus-visible {
	outline: 2px solid var(--ocs-teal-bright);
	outline-offset: 2px;
}

.ocs-hub-icon {
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ocs-r-md);
	background: var(--ocs-teal-tint);
	color: var(--ocs-teal);
	font-size: 1.25rem;
}

.ocs-hub-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ocs-hub-title {
	display: block;
	font-size: 17.5px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin-bottom: 6px;
}

.ocs-hub-desc {
	display: block;
	font-size: 13.5px;
	color: var(--ocs-muted);
	line-height: 1.7;
}

.ocs-hub-go {
	flex: none;
	align-self: center;
	color: var(--ocs-faint);
	transition: color .2s ease, transform .2s ease;
}

.ocs-hub:hover .ocs-hub-go {
	color: var(--ocs-teal);
	transform: translateX(3px);
}

@media (max-width: 575.98px) {
	.ocs-hub {
		padding: 18px 18px 20px;
		gap: 14px;
	}

	.ocs-hub-title {
		font-size: 15.5px;
	}

	.ocs-hub-desc {
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ocs-hub,
	.ocs-hub-go {
		transition: none;
	}

	.ocs-hub:hover,
	.ocs-hub:hover .ocs-hub-go {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   18. Manager rail (mockups 11, 12) — darker than the public bar so officers
   always know they are in the back office.
   -------------------------------------------------------------------------- */

.ocs-mnav {
	background-color: var(--ocs-teal-dark);
	position: relative;
	z-index: 20;
}

.ocs-mnav-inner {
	height: var(--ocs-nav-h);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ocs-mnav-brand {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.ocs-mnav-brand:hover {
	color: #fff;
}

.ocs-mnav-brand span {
	font-weight: 500;
	opacity: .6;
	font-size: 14.5px;
}

.ocs-mnav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 22px;
}

.ocs-mnav-links>li {
	position: relative;
}

.ocs-mnav-links>li>a {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	opacity: .7;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: opacity .18s ease;
}

.ocs-mnav-links>li>a:hover {
	color: #fff;
	opacity: 1;
}

.ocs-mnav-links>li>a.is-active {
	opacity: 1;
	border-bottom-color: #fff;
}

.ocs-mnav-user {
	opacity: .9 !important;
}

.ocs-mnav-exit {
	opacity: .55 !important;
}

.ocs-offcanvas--manage {
	background-color: var(--ocs-teal-dark);
}

@media (max-width: 991.98px) {
	.ocs-mnav-links {
		display: none;
	}
}

/* Committee period / division rows (mockup 23). */
.ocs-periodrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background-color: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	padding: 18px 20px;
	margin-bottom: 12px;
}

.ocs-periodrow.is-active {
	border-color: var(--ocs-teal);
	border-width: 2px;
}

.ocs-periodrow-main {
	flex: 1;
	min-width: 240px;
}

.ocs-periodrow-title {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 17px;
	font-weight: 700;
	color: var(--ocs-ink);
}

.ocs-periodrow-meta {
	font-size: 13px;
	color: var(--ocs-muted);
	margin-top: 6px;
}

.ocs-memberchips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.ocs-memberchip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ocs-ink);
	background-color: var(--ocs-teal-tint);
	border: 1px solid var(--ocs-teal-line);
	border-radius: 999px;
	padding: 3px 11px;
}

.ocs-memberchip-dept {
	font-weight: 400;
	color: var(--ocs-muted);
	font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   19. Manager tables on a phone (mockup 25)
   --------------------------------------------------------------------------
   Officers work from their phones at the venue, so dense tables stop being
   tables below lg and stack into one card per row. Cells carrying a
   data-label print that label beside the value; the rest run full width.
   Selectors mirror the desktop rules' specificity (.table.ocs-table > ...) —
   a media query adds none, so a weaker selector would silently lose.
   手機上表格改為堆疊卡片，方便現場幹部操作。
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.ocs-table-wrap {
		overflow-x: visible;
	}

	.table.ocs-table,
	.table.ocs-table>tbody,
	.table.ocs-table>tbody>tr,
	.table.ocs-table>tbody>tr>td {
		display: block;
		width: auto;
		min-width: 0;
	}

	.table.ocs-table>thead {
		display: none;
	}

	.table.ocs-table>tbody>tr,
	.table.ocs-table>tbody>tr:nth-child(even),
	.table.ocs-table>tbody>tr:hover {
		background-color: var(--ocs-card);
		border: 1px solid var(--ocs-line);
		border-radius: var(--ocs-r-md);
		padding: 14px 16px;
		margin-bottom: 12px;
	}

	.table.ocs-table>tbody>tr>td {
		border: 0;
		padding: 5px 0;
		text-align: left !important;
	}

	.table.ocs-table>tbody>tr>td[data-label] {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
	}

	.table.ocs-table>tbody>tr>td[data-label]::before {
		content: attr(data-label);
		flex: none;
		font-size: 12px;
		font-weight: 600;
		color: var(--ocs-faint);
	}

	/* The action cell is the row's primary job — give it the full width. */
	.table.ocs-table>tbody>tr>td[data-label]:last-child {
		display: block;
	}

	.table.ocs-table>tbody>tr>td[data-label]:last-child::before {
		display: block;
		margin-bottom: 6px;
	}

	.table.ocs-table .ocs-rowactions {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	/* An empty-state row must not pretend to be a card. */
	.table.ocs-table>tbody>tr:has(> td[colspan]) {
		border: 0;
		padding: 0;
		background: transparent;
	}
}

/* Wide data tables keep their natural column widths on desktop; the mobile
   block above collapses them to cards, which an inline style would have beaten. */
@media (min-width: 992px) {
	.table.ocs-table--wide {
		width: max-content;
		min-width: 100%;
	}
}

/* Already-uploaded image shown next to its uploader (committee division edit). */
.ocs-imgcurrent {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ocs-line-soft);
}

.ocs-imgcurrent img {
	width: 160px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--ocs-line);
}

/* --------------------------------------------------------------------------
   20. Committee periods & divisions (mockup 23)
   -------------------------------------------------------------------------- */

.ocs-committee-grid {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.ocs-committee-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.ocs-periodrail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ocs-periodrail-head h2 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0;
}

.ocs-periodrail-head a {
	color: var(--ocs-teal);
	font-size: 12.5px;
	font-weight: 600;
}

.ocs-periodcard {
	display: block;
	border: 1px solid var(--ocs-line);
	background-color: var(--ocs-card);
	border-radius: var(--ocs-r-md);
	padding: 13px 15px;
	margin-bottom: 8px;
	color: inherit;
	transition: border-color .18s ease;
}

.ocs-periodcard:hover {
	border-color: var(--ocs-teal-line);
	color: inherit;
}

.ocs-periodcard.is-selected {
	border: 2px solid var(--ocs-teal);
	padding: 12px 14px;
}

.ocs-periodcard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ocs-periodcard-top b {
	font-size: 14.5px;
	color: var(--ocs-ink);
}

.ocs-periodcard-badge {
	font-size: 10.5px;
	font-weight: 700;
	color: #fff;
	background-color: var(--ocs-teal);
	border-radius: 5px;
	padding: 2px 8px;
	flex: none;
}

.ocs-periodcard-meta {
	font-size: 12.5px;
	color: var(--ocs-faint);
	margin-top: 4px;
}

/* Division rows */
.ocs-divisionrow {
	background-color: var(--ocs-card);
	border: 1px solid var(--ocs-line);
	border-radius: 12px;
	padding: 18px 20px;
	display: flex;
	gap: 18px;
	align-items: center;
	margin-bottom: 12px;
}

.ocs-divisionrow-order {
	color: #c3cdcc;
	font-family: var(--ocs-mono);
	font-size: 13px;
	font-weight: 700;
	flex: none;
	min-width: 14px;
	text-align: center;
}

.ocs-divisionrow-img {
	width: 76px;
	height: 56px;
	border-radius: 9px;
	object-fit: cover;
	flex: none;
	font-size: .62rem;
}

.ocs-divisionrow-main {
	flex: 1;
	min-width: 0;
}

.ocs-divisionrow-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 9px;
}

.ocs-divisionrow-title h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ocs-ink);
	margin: 0;
}

.ocs-divisionrow-title span {
	font-size: 12px;
	color: var(--ocs-faint);
}

.ocs-memberchip--empty {
	background: transparent;
	border: 1px dashed var(--ocs-teal-line);
	color: var(--ocs-faint);
	font-weight: 400;
}

@media (max-width: 767.98px) {
	.ocs-divisionrow {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ocs-divisionrow-main {
		flex-basis: 100%;
	}

	.ocs-rowactions {
		margin-left: auto;
	}
}

/* Drag-to-reorder on the division list. The handle shares .ocs-grip with the
   ticket field editor, but that one is aligned to a row of labelled inputs;
   division rows are vertically centred, so the top margin is dropped here.
   組別列的拖曳握把與票券欄位共用樣式，但這裡是垂直置中，不需要上邊距。 */
.ocs-grip--row {
	margin-top: 0;
}

.ocs-orderhint {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--ocs-faint);
	margin-bottom: 10px;
}

.ocs-orderstatus {
	color: var(--ocs-teal);
}

.ocs-orderstatus.is-error {
	color: var(--ocs-danger);
}

.ocs-divisionrow.ocs-drag-ghost {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1080;
	margin: 0;
	opacity: .8;
	pointer-events: none;
	background-color: var(--ocs-card);
	border-color: var(--ocs-teal);
	box-shadow: 0 2px 6px rgba(0, 45, 45, .22),
		0 14px 30px rgba(0, 45, 45, .30);
}

/* The real row stays in the list as the landing slot. 原本的列留下當作落點。 */
.ocs-divisionrow.is-drag-source {
	border-style: dashed;
	border-color: var(--ocs-teal);
	background-color: var(--ocs-teal-tint);
}

.ocs-divisionrow.is-drag-source>* {
	opacity: .25;
}

.ocs-imgcurrent--square img {
	width: 96px;
	aspect-ratio: 1 / 1;
}

/* Remove control for a repeatable block sits at its top-right corner. */
.ocs-repeat-box {
	position: relative;
}

.ocs-repeat-remove {
	position: absolute;
	top: 12px;
	right: 12px;
}

/* Name -> student ID picker used by the officer and committee member forms.
   The suggestion list is absolutely positioned so it overlays the following
   row instead of pushing the form around while typing. */
.ocs-student-picker {
	position: relative;
}

.ocs-student-suggest {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid var(--ocs-line);
	border-radius: var(--ocs-r-md);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.ocs-student-suggest__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	background: none;
	text-align: left;
}

.ocs-student-suggest__item:hover,
.ocs-student-suggest__item:focus {
	background-color: #f1efe9;
}

.ocs-student-suggest__name {
	font-weight: 600;
}

.ocs-student-suggest__meta {
	font-size: .85em;
	color: #6b6b6b;
}

.ocs-student-suggest__empty {
	padding: 8px 12px;
	font-size: .9em;
	color: #6b6b6b;
}

/* A read-only ID reads as resolved output, not as something to type into. */
.ocs-student-picker input[data-student-id-field][readonly] {
	background-color: #f4f2ed;
}

/* Keyboard-highlighted suggestion (arrow keys), same tone as :hover. */
.ocs-student-suggest__item.is-active {
	background-color: #f1efe9;
}

/* The wide attendance table collapses to one card per row below 992px. The answer table
   has two columns and already fits, and collapsing it would turn every single option into
   its own card — so it stays a real table at every width.
   作答統計只有兩欄，小螢幕維持表格，不轉成卡片。 */
@media (max-width: 991.98px) {
	.table.ocs-answer-table {
		display: table;
		width: 100%;
		/* Fixed layout so the two columns split the width instead of hugging their text. */
		table-layout: fixed;
	}

	.table.ocs-answer-table>tbody {
		display: table-row-group;
	}

	.table.ocs-answer-table>thead {
		display: table-header-group;
	}

	.table.ocs-answer-table>tbody>tr,
	.table.ocs-answer-table>tbody>tr:nth-child(even),
	.table.ocs-answer-table>tbody>tr:hover {
		display: table-row;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		padding: 0;
		background-color: transparent;
	}

	.table.ocs-answer-table>tbody>tr.ocs-answer-question>td {
		background-color: var(--ocs-teal);
		color: #fff;
	}

	.table.ocs-answer-table>tbody>tr>td,
	.table.ocs-answer-table>tbody>tr>td[data-label],
	.table.ocs-answer-table>tbody>tr>td[data-label]:last-child {
		display: table-cell;
		padding: 9px 12px 9px 24px;
		border-bottom: 1px solid #f2f4f3;
	}

	/* The column header carries the label on this table, so the per-cell one is noise. */
	.table.ocs-answer-table>tbody>tr>td[data-label]::before {
		content: none;
	}

	.table.ocs-answer-table .ocs-answer-amount {
		width: 84px;
		padding-left: 8px;
	}
}