/* HabitSurge habit tracker tool. */
.hs-tracker { margin: 1.5em 0 2.5em; }
.hst-app {
	background: var(--global-palette9, #fff);
	border: 1px solid color-mix(in srgb, var(--global-palette1) 14%, transparent);
	border-radius: var(--hs-radius, 14px);
	box-shadow: var(--hs-shadow);
	padding: clamp(14px, 3vw, 28px);
	font-family: var(--global-body-font-family, Inter, sans-serif);
}

.hst-btn {
	appearance: none;
	border: 1px solid color-mix(in srgb, var(--global-palette1) 22%, transparent);
	background: var(--global-palette9, #fff);
	color: var(--global-palette3);
	border-radius: 8px;
	padding: .55em 1em;
	min-height: 44px;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hst-btn:hover { border-color: var(--global-palette1); }
.hst-btn.is-on, .hst-primary { background: var(--global-palette1); border-color: var(--global-palette1); color: #fff; }
.hst-primary:hover { background: var(--global-palette3); }
.hst-ghost { background: transparent; }
.hst-icon { width: 44px; padding: 0; font-size: 1.4rem; }

.hst-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hst-nav { display: flex; align-items: center; gap: 8px; }
.hst-period { font-family: var(--global-heading-font-family, "Playfair Display", serif); font-size: 1.25rem; font-weight: 700; color: var(--global-palette3); min-width: 9.5em; text-align: center; }
.hst-modes { display: flex; gap: 6px; }

.hst-empty { text-align: center; padding: 18px 0 8px; }
.hst-empty__title { color: var(--global-palette5); margin: 0 0 14px; }
.hst-templates { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hst-chip { border-radius: 999px; background: var(--global-palette8); }

.hst-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 6px; }
.hst-grid { border-collapse: separate; border-spacing: 3px; width: 100%; margin: 0; }
.hst-grid th, .hst-grid td { border: 0; padding: 0; text-align: center; background: none; }
.hst-grid thead th { font-size: .72rem; font-weight: 600; color: var(--global-palette6); padding-bottom: 4px; }
.hst-grid thead th.is-today { color: var(--global-palette2); }
.hst-dow, .hst-dom { display: block; line-height: 1.3; }
.hst-dom { font-size: .85rem; color: inherit; }
.hst-grid .hst-hname {
	position: sticky; left: 0; z-index: 2;
	background: var(--global-palette9, #fff);
	box-shadow: 6px 0 8px -6px rgba(20, 37, 29, .18);
	text-align: left;
	min-width: 12em; max-width: 16em;
	padding-right: 8px !important;
}
tbody .hst-hname { font-size: .92rem; font-weight: 600; color: var(--global-palette3); }
tbody .hst-hname { white-space: nowrap; }
.hst-name { display: inline-block; vertical-align: middle; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reset the theme's default button styling for the tracker's own small buttons. */
.hs-tracker .hst-del, .hs-tracker .hst-cell { box-shadow: none; text-transform: none; letter-spacing: 0; }
.hs-tracker .hst-del {
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: none; color: var(--global-palette6);
	font-size: 1.1rem; line-height: 1; width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0;
	cursor: pointer; opacity: .5; vertical-align: middle;
}
.hs-tracker .hst-del:hover { opacity: 1; color: var(--global-palette2); background: none; }

.hs-tracker .hst-cell {
	display: block; margin: 0; width: 100%; min-width: 28px; aspect-ratio: 1; max-height: 52px;
	border-radius: 7px;
	border: 1.5px solid color-mix(in srgb, var(--global-palette1) 20%, transparent);
	background: var(--global-palette8);
	cursor: pointer; padding: 0;
	transition: background-color .15s, transform .1s;
}
.hst-grid--week .hst-cell { min-width: 36px; }
.hst-grid--week tbody td { width: 12%; }
.hst-cell:hover:not(:disabled) { border-color: var(--global-palette1); }
.hst-cell:active:not(:disabled) { transform: scale(.92); }
.hst-cell.is-done {
	background: var(--global-palette1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
	border-color: var(--global-palette1);
}
.hst-cell:disabled { opacity: .35; cursor: default; }
td.is-today .hst-cell:not(.is-done) { border-color: var(--global-palette2); border-width: 2px; }
.hst-streak, .hst-streak-h { min-width: 34px; font-weight: 700; color: var(--global-palette2); font-size: .95rem; }

.hst-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 6px; }
.hst-stat { background: var(--global-palette8); border-radius: 10px; padding: 12px; text-align: center; }
.hst-stat__n { display: block; font-family: var(--global-heading-font-family, "Playfair Display", serif); font-size: 1.6rem; font-weight: 700; color: var(--global-palette1); line-height: 1.1; }
.hst-stat__l { font-size: .78rem; color: var(--global-palette6); }

.hst-add { display: flex; gap: 8px; margin-top: 16px; }
.hst-add input { flex: 1; min-width: 0; min-height: 44px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--global-palette1) 25%, transparent); padding: .5em .9em; font: inherit; background: var(--global-palette9, #fff); }

.hst-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.hst-note { font-size: .8rem; color: var(--global-palette6); margin-left: auto; }

.hst-nudge { margin-top: 18px; }
.hst-nudge[hidden] { display: none !important; }

@media (max-width: 640px) {
	.hst-bar { justify-content: center; }
	.hst-period { font-size: 1.05rem; min-width: 0; flex: 1; }
	.hst-nav { width: 100%; }
	.hst-modes { width: 100%; }
	.hst-modes .hst-btn { flex: 1; }
	.hst-grid .hst-hname { min-width: 8em; max-width: 9.5em; }
	.hst-grid.is-stacked .hst-hname { position: static; max-width: none; box-shadow: none; padding-top: 10px !important; }
	.hst-grid.is-stacked .hst-name { max-width: calc(100% - 32px); }
	.hst-grid.is-stacked { table-layout: fixed; }
	.hst-grid.is-stacked .hst-cell { min-width: 0; }
	.hst-grid--week .hst-cell { min-width: 30px; }
	.hst-stat__n { font-size: 1.3rem; }
	.hst-note { margin-left: 0; width: 100%; }
}

@media print {
	body * { visibility: hidden; }
	.hs-tracker, .hs-tracker * { visibility: visible; }
	.hs-tracker { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
	.hst-app { box-shadow: none; border: 0; padding: 0; }
	.hst-nav .hst-btn, .hst-modes, .hst-add, .hst-foot, .hst-del, .hst-empty, .hst-nudge { display: none !important; }
	.hst-period { font-size: 18pt; text-align: left; }
	.hst-scroll { overflow: visible; }
	.hst-cell { min-width: 0 !important; border-color: #9aa79f !important; background-color: #fff !important; }
	.hst-cell.is-done { -webkit-print-color-adjust: exact; print-color-adjust: exact; background-color: var(--global-palette1) !important; }
	.hst-grid .hst-hname { position: static; box-shadow: none; }
	.hs-progress, .hs-print-hide { display: none !important; }
	@page { size: landscape; margin: 12mm; }
}