/* AbleFrog Cloud. The website's palette and type, set for a working tool: quiet, ruled, roomy. */

:root {
	--paper: #fff;
	--side: #f6f8f1;
	--mist: #eef2e6;
	--mist-2: #e3e9d6;
	--pond: #14251a;
	--frog: #749338;
	--frog-deep: #56741f;
	--frog-bright: #b5cf78;
	--hair: #dce3cf;
	--text: #14251a;
	--muted: #5c6758;
	--faint: #8a9485;
	--danger: #b3261e;
	--danger-bg: #fbeceb;

	--display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
	--body: "Archivo", system-ui, sans-serif;

	--r-l: 18px;
	--r-m: 12px;
	--r-s: 8px;
	--side-w: 264px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--body);
	font-size: 0.975rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--display);
	font-optical-sizing: auto;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: var(--frog-deep);
	text-underline-offset: 0.18em;
}

img {
	display: block;
}

:focus-visible {
	outline: 2.5px solid var(--frog);
	outline-offset: 2px;
	border-radius: 6px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.grow {
	flex: 1;
	min-width: 0;
}

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

.sub {
	display: block;
	color: var(--muted);
	font-size: 0.875rem;
}

.icon {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- controls */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--frog-deep);
	border-radius: 999px;
	background: var(--frog-deep);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.button:hover {
	border-color: var(--pond);
	background: var(--pond);
}

.button-quiet {
	border-color: var(--hair);
	background: var(--paper);
	color: var(--text);
}

.button-quiet:hover {
	border-color: var(--text);
	background: var(--paper);
}

.button-small {
	padding: 6px 12px;
	font-size: 0.9rem;
}

.button.wide {
	width: 100%;
	padding-block: 12px;
}

.button.danger {
	border-color: var(--danger);
	background: var(--danger);
	color: #fff;
}

.button.danger:hover {
	border-color: #8c1d17;
	background: #8c1d17;
}

.button:disabled {
	cursor: default;
	opacity: 0.45;
}

.button:disabled:hover {
	border-color: var(--frog-deep);
	background: var(--frog-deep);
}

.button-quiet:disabled:hover {
	border-color: var(--hair);
	background: var(--paper);
}

.link-button,
.text-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--frog-deep);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.link-button:hover,
.text-link:hover {
	text-decoration: underline;
}

.danger-text,
.button-quiet.danger-text {
	color: var(--danger);
}

.icon-button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--r-s);
	background: none;
	color: var(--muted);
	cursor: pointer;
}

.icon-button:hover {
	background: var(--mist);
	color: var(--text);
}

input,
select {
	width: 100%;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--hair);
	border-radius: var(--r-s);
	background: var(--paper);
	color: var(--text);
	font: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input:hover,
select:hover {
	border-color: #c4ceb4;
}

input:focus,
select:focus {
	border-color: var(--frog);
	box-shadow: 0 0 0 3px rgb(116 147 56 / 0.18);
	outline: none;
}

input.short {
	width: 92px;
}

select {
	appearance: none;
	padding-right: 34px;
	background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6758' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
	cursor: pointer;
}

.select-quiet {
	width: auto;
	border-color: transparent;
	background-color: transparent;
	font-weight: 500;
}

.select-quiet:hover {
	border-color: var(--hair);
}

.field {
	display: grid;
	gap: 6px;
}

.field > span {
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.inline-form {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 440px;
}

.js .no-js {
	display: none;
}

/* ---------- notices */

.notice {
	margin-bottom: 20px;
	padding: 11px 14px;
	border-radius: var(--r-m);
	font-weight: 500;
}

.notice.error {
	background: var(--danger-bg);
	color: var(--danger);
}

.notice.done {
	background: var(--mist);
	color: var(--frog-deep);
}

.notice.info {
	background: var(--mist);
	color: var(--text);
}

/* ---------- a page's body on its way: shown only if it takes a moment */

.page-loading {
	display: flex;
	justify-content: center;
	padding: 72px 0;
	opacity: 0;
	animation: page-loading-in 0.2s ease-out 0.25s forwards;
}

.spinner {
	width: 22px;
	height: 22px;
	border: 2px solid var(--mist);
	border-top-color: var(--frog-deep);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes page-loading-in {
	to {
		opacity: 1;
	}
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinner {
		animation-duration: 2s;
	}
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--mist);
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.pill.on {
	color: var(--frog-deep);
}

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

/* ---------- confirms that open in place */

.confirm {
	position: relative;
	display: inline-block;
}

.confirm > summary {
	list-style: none;
	cursor: pointer;
}

.confirm > summary::-webkit-details-marker {
	display: none;
}

.pop {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 5;
	display: grid;
	gap: 12px;
	width: max-content;
	max-width: 280px;
	padding: 14px;
	border: 1px solid var(--hair);
	border-radius: var(--r-m);
	background: var(--paper);
	box-shadow: 0 10px 30px rgb(20 37 26 / 0.12);
	text-align: left;
	white-space: normal;
}

.pop .button {
	justify-self: start;
}

/* ================================================================ */
/* ---------- the app shell                                          */

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 50;
	padding: 8px 14px;
	border-radius: var(--r-s);
	background: var(--pond);
	color: #fff;
}

.skip:focus {
	top: 12px;
}

.shell {
	display: grid;
	grid-template-columns: var(--side-w) minmax(0, 1fr);
	min-height: 100vh;
}

.side {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100vh;
	padding: 20px 14px 14px;
	border-right: 1px solid var(--hair);
	background: var(--side);
}

.side-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px 6px;
}

.side-top .logo img {
	width: 116px;
	height: auto;
}

/* organization switcher */

.org-menu {
	position: relative;
}

.org-menu > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--hair);
	border-radius: var(--r-m);
	background: var(--paper);
	list-style: none;
	cursor: pointer;
}

.org-menu > summary::-webkit-details-marker {
	display: none;
}

.org-menu > summary:hover,
.org-menu[open] > summary {
	border-color: #c4ceb4;
}

.org-mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--r-s);
	background: var(--pond);
	color: var(--frog-bright);
	font-family: var(--display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.org-mark.has-icon {
	overflow: hidden;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px rgb(20 37 26 / 0.08);
}

.org-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.org-mark.large {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	font-size: 1.35rem;
}

.org-mark.small {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 0.7rem;
}

.org-label {
	display: grid;
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

.org-name {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 650;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow-wrap: anywhere;
}

.org-role {
	color: var(--muted);
	font-size: 0.8rem;
}

.chev {
	width: 16px;
	height: 16px;
	color: var(--faint);
}

.menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 10;
	display: grid;
	gap: 2px;
	padding: 6px;
	border: 1px solid var(--hair);
	border-radius: var(--r-m);
	background: var(--paper);
	box-shadow: 0 12px 32px rgb(20 37 26 / 0.14);
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: var(--r-s);
	color: var(--text);
	font-weight: 500;
	text-decoration: none;
}

.menu-item:hover {
	background: var(--mist);
}

.menu-item .icon {
	color: var(--frog-deep);
}

.menu-new {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid var(--hair);
}

.menu-new input {
	padding: 7px 8px;
	border-color: transparent;
}

.menu-new input:hover {
	border-color: var(--hair);
}

/* sections */

.side-nav {
	display: grid;
	gap: 2px;
}

.side-nav a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: var(--r-s);
	color: var(--muted);
	font-weight: 550;
	text-decoration: none;
}

.side-nav a:hover {
	background: var(--mist);
	color: var(--text);
}

.side-nav a[aria-current="page"] {
	background: var(--mist-2);
	color: var(--text);
}

.side-nav a[aria-current="page"] .icon {
	color: var(--frog-deep);
}

/* the signed-in person, at the bottom */

.side-foot {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--hair);
}

.me {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 6px 8px;
	border-radius: var(--r-s);
	color: var(--text);
	text-decoration: none;
}

.me:hover,
.me[aria-current="page"] {
	background: var(--mist);
}

.me-icon {
	color: var(--muted);
}

.me-text {
	display: grid;
	min-width: 0;
	line-height: 1.25;
}

.me-name,
.me-email {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.me-name {
	font-weight: 600;
}

.me-email {
	color: var(--muted);
	font-size: 0.8rem;
}

/* the page */

.main {
	width: 100%;
	max-width: 1000px;
	padding: 40px clamp(20px, 4vw, 56px) 80px;
}

.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	margin-bottom: 28px;
}

.page-head h1 {
	font-size: clamp(1.7rem, 2.6vw, 2.15rem);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.block {
	margin-top: 36px;
}

.block:first-of-type {
	margin-top: 0;
}

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

.block-head h2 {
	font-size: 1.15rem;
}

.block-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.empty-line {
	color: var(--muted);
}

.hint {
	margin: -8px 0 24px;
	color: var(--muted);
	font-size: 0.875rem;
}

/* storage: the one big figure */

.storage-block {
	padding: 24px 26px;
	border-radius: var(--r-l);
	background: var(--mist);
}

.storage-figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.storage-used {
	font-family: var(--display);
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.storage-of {
	color: var(--muted);
	font-size: 1.05rem;
}

.meter {
	display: flex;
	height: 12px;
	margin-top: 18px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--hair);
}

.fill {
	height: 100%;
}

.fill.now {
	background: var(--frog-deep);
}

.fill.old {
	background: var(--frog-bright);
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-top: 12px;
	color: var(--muted);
	font-size: 0.875rem;
}

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

.key {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.key.now {
	background: var(--frog-deep);
}

.key.old {
	background: var(--frog-bright);
}

/* song and setlist marks */

.kind {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--mist);
	color: var(--frog-deep);
}

.kind .icon {
	width: 15px;
	height: 15px;
}

.kind.setlist {
	background: #e7ecf2;
	color: #3d5a78;
}

/* recent changes */

.activity {
	border-top: 1px solid var(--hair);
}

.activity li {
	display: grid;
	grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--hair);
}

.act-title {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.act-who {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.act-when {
	color: var(--muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* tabs */

.tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--hair);
}

.tabs a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: -1px;
	padding: 9px 12px;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font-weight: 600;
	text-decoration: none;
}

.tabs a:hover {
	color: var(--text);
}

.tabs a[aria-current="page"] {
	border-color: var(--frog-deep);
	color: var(--text);
}

.tab-count {
	padding: 0 7px;
	border-radius: 999px;
	background: var(--mist);
	color: var(--muted);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

/* tables */

.table-wrap {
	overflow-x: auto;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th {
	padding: 0 12px 10px;
	border-bottom: 1px solid var(--hair);
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.table td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--hair);
	vertical-align: middle;
}

.table th:first-child,
.table td:first-child {
	padding-left: 0;
}

.table th:last-child,
.table td:last-child {
	padding-right: 0;
}

/* ---------- the library: one item per tbody, a row per song */

/* the table's highlight reaches a little past its edges */
.table-wrap:has(.library) {
	margin-inline: -12px;
	padding-inline: 12px;
}

@media (min-width: 720px) {
	/* wide enough not to scroll, so a menu or confirm can hang below the last row */
	.table-wrap:has(.library),
	.table-wrap:has(.item-menu) {
		overflow: visible;
	}
}

/* hovering an item: one rounded highlight a little wider than the rules, which step aside for it.
   Its corners and the shadows that widen it are always there, clear, so only colours change and all of
   it fades in together. */
.library tbody td {
	transition: background-color 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.library tbody tr:first-child td.name {
	border-top-left-radius: 10px;
}

.library tbody tr:last-child td.name {
	border-bottom-left-radius: 10px;
}

.library tbody td.name {
	box-shadow: -10px 0 0 transparent;
}

.library tbody tr:first-child td:last-child {
	border-radius: 0 10px 10px 0;
	box-shadow: 10px 0 0 transparent;
}

.library tbody:hover td {
	background: var(--side);
	border-bottom-color: transparent;
}

.library tbody:has(+ tbody:hover) td {
	border-bottom-color: transparent;
}

.library tbody:hover td.name {
	box-shadow: -10px 0 0 var(--side);
}

.library tbody:hover tr:first-child td:last-child {
	box-shadow: 10px 0 0 var(--side);
}

/* a project's songs: close together, with no rules between them */
.library .project td {
	vertical-align: top;
}

.library .project td.name {
	padding-block: 4px;
	vertical-align: middle;
}

.library .project tr:not(:last-child) td.name {
	border-bottom: 0;
}

.library .project tr:first-child td.name {
	padding-top: 11px;
}

.library .project tr:last-child td.name {
	padding-bottom: 11px;
}

/* the rest of the row lines up with the first line */
.library .project tr:first-child td:not(.name) {
	padding-top: 14px;
}

.library .project tr:first-child td.end {
	padding-top: 8px;
}

/* a project: its name, its songs listed under it */
.library .project tr:not(.project-head) .cell-name {
	padding-left: 40px;
	color: var(--muted);
	font-weight: 500;
}

.library .project-head td.name {
	padding-bottom: 6px;
}

/* an item's ⋯ menu */
.item-menu {
	position: relative;
	display: inline-block;
}

.item-menu > summary {
	list-style: none;
	color: var(--faint);
	cursor: pointer;
}

.item-menu > summary::-webkit-details-marker,
.menu-confirm > summary::-webkit-details-marker {
	display: none;
}

.library tbody:hover .item-menu > summary,
.item-menu[open] > summary {
	color: var(--muted);
}

.item-menu[open] > summary {
	background: var(--mist-2);
}

.menu-pop {
	gap: 2px;
	min-width: 180px;
	padding: 6px;
}

.menu-confirm > summary {
	list-style: none;
	cursor: pointer;
}

.danger-item,
.danger-item .icon {
	color: var(--danger);
}

.menu-item.danger-item:hover {
	background: var(--danger-bg);
}

/* Delete picked: the menu becomes its confirm */
.menu-pop:has(.menu-confirm[open]) {
	padding: 14px;
}

.menu-pop:has(.menu-confirm[open]) > :not(.menu-confirm[open]),
.menu-confirm[open] > summary {
	display: none;
}

.menu-confirm-body {
	display: grid;
	gap: 12px;
}

.menu-confirm-body .button {
	justify-self: start;
}

.pop p {
	color: var(--text);
	line-height: 1.45;
}

.table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.table .nowrap {
	white-space: nowrap;
}

.table .end {
	text-align: right;
	white-space: nowrap;
}

.cell-name {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
}

.empty {
	display: grid;
	gap: 4px;
	padding: 48px 24px;
	border: 1px dashed var(--hair);
	border-radius: var(--r-l);
	text-align: center;
}

.empty p:first-child {
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 600;
}

/* people */

.person-text {
	display: grid;
	min-width: 0;
	line-height: 1.35;
}

.person-name {
	font-weight: 600;
}

.role {
	color: var(--muted);
	font-weight: 500;
}

.row-actions {
	display: inline-flex;
	gap: 16px;
}

.invite-bar {
	display: flex;
	align-items: end;
	gap: 10px;
	margin-bottom: 20px;
	padding: 18px;
	border-radius: var(--r-l);
	background: var(--mist);
}

.invite-bar .field:not(.grow) {
	width: 140px;
}

/* plans */

.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.plan {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 18px 20px;
	border: 1px solid var(--hair);
	border-radius: var(--r-l);
	background: var(--paper);
}

.plan .button,
.plan-tag {
	margin-top: 14px;
}

.plan-size {
	font-family: var(--display);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.plan-price {
	color: var(--muted);
}

.plan.on {
	border-color: var(--pond);
	background: var(--pond);
	color: #fff;
}

.plan.on .plan-price {
	color: #a9b6a0;
}

.plan-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--frog-bright);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 32px;
}

.plan-tag .icon {
	width: 16px;
	height: 16px;
}

.plans-form {
	display: grid;
	justify-items: start;
	gap: 18px;
}

.plans-form .plans {
	width: 100%;
}

.plan.pickable {
	position: relative;
	cursor: pointer;
}

.plan.pickable input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.plan.pickable:hover {
	border-color: #c4ceb4;
}

.plan.pickable:has(input:checked) {
	border-color: var(--frog-deep);
	box-shadow: inset 0 0 0 1px var(--frog-deep);
}

.plan.pickable:has(input:focus-visible) {
	outline: 2.5px solid var(--frog);
	outline-offset: 2px;
}

/* settings-style rows: what it is on the left, the control on the right */

.rows {
	border-top: 1px solid var(--hair);
}

.row {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 12px 40px;
	padding: 22px 0;
	border-bottom: 1px solid var(--hair);
}

.row-label h2 {
	font-family: var(--body);
	font-size: 0.975rem;
	font-weight: 650;
	letter-spacing: 0;
}

.row-label p {
	margin-top: 4px;
	color: var(--muted);
	font-size: 0.875rem;
}

.row-control {
	display: grid;
	align-content: start;
	gap: 10px;
}

.row-control > p {
	padding-top: 1px;
}

/* the org icon in settings */

.icon-edit {
	display: flex;
	align-items: center;
	gap: 16px;
}

.icon-form {
	display: flex;
}

.file-button {
	cursor: pointer;
}

.file-button:focus-within {
	outline: 2.5px solid var(--frog);
	outline-offset: 2px;
}

.icon-error {
	color: var(--danger);
}

.org-list {
	display: grid;
	max-width: 440px;
	border: 1px solid var(--hair);
	border-radius: var(--r-m);
}

.org-list li + li {
	border-top: 1px solid var(--hair);
}

.org-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	color: var(--text);
	font-weight: 550;
	text-decoration: none;
}

.org-list a:hover {
	background: var(--side);
}

/* narrow screens: the sidebar becomes a bar across the top */

@media (max-width: 860px) {
	.shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.side {
		position: static;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 12px;
		height: auto;
		padding: 14px 16px 0;
		border-right: 0;
		border-bottom: 1px solid var(--hair);
	}

	.side-top {
		padding: 0;
	}

	.org-menu {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.side-foot {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.me-text {
		display: none;
	}

	.side-nav {
		grid-column: 1 / -1;
		display: flex;
		gap: 2px;
		margin: 0 -16px;
		padding: 0 12px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.side-nav a {
		flex: none;
		padding: 10px 10px 12px;
		border-bottom: 2px solid transparent;
		border-radius: 0;
	}

	.side-nav a[aria-current="page"] {
		border-color: var(--frog-deep);
		background: none;
	}

	.main {
		padding-top: 28px;
	}

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

	.invite-bar {
		flex-wrap: wrap;
	}

	.invite-bar .field.grow {
		flex-basis: 100%;
	}

	.activity li {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.act-who {
		display: none;
	}
}

/* ================================================================ */
/* ---------- one-card pages: signing in, invites, the app's sign-in */

body.solo {
	min-height: 100vh;
	background: var(--side);
}

.solo-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 22px clamp(18px, 4vw, 40px);
}

.solo-top .logo img {
	width: 132px;
	height: auto;
}

.solo-out {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.9rem;
}

.solo-out .who {
	color: var(--muted);
}

.solo-main {
	display: grid;
	justify-items: center;
	padding: clamp(24px, 7vh, 80px) 18px 64px;
}

.card {
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 420px;
	padding: clamp(26px, 5vw, 38px);
	border: 1px solid var(--hair);
	border-radius: var(--r-l);
	background: var(--paper);
	box-shadow: 0 1px 2px rgb(20 37 26 / 0.04), 0 18px 48px -24px rgb(20 37 26 / 0.18);
}

.card h1 {
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.card .notice {
	margin: 0;
}

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

.lede strong {
	color: var(--text);
}

.stack {
	display: grid;
	gap: 14px;
}

.stack .button {
	margin-top: 4px;
}

.alt {
	text-align: center;
}

.alt .link-button {
	font-size: 0.925rem;
}

.below {
	margin-top: 20px;
	color: var(--muted);
	text-align: center;
}

.as {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	border-radius: var(--r-s);
	background: var(--mist);
	font-size: 0.925rem;
}

.as-email {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
}

.badge-row {
	display: flex;
}

.role-badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--mist);
	color: var(--frog-deep);
	font-size: 0.8rem;
	font-weight: 700;
}

.device img {
	width: 48px;
	height: 48px;
}

.big-mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: 700;
}

.big-mark.good {
	background: var(--mist);
	color: var(--frog-deep);
}

.big-mark.bad {
	background: var(--danger-bg);
	color: var(--danger);
}

/* the emailed code: six tiles over one real input */

.code {
	position: relative;
}

.code input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	font-size: 16px;
	letter-spacing: 3em;
	opacity: 0.01;
}

.code input:focus {
	box-shadow: none;
}

.cells {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.cells span {
	display: grid;
	place-items: center;
	height: 56px;
	border: 1px solid var(--hair);
	border-radius: var(--r-m);
	background: var(--paper);
	font-family: var(--display);
	font-size: 1.6rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.cells span.filled {
	border-color: #b8c3a6;
}

.code.focused .cells span.active {
	border-color: var(--frog);
	box-shadow: 0 0 0 3px rgb(116 147 56 / 0.18);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

/* choosing an icon needs the page's script, which shrinks it first */
html:not(.js) .icon-form {
	display: none;
}

/* ================================================================ */
/* ---------- admin                                                  */

/* the sidebar's Admin group: under the org's own sections, set apart by a rule */
.side-admin {
	padding-top: 14px;
	border-top: 1px solid var(--hair);
}

.side-label {
	padding: 0 10px 4px;
	color: var(--faint);
	font-size: 0.8rem;
	font-weight: 600;
}

/* an org opened by an admin who isn't in it: the one loud thing, so it's never mistaken for your own */
.admin-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -12px 0 28px;
	padding: 10px 12px 10px 14px;
	border-radius: var(--r-m);
	background: var(--pond);
	color: #e9efdf;
	font-weight: 500;
}

.admin-strip .icon {
	color: var(--frog-bright);
}

.admin-strip p {
	flex: 1;
}

.admin-strip a {
	padding: 5px 10px;
	border-radius: var(--r-s);
	color: var(--frog-bright);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.admin-strip a:hover {
	background: rgb(255 255 255 / 0.08);
}

/* a heading's count */
.head-count {
	margin-left: 12px;
	color: var(--faint);
	font-family: var(--body);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.page-head h1 .pill {
	margin-left: 12px;
	vertical-align: 0.35em;
}

.admin-pill {
	margin-left: 8px;
	padding: 1px 8px;
	font-size: 0.72rem;
}

.admin-pill::before {
	display: none;
}

/* searching a list */
.search {
	position: relative;
	width: min(320px, 100%);
}

.search .icon {
	position: absolute;
	top: 50%;
	left: 11px;
	width: 16px;
	height: 16px;
	color: var(--faint);
	transform: translateY(-50%);
	pointer-events: none;
}

.search input {
	padding-left: 34px;
}

/* paging through a list */
.pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

.pager .muted {
	margin-right: 8px;
	font-variant-numeric: tabular-nums;
}

/* the admin's tables: denser, with each row's main link the way in */
.admin-table td {
	padding-block: 9px;
}

.admin-table tbody tr {
	transition: background-color 0.12s;
}

.admin-table tbody tr:hover {
	background: var(--side);
}

.cell-link {
	color: inherit;
	text-decoration: none;
}

.cell-link:hover .person-name,
.cell-link:hover > span:last-child,
.cell-link.cell-name:hover > span > span:first-child {
	text-decoration: underline;
	text-decoration-color: var(--frog);
	text-underline-offset: 3px;
}

.cell-link.cell-name {
	gap: 10px;
}

.plain-link {
	color: inherit;
	text-decoration: none;
}

.plain-link:hover > span:first-child {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.table .clip {
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table .num .sub {
	display: block;
}

.tab-count.alert {
	background: var(--danger-bg);
	color: var(--danger);
}

/* menu entries that are buttons (a form's) look like the links beside them */
button.menu-item {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* a person's facts, and lists of what they're in */
.facts {
	display: grid;
	gap: 8px;
}

.facts div {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 12px;
}

.facts dt {
	color: var(--muted);
}

.facts code {
	font-size: 0.85rem;
}

.link-list,
.plain-list {
	display: grid;
	gap: 2px;
	max-width: 440px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.plain-list {
	gap: 10px;
}

.link-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline: -8px;
	padding: 6px 8px;
	border-radius: var(--r-s);
	color: var(--text);
	font-weight: 500;
	text-decoration: none;
}

.link-list a:hover {
	background: var(--mist);
}

.form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pop .field input {
	min-width: 220px;
}

/* picking one of a few, inside a menu */
.choice-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
}

.choice-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var(--r-s);
	font-weight: 500;
	cursor: pointer;
}

.choice-list label:hover {
	background: var(--mist);
}

.choice-list input {
	width: auto;
	margin: 0;
	accent-color: var(--frog-deep);
}

.menu-pop:has(.menu-confirm[open]) {
	min-width: 260px;
}

/* the storage page's two figures: what's in R2, and what it costs */
.ledger {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0 0 40px;
	border-block: 1px solid var(--hair);
}

.ledger > div {
	padding: 20px 24px 22px 0;
}

.ledger > div + div {
	padding-left: 24px;
	border-left: 1px solid var(--hair);
}

.ledger dt {
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.ledger dd {
	margin: 4px 0 6px;
	font-family: var(--display);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.ledger-unit {
	margin-left: 8px;
	color: var(--muted);
	font-family: var(--body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
}

.ledger p {
	max-width: 40ch;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* an org's storage against its limit */
.bar-cell {
	width: 120px;
}

.usage-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--mist);
	overflow: hidden;
}

.usage-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--frog);
}

.usage-bar.over > span {
	background: var(--danger);
}

/* the app versions in use */
.versions {
	margin-bottom: 28px;
}

.versions h2 {
	margin-bottom: 10px;
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.versions ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.versions li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	border: 1px solid var(--hair);
	border-radius: var(--r-m);
}

.version {
	padding: 2px 8px;
	border-radius: var(--r-s);
	background: var(--mist);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.version.newest {
	background: var(--pond);
	color: #e9efdf;
}

/* emails sent to someone */
.email-list {
	margin-bottom: 14px;
}

.email-line {
	display: flex;
	align-items: center;
	gap: 10px;
}

.email-line .pill {
	padding: 1px 8px;
	font-size: 0.72rem;
}

.email-list .sub {
	margin-top: 2px;
}

.button .icon {
	width: 16px;
	height: 16px;
}

q {
	quotes: "“" "”";
}