/**
 * Front portal styles. Self-contained: the portal never loads the theme.
 */

:root {
	--ica-bg: #f4f5f8;
	--ica-surface: #ffffff;
	--ica-ink: #16181d;
	--ica-ink-soft: #5b6070;
	--ica-line: #e0e2ea;
	--ica-accent: #4b3bd6;
	--ica-accent-soft: #ece9ff;
	--ica-danger: #b3261e;
	--ica-danger-soft: #fdeceb;
	--ica-ok: #1c6b45;
	--ica-ok-soft: #e6f4ec;
	--ica-radius: 12px;
	--ica-shadow: 0 1px 2px rgba(16, 18, 25, .06), 0 8px 24px rgba(16, 18, 25, .05);
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win over any display rule declared below. */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	padding: 0;
}

.ica-body {
	background: var(--ica-bg);
	color: var(--ica-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.1rem; }
p { margin: 0 0 .8em; }
a { color: var(--ica-accent); }

/* ------------------------------------------------------------------ Forms */

.ica-form label,
.ica-card label {
	display: block;
	font-weight: 600;
	font-size: .85rem;
	margin: 1rem 0 .3rem;
}

.ica-form label:first-child { margin-top: 0; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid var(--ica-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ica-ink);
	font: inherit;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--ica-accent);
	outline-offset: 1px;
	border-color: var(--ica-accent);
}

input:disabled { background: #f6f7f9; color: var(--ica-ink-soft); }

.ica-check {
	display: flex !important;
	align-items: center;
	gap: .7rem;
	font-weight: 400 !important;
	font-size: .95rem !important;
	cursor: pointer;
}

/* These confirmations carry the rules of the contest, so they are sized to be
   read and tapped, not squinted at. */
.ica-check input[type="checkbox"],
.ica-follow-item input[type="checkbox"] {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--ica-accent);
	cursor: pointer;
}

.ica-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- Buttons */

.ica-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .55rem .9rem;
	border: 1px solid var(--ica-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ica-ink);
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}

.ica-btn:hover { background: #f6f7fb; }
.ica-btn:disabled { opacity: .5; cursor: not-allowed; }

.ica-btn-primary {
	background: var(--ica-accent);
	border-color: var(--ica-accent);
	color: #fff;
}
.ica-btn-primary:hover { background: #3f31bb; }

.ica-btn-ghost { background: transparent; border-color: transparent; }
.ica-btn-ghost:hover { background: rgba(16, 18, 25, .05); }

.ica-btn-danger {
	background: var(--ica-danger);
	border-color: var(--ica-danger);
	color: #fff;
}
.ica-btn-danger:hover { background: #90201a; }

.ica-btn-danger-ghost { color: var(--ica-danger); border-color: transparent; background: transparent; }
.ica-btn-danger-ghost:hover { background: var(--ica-danger-soft); }

.ica-btn-block { width: 100%; margin-top: 1.2rem; }

/* ---------------------------------------------------------------- Notices */

.ica-notice {
	padding: .7rem .9rem;
	border-radius: 8px;
	border: 1px solid var(--ica-line);
	background: #fff;
	margin: 0 0 1rem;
	font-size: .9rem;
}

.ica-notice-success { background: var(--ica-ok-soft); border-color: #bfe0cd; color: var(--ica-ok); }
.ica-notice-error { background: var(--ica-danger-soft); border-color: #f0c4c1; color: var(--ica-danger); }

/* ------------------------------------------------------------ Auth screens */

.ica-body-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem 1rem;
}

.ica-auth { width: 100%; max-width: 420px; }

.ica-auth-card {
	background: var(--ica-surface);
	border: 1px solid var(--ica-line);
	border-radius: var(--ica-radius);
	box-shadow: var(--ica-shadow);
	padding: 2rem;
}

.ica-auth-brand {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ica-accent);
	font-weight: 700;
	margin-bottom: .4rem;
}

.ica-auth-sub { color: var(--ica-ink-soft); font-size: .92rem; }

.ica-auth-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.2rem;
	font-size: .88rem;
}

.ica-auth-support {
	text-align: center;
	margin-top: 1rem;
	font-size: .82rem;
	color: var(--ica-ink-soft);
}

/* -------------------------------------------------------------- App shell */

.ica-appbar {
	background: var(--ica-surface);
	border-bottom: 1px solid var(--ica-line);
	position: sticky;
	top: 0;
	z-index: 20;
	/* Installed on the home screen, the page can start behind the clock and the
	   battery. Reserve whatever the phone says is unsafe up there. */
	padding-top: env(safe-area-inset-top, 0px);
}

.ica-appbar-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: .7rem 1.2rem;
	padding-left: calc(1.2rem + env(safe-area-inset-left, 0px));
	padding-right: calc(1.2rem + env(safe-area-inset-right, 0px));
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.ica-brand {
	display: flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	color: var(--ica-ink);
	font-weight: 700;
}

.ica-brand-mark {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: linear-gradient(135deg, #f9a825, #d81b60 55%, #4b3bd6);
	display: inline-block;
}

.ica-appnav { display: flex; gap: .3rem; margin-right: auto; }

.ica-appnav a {
	padding: .4rem .7rem;
	border-radius: 7px;
	text-decoration: none;
	color: var(--ica-ink-soft);
	font-weight: 600;
	font-size: .9rem;
}

.ica-appnav a:hover { background: rgba(16, 18, 25, .05); }
.ica-appnav a.is-active { background: var(--ica-accent-soft); color: var(--ica-accent); }

.ica-appuser { display: flex; align-items: center; gap: .7rem; }
.ica-appuser-name { font-size: .88rem; color: var(--ica-ink-soft); }

.ica-app {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.4rem 1.2rem 4rem;
	padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

.ica-app-narrow { max-width: 700px; }

/* ------------------------------------------------------------------- Tabs */

.ica-tabbar {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.ica-tabs {
	display: flex;
	gap: .35rem;
	overflow-x: auto;
	flex: 1 1 340px;
	padding-bottom: .2rem;
}

.ica-tab {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .7rem;
	border: 1px solid var(--ica-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ica-ink-soft);
	font-size: .87rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

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

.ica-tab-close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	padding: 0 0 0 .1rem;
}

.ica-tab-close:hover { opacity: 1; }

.ica-tab-add {
	padding: .5rem .9rem;
	border-radius: 999px;
	border: 1px dashed var(--ica-line);
	background: #fff;
	font: inherit;
	font-size: .87rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--ica-ink-soft);
	white-space: nowrap;
}

.ica-rename { display: flex; gap: .4rem; align-items: center; margin-top: .5rem; }
.ica-rename .ica-title-input { flex: 1 1 auto; border-color: var(--ica-line); background: #fff; }

.ica-tab-add:hover { border-color: var(--ica-accent); color: var(--ica-accent); }

.ica-tabbar-tools { display: flex; gap: .4rem; align-items: center; }
.ica-tabbar-tools input[type="search"] { width: 220px; }

/* -------------------------------------------------------------- Workspace */

.ica-workspace-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: .9rem;
	flex-wrap: wrap;
}

.ica-title-input {
	font-size: 1.35rem;
	font-weight: 700;
	border: 1px solid transparent;
	background: transparent;
	padding: .2rem .4rem;
	margin-left: -.4rem;
	border-radius: 7px;
}

.ica-title-input:hover { border-color: var(--ica-line); background: #fff; }

.ica-workspace-meta {
	display: flex;
	gap: .8rem;
	align-items: center;
	flex-wrap: wrap;
	font-size: .82rem;
	color: var(--ica-ink-soft);
	margin: 0;
}

.ica-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--ica-accent-soft);
	color: var(--ica-accent);
	padding: .1rem .45rem;
	border-radius: 5px;
	font-weight: 700;
	font-size: .78rem;
}

.ica-savestate { font-style: italic; }
.ica-workspace-actions { display: flex; gap: .4rem; }

.ica-subtabs {
	display: flex;
	gap: .2rem;
	border-bottom: 1px solid var(--ica-line);
	margin-bottom: 1.1rem;
	overflow-x: auto;
}

.ica-subtabs button {
	border: 0;
	background: transparent;
	padding: .6rem .9rem;
	font: inherit;
	font-weight: 600;
	font-size: .92rem;
	color: var(--ica-ink-soft);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.ica-subtabs button.is-active { color: var(--ica-accent); border-bottom-color: var(--ica-accent); }

.ica-panel { display: none; }
.ica-panel.is-active { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }

/* ------------------------------------------------------------------ Cards */

.ica-card {
	background: var(--ica-surface);
	border: 1px solid var(--ica-line);
	border-radius: var(--ica-radius);
	box-shadow: var(--ica-shadow);
	padding: 1.2rem;
	margin-bottom: 1rem;
}

.ica-panel .ica-card { margin-bottom: 0; }
.ica-card-danger { border-color: #f0c4c1; }
.ica-card-danger h2 { color: var(--ica-danger); }

.ica-hint { color: var(--ica-ink-soft); font-size: .85rem; }

.ica-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ica-inline input[type="url"], .ica-inline input[type="search"] { flex: 1 1 200px; }

.ica-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.ica-field-message { font-size: .85rem; margin: .5rem 0 0; }
.ica-field-message.is-error { color: var(--ica-danger); }
.ica-field-message.is-ok { color: var(--ica-ok); }

.ica-recommendation {
	background: var(--ica-accent-soft);
	color: var(--ica-accent);
	border-radius: 8px;
	padding: .6rem .8rem;
	font-size: .85rem;
	margin: 1rem 0;
}

.ica-empty {
	background: var(--ica-surface);
	border: 1px dashed var(--ica-line);
	border-radius: var(--ica-radius);
	padding: 3rem 1.5rem;
	text-align: center;
}

/* ---------------------------------------------------------------- Preview */

.ica-preview { margin-top: .8rem; }
.ica-preview iframe { max-width: 100%; border: 1px solid var(--ica-line); border-radius: 8px; }
.ica-preview-link { display: inline-block; margin-top: .5rem; font-size: .88rem; }

/* ------------------------------------------------------------ Follow list */

.ica-follow-list { display: grid; gap: .4rem; margin-top: .8rem; }

.ica-follow-list { gap: .5rem; }

.ica-follow-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem .9rem;
	border: 1px solid var(--ica-line);
	border-radius: 10px;
	font-size: .98rem;
	background: #fff;
}

.ica-follow-item label { font-size: 1rem !important; }
.ica-follow-item a { margin-left: auto; font-size: .88rem; }

/* Once ticked, the row itself shows it: no need to look for the small mark. */
.ica-follow-item:has(input:checked),
.ica-check-card:has(input:checked) {
	border-color: #bfe0cd;
	background: var(--ica-ok-soft);
}

/* --------------------------------------------------------------- Comments */

.ica-progress { margin-bottom: 1rem; }
.ica-progress > div { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .35rem; }

.ica-progress-track {
	display: block;
	height: 8px;
	background: #eceef4;
	border-radius: 999px;
	overflow: hidden;
}

.ica-progress-track span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ica-accent);
	transition: width .2s ease;
}

.ica-comment-workspace {
	border: 1px solid var(--ica-line);
	border-radius: 10px;
	padding: 1rem;
}

.ica-comment-workspace header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .85rem;
	color: var(--ica-ink-soft);
	margin-bottom: .6rem;
}

.ica-comment-workspace footer { display: flex; justify-content: space-between; margin-top: .8rem; }

#ica-comment-text {
	font-size: 1.02rem;
	background: #f7f8fb;
	border-radius: 8px;
	padding: .9rem;
	margin: 0 0 .9rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.ica-pill {
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	background: #eceef4;
	color: var(--ica-ink-soft);
}

.ica-pill.is-done { background: var(--ica-ok-soft); color: var(--ica-ok); }

.ica-comment-index {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-top: 1rem;
}

.ica-index-chip {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid var(--ica-line);
	background: #fff;
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	color: var(--ica-ink-soft);
	cursor: pointer;
}

.ica-index-chip.is-current { border-color: var(--ica-accent); color: var(--ica-accent); }
.ica-index-chip.is-done { background: var(--ica-ok-soft); border-color: #bfe0cd; color: var(--ica-ok); }

/* ---------------------------------------------------------------- History */

.ica-history { list-style: none; margin: 0; padding: 0; font-size: .85rem; }

.ica-history li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--ica-line);
	color: var(--ica-ink-soft);
}

.ica-history li:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- Drawer */

.ica-drawer {
	position: fixed;
	inset: 0;
	background: rgba(16, 18, 25, .45);
	display: flex;
	justify-content: flex-end;
	z-index: 40;
}

.ica-drawer-panel {
	background: #fff;
	width: min(420px, 100%);
	height: 100%;
	overflow-y: auto;
	padding: 1.2rem;
}

.ica-drawer-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.ica-archive-item {
	border: 1px solid var(--ica-line);
	border-radius: 9px;
	padding: .7rem .8rem;
	margin-bottom: .6rem;
}

.ica-archive-item h3 { font-size: .95rem; margin-bottom: .2rem; }
.ica-archive-item p { font-size: .8rem; color: var(--ica-ink-soft); margin-bottom: .5rem; }

/* ------------------------------------------------------------------ Table */

.ica-table-scroll { overflow-x: auto; }

.ica-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ica-table th, .ica-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--ica-line); vertical-align: top; }
.ica-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ica-ink-soft); }
.ica-table td small { display: block; color: var(--ica-ink-soft); }

.ica-pager { justify-content: center; margin-top: .8rem; font-size: .85rem; }

.ica-state { font-weight: 700; font-size: .8rem; }
.ica-state.is-ok { color: var(--ica-ok); }
.ica-state.is-warn { color: var(--ica-danger); }

.ica-row-actions { display: flex; gap: .3rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- People */

.ica-people {
	list-style: none;
	counter-reset: ica-person;
	margin: .8rem 0 0;
	padding: 0;
	display: grid;
	gap: .35rem;
}

.ica-person {
	counter-increment: ica-person;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .7rem;
	border: 1px solid var(--ica-line);
	border-radius: 9px;
	background: #fff;
	font-size: .92rem;
}

.ica-person::before {
	content: counter(ica-person);
	flex: 0 0 auto;
	min-width: 1.6rem;
	height: 1.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--ica-accent-soft);
	color: var(--ica-accent);
	font-size: .78rem;
	font-weight: 700;
}

.ica-person-name { flex: 1 1 auto; word-break: break-word; }

/* ------------------------------------------------- Suggestions and book */

.ica-autocomplete { position: relative; }

.ica-suggest {
	list-style: none;
	margin: 0;
	padding: .25rem;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: #fff;
	border: 1px solid var(--ica-line);
	border-radius: 10px;
	box-shadow: var(--ica-shadow);
	max-height: 260px;
	overflow-y: auto;
}

.ica-suggest-item {
	padding: .65rem .7rem;
	border-radius: 7px;
	cursor: pointer;
	font-size: .95rem;
}

.ica-suggest-item:hover { background: var(--ica-accent-soft); color: var(--ica-accent); }

.ica-person-book { align-items: center; }
.ica-person-body { flex: 1 1 auto; display: grid; gap: .15rem; min-width: 0; }
.ica-person-handle { font-size: .82rem; color: var(--ica-ink-soft); word-break: break-all; }

.ica-person-nameinput {
	border: 1px solid transparent;
	background: transparent;
	padding: .25rem .35rem;
	font-weight: 600;
	font-size: .95rem;
	border-radius: 6px;
}

.ica-person-nameinput:hover { border-color: var(--ica-line); background: #fff; }

.ica-book-list { margin-top: .8rem; }
.ica-book-tools { margin-top: .5rem; }

.ica-person-remove {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--ica-ink-soft);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: .2rem .4rem;
	border-radius: 6px;
}

.ica-person-remove:hover { background: var(--ica-danger-soft); color: var(--ica-danger); }

/* -------------------------------------------------------------- Actions */

/* --------------------------------------------------------------- Landing */

.ica-body-landing {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem 1rem;
	background: linear-gradient(160deg, #f7f5ff, #fff5ee 60%, #ffeef5);
}

.ica-landing { width: 100%; max-width: 460px; }

.ica-landing-card {
	background: var(--ica-surface);
	border: 1px solid var(--ica-line);
	border-radius: 16px;
	box-shadow: var(--ica-shadow);
	padding: 2.4rem 1.8rem;
	text-align: center;
}

.ica-landing-mark {
	display: inline-block;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, #f9a825, #d81b60 55%, #4b3bd6);
	margin-bottom: 1rem;
}

.ica-landing-card h1 { font-size: 1.6rem; margin-bottom: .6rem; }

.ica-landing-motto {
	font-weight: 700;
	color: #8a4b16;
	background: linear-gradient(135deg, #fff4e0, #ffe9f2);
	border: 1px solid #f6dcc9;
	border-radius: 10px;
	padding: .7rem .9rem;
	margin: 0 0 1rem;
}

.ica-landing-sub { color: var(--ica-ink-soft); font-size: .95rem; }
.ica-landing-note { margin: .9rem 0 0; font-size: .85rem; color: var(--ica-ink-soft); }

@media (max-width: 720px) {
	.ica-landing-card { padding: 1.8rem 1.2rem; }
	.ica-landing-card h1 { font-size: 1.4rem; }
}

/* ----------------------------------------------------------- Prize badge */

.ica-prize {
	display: flex;
	align-items: center;
	gap: .8rem;
	background: linear-gradient(135deg, #fff6df, #ffe6ef);
	border: 1px solid #f0d9b5;
	border-radius: 11px;
	padding: .8rem 1rem;
	margin-bottom: 1rem;
}

.ica-prize-icon { font-size: 1.7rem; line-height: 1; }
.ica-prize-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: #8a6417; font-weight: 700; }
.ica-prize strong { font-size: 1.02rem; color: #6b4a10; }

/* ----------------------------------------------------------------- Modes */

.ica-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.ica-mode {
	text-align: left;
	border: 1px solid var(--ica-line);
	border-radius: 10px;
	background: #fff;
	padding: .7rem .8rem;
	cursor: pointer;
	font: inherit;
}

.ica-mode strong { display: block; font-size: .92rem; }
.ica-mode span { display: block; font-size: .78rem; color: var(--ica-ink-soft); margin-top: .15rem; }
.ica-mode.is-active { border-color: var(--ica-accent); background: var(--ica-accent-soft); }
.ica-mode.is-active strong { color: var(--ica-accent); }

.ica-card-modes { padding-bottom: 1rem; }

/* ----------------------------------------------------------- Paste rules */

.ica-card-paste { border-color: #cfc9f7; background: linear-gradient(180deg, #f8f7ff, #fff); }

.ica-found {
	list-style: none;
	margin: .8rem 0 0;
	padding: 0;
	display: grid;
	gap: .3rem;
}

.ica-found li {
	font-size: .85rem;
	color: var(--ica-ok);
	background: var(--ica-ok-soft);
	border-radius: 7px;
	padding: .45rem .6rem;
}

.ica-found li.is-error { color: var(--ica-danger); background: var(--ica-danger-soft); }

/* ------------------------------------------------------------- Questions */

.ica-question { padding: .9rem 0; border-bottom: 1px solid var(--ica-line); }
.ica-question:last-child { border-bottom: 0; padding-bottom: 0; }
.ica-question label { margin-top: 0; font-size: .95rem; }
.ica-question input[type="number"] { max-width: 140px; }

.ica-optional {
	font-weight: 400;
	font-size: .78rem;
	color: var(--ica-ink-soft);
	background: #f1f2f6;
	border-radius: 999px;
	padding: .05rem .45rem;
	margin-left: .3rem;
}

.ica-check-card {
	margin-top: .6rem !important;
	padding: .95rem .9rem;
	border: 1px solid var(--ica-line);
	border-radius: 10px;
	background: #fff;
	font-size: 1rem !important;
	line-height: 1.35;
}

.ica-details { margin-top: 1rem; }
.ica-details summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ica-accent); }
.ica-details textarea { margin-top: .6rem; }

.ica-motto {
	background: linear-gradient(135deg, #fff4e0, #ffe9f2);
	border: 1px solid #f6dcc9;
	border-radius: 9px;
	padding: .6rem .8rem;
	font-weight: 600;
	font-size: .92rem;
	color: #8a4b16;
}

.ica-quick { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.ica-quick .ica-btn { flex: 1 1 auto; min-width: 56px; }

.ica-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ica-btn-big { font-size: 1rem; padding: .8rem 1.1rem; }
.ica-btn-ok { border-color: #bfe0cd; background: var(--ica-ok-soft); color: var(--ica-ok); }
.ica-btn-ok:hover:not(:disabled) { background: #d8ecdf; }

/* --------------------------------------------------------------- Mobile */

@media (max-width: 900px) {
	.ica-panel.is-active { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.ica-body { font-size: 16px; }

	.ica-appbar-inner { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; }
	.ica-appnav {
		order: 3;
		width: 100%;
		overflow-x: auto;
		gap: .2rem;
		padding-bottom: .1rem;
	}
	.ica-appnav a { white-space: nowrap; padding: .5rem .7rem; }
	.ica-appuser-name { display: none; }

	.ica-app { padding: .9rem .8rem 5.5rem; }

	.ica-tabbar { gap: .5rem; }
	.ica-tabs { flex: 1 1 100%; order: 2; }
	.ica-tab-add { order: 1; }
	.ica-tabbar-tools { order: 3; width: 100%; }
	.ica-tabbar-tools input[type="search"] { width: auto; flex: 1 1 auto; }

	.ica-workspace-head { flex-direction: column; gap: .5rem; }
	.ica-workspace-actions { width: 100%; }
	.ica-workspace-actions .ica-btn { flex: 1 1 auto; }
	.ica-title-input { width: 100%; font-size: 1.2rem; margin-left: 0; }

	.ica-subtabs button { padding: .7rem .8rem; font-size: .95rem; }

	.ica-card { padding: 1rem; border-radius: 10px; }
	.ica-grid-2 { grid-template-columns: 1fr; }
	.ica-modes { grid-template-columns: 1fr; }
	.ica-prize { padding: .7rem .8rem; }

	/* Comfortable targets and no iOS zoom-on-focus. */
	input[type="text"], input[type="email"], input[type="url"],
	input[type="password"], input[type="number"], input[type="search"],
	select, textarea { font-size: 16px; padding: .75rem .8rem; }

	.ica-btn { padding: .7rem 1rem; }
	.ica-actions { flex-direction: column; }
	.ica-actions .ica-btn { width: 100%; }

	.ica-comment-workspace footer { gap: .5rem; }
	.ica-comment-workspace footer .ica-btn { flex: 1 1 auto; }

	#ica-comment-text { font-size: 1.05rem; padding: 1rem; }

	.ica-index-chip { width: 40px; height: 40px; font-size: .85rem; }

	/* Bigger still where it is read at arm's length and tapped with a thumb. */
	.ica-check input[type="checkbox"],
	.ica-follow-item input[type="checkbox"] { width: 30px; height: 30px; }

	.ica-check-card { padding: 1.05rem 1rem; font-size: 1.05rem !important; }
	.ica-follow-item { flex-wrap: wrap; padding: 1rem .9rem; }
	.ica-follow-item label { font-size: 1.05rem !important; }
	.ica-follow-item a { margin-left: 0; width: 100%; padding-top: .35rem; }

	.ica-drawer-panel { width: 100%; }

	.ica-auth-card { padding: 1.4rem; }
	.ica-body-auth { padding: 1rem .8rem; align-items: flex-start; }
}

@media (max-width: 380px) {
	.ica-brand-name { font-size: .95rem; }
	.ica-app { padding-left: .6rem; padding-right: .6rem; }
	.ica-card { padding: .85rem; }
}

/* Fine for a stylus or mouse; on touch, make the whole row easy to hit. */
@media (hover: none) {
	.ica-tab { padding: .6rem .9rem; }
	.ica-tab-close { padding: .2rem .3rem; font-size: 1.15rem; }
	.ica-person { padding: .7rem; }
}