/* ==========================================================================
   Amnesty Freedom members' portal
   Shares the public site's palette and typeface so it reads as the same
   organisation, but denser — this is a tool, not a page.
   ========================================================================== */

.afp {
	--afp-black: #0d1117;
	--afp-white: #ffffff;
	--afp-accent: #4a7fa5;
	--afp-accent-light: #dde8f0;
	--afp-accent-dark: #2c5f80;
	--afp-gray: #f2f4f6;
	--afp-text: #1a1f24;
	--afp-muted: #5a6472;
	--afp-border: #d8dfe6;
	--afp-red: #b3261e;
	--afp-red-bg: #fdecea;
	--afp-amber: #8a5a00;
	--afp-amber-bg: #fff4d6;
	--afp-green: #176b4f;
	--afp-green-bg: #e3f4ec;
	--afp-blue-bg: #e6eff6;
	--afp-font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	font-family: var(--afp-font);
	color: var(--afp-text);
	background: var(--afp-gray);
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	line-height: 1.5;
}
.afp *, .afp *::before, .afp *::after { box-sizing: border-box; }
.afp h1, .afp h2, .afp h3, .afp p, .afp ol, .afp ul { margin: 0; }

/* ── the hidden attribute must actually hide ──────────────────────────────
   Browsers apply the HTML `hidden` attribute through a UA rule of the form
   [hidden] { display: none }, which has almost no specificity. Any class rule
   that sets `display` therefore beats it — and .afp-drawer, .afp-loading and
   .afp-login-busy all set display:flex. The result was a drawer permanently
   floating over the page and a "Loading…" line that never went away.

   Restated here with enough weight to win, including against theme CSS. Every
   element in this file toggled with el.hidden depends on this rule.           */
.afp [hidden],
.afp[hidden],
.afp-drawer[hidden],
.afp-toast[hidden] { display: none !important; }

/* ── top bar ───────────────────────────────────────────────────────────── */

.afp-bar {
	background: var(--afp-black);
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
	min-height: 56px;
	flex-wrap: wrap;
}
.afp-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.afp-bar-brand {
	color: var(--afp-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.afp-bar-brand:hover { color: var(--afp-accent-light); }
.afp-bar-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.22); }
.afp-bar-app { color: rgba(255,255,255,0.6); font-size: 13px; white-space: nowrap; }

/* min-width:0 is the whole fix for a strip of tabs that pushes the page
   sideways. A flex item defaults to min-width:auto, which refuses to shrink
   below its own content — so seven tabs simply made the document wider than
   the screen and every page scrolled horizontally. With min-width:0 the strip
   shrinks and scrolls inside itself instead, which is what the narrow-screen
   rule further down has always done; it just never applied between 861px and
   about 1090px, where the tabs stopped fitting first. */
.afp-tabs {
	display: flex;
	gap: 2px;
	margin-right: auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.afp-tabs::-webkit-scrollbar { display: none; }
.afp-tab { flex: 0 0 auto; }
.afp-tab {
	appearance: none;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: rgba(255,255,255,0.62);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 17px 14px 15px;
	cursor: pointer;
	white-space: nowrap;
}
.afp-tab:hover { color: var(--afp-white); }
.afp-tab.is-active { color: var(--afp-white); border-bottom-color: var(--afp-accent); }
.afp-tab-count {
	display: inline-block;
	background: rgba(255,255,255,0.14);
	color: rgba(255,255,255,0.8);
	border-radius: 9px;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 7px;
	margin-left: 5px;
}

.afp-bar-right { display: flex; align-items: center; gap: 12px; }
.afp-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.afp-avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--afp-accent);
	color: var(--afp-white);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.afp-who-name {
	color: rgba(255,255,255,0.82);
	font-size: 13px;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.afp-signout {
	color: rgba(255,255,255,0.55);
	font-size: 12px;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.2);
	padding: 5px 11px;
	white-space: nowrap;
}
.afp-signout:hover { color: var(--afp-white); border-color: rgba(255,255,255,0.5); }

.afp-icon-btn {
	appearance: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.7);
	font-size: 16px;
	line-height: 1;
	width: 30px; height: 30px;
	cursor: pointer;
	display: grid;
	place-items: center;
	font-family: inherit;
}
.afp-icon-btn:hover { color: var(--afp-white); border-color: rgba(255,255,255,0.5); }
.afp-icon-btn.is-spinning { animation: afp-spin 0.7s linear infinite; }
.afp-drawer .afp-icon-btn {
	border-color: var(--afp-border);
	color: var(--afp-muted);
	font-size: 22px;
	width: 32px; height: 32px;
}
.afp-drawer .afp-icon-btn:hover { color: var(--afp-text); border-color: var(--afp-muted); }

/* ── layout ────────────────────────────────────────────────────────────── */

.afp-body { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.afp-h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.afp-h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.afp-sub { color: var(--afp-muted); font-size: 13.5px; margin-top: 3px; max-width: 60ch; }
.afp-hint { color: var(--afp-muted); font-size: 12.5px; margin-top: 10px; font-style: italic; }

.afp-view-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.afp-loading {
	display: flex; align-items: center; gap: 10px;
	color: var(--afp-muted); font-size: 14px; padding: 40px 0;
}
.afp-spinner {
	width: 15px; height: 15px;
	border: 2px solid var(--afp-border);
	border-top-color: var(--afp-accent);
	border-radius: 50%;
	display: inline-block;
	animation: afp-spin 0.7s linear infinite;
}
@keyframes afp-spin { to { transform: rotate(360deg); } }

/* ── stat tiles ────────────────────────────────────────────────────────── */

.afp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1px;
	background: var(--afp-border);
	border: 1px solid var(--afp-border);
	margin-bottom: 28px;
}
.afp-stat { background: var(--afp-white); padding: 14px 16px; }
.afp-stat-n { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.afp-stat-l {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--afp-muted);
	margin-top: 3px;
}
.afp-stat--alert .afp-stat-n { color: var(--afp-red); }
.afp-stat--warn  .afp-stat-n { color: var(--afp-amber); }
.afp-stat--good  .afp-stat-n { color: var(--afp-green); }

/* ── buttons ───────────────────────────────────────────────────────────── */

.afp-btn {
	appearance: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px 20px;
	border: 1px solid var(--afp-border);
	background: var(--afp-white);
	color: var(--afp-text);
	cursor: pointer;
	white-space: nowrap;
}
.afp-btn:hover { border-color: var(--afp-muted); }
.afp-btn--primary { background: var(--afp-accent); border-color: var(--afp-accent); color: var(--afp-white); }
.afp-btn--primary:hover { background: var(--afp-accent-dark); border-color: var(--afp-accent-dark); }
.afp-btn--ghost { background: transparent; }
.afp-btn--small { padding: 7px 13px; font-size: 11.5px; }
.afp-btn[disabled] { opacity: 0.5; cursor: default; }

/* ── filters ───────────────────────────────────────────────────────────── */

.afp-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	padding: 12px 14px;
	margin-bottom: 16px;
}
.afp-search, .afp-select, .afp-input, .afp-textarea {
	font-family: inherit;
	font-size: 13.5px;
	color: var(--afp-text);
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	padding: 8px 10px;
	max-width: 100%;
}
.afp-search { flex: 1 1 220px; min-width: 160px; }
.afp-search:focus, .afp-select:focus, .afp-input:focus, .afp-textarea:focus {
	outline: 2px solid var(--afp-accent);
	outline-offset: -1px;
}
.afp-check { font-size: 13.5px; color: var(--afp-muted); display: flex; align-items: center; gap: 6px; }

/* ── cards / rows ──────────────────────────────────────────────────────── */

.afp-card {
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	border-left: 3px solid var(--afp-border);
	padding: 14px 16px;
	margin-bottom: 1px;
}
.afp-card--p1 { border-left-color: var(--afp-red); }
.afp-card--p2 { border-left-color: var(--afp-accent); }
.afp-card--p3 { border-left-color: var(--afp-border); }
.afp-card--clickable { cursor: pointer; }
.afp-card--clickable:hover { background: #fafbfc; }

.afp-card-top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.afp-id {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--afp-accent-dark);
	background: var(--afp-accent-light);
	padding: 2px 7px;
	white-space: nowrap;
}
.afp-card-title { font-size: 15.5px; font-weight: 700; flex: 1 1 260px; min-width: 0; }
.afp-card-why { color: var(--afp-muted); font-size: 13.5px; margin-top: 6px; }
.afp-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: 12.5px; color: var(--afp-muted); }
.afp-meta strong { color: var(--afp-text); font-weight: 600; }

/* v2.5.0 — a Project that still has open Sub-projects under it cannot be
   closed, so the count that explains why gets a little weight. Amber, not
   red: it is a state of the work, not an error anyone made. */
.afp-meta .afp-blocking { color: var(--afp-amber); font-weight: 600; }

/* Closed Sub-projects in the Project drawer's child list: still readable, but
   clearly out of the way of the ones that are actually blocking. */
.afp-kid--closed { color: var(--afp-muted); text-decoration: line-through; }
.afp-kid--closed strong { color: var(--afp-muted); }

/* A locked Done/Dropped option. Browsers grey these out already; this just
   makes sure the greying survives the portal's own select styling. */
.afp-select option:disabled { color: var(--afp-muted); }

.afp-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	white-space: nowrap;
	background: var(--afp-gray);
	color: var(--afp-muted);
}
.afp-pill--red   { background: var(--afp-red-bg);   color: var(--afp-red); }
.afp-pill--amber { background: var(--afp-amber-bg); color: var(--afp-amber); }
.afp-pill--green { background: var(--afp-green-bg); color: var(--afp-green); }
.afp-pill--blue  { background: var(--afp-blue-bg);  color: var(--afp-accent-dark); }

.afp-empty {
	background: var(--afp-white);
	border: 1px dashed var(--afp-border);
	padding: 34px 20px;
	text-align: center;
	color: var(--afp-muted);
	font-size: 14px;
}

/* ── agenda ────────────────────────────────────────────────────────────── */

.afp-agenda-item { background: var(--afp-white); border: 1px solid var(--afp-border); border-left: 3px solid var(--afp-accent); margin-bottom: 1px; }
.afp-agenda-item--p1 { border-left-color: var(--afp-red); }
.afp-agenda-head { padding: 14px 16px 12px; }
.afp-agenda-num { color: var(--afp-muted); font-size: 13px; font-weight: 700; margin-right: 4px; }
.afp-outcome-wrap { border-top: 1px solid var(--afp-border); background: #fcfdfe; padding: 12px 16px 14px; }

/* ── v2.6.0: the meeting picker and live notes ─────────────────────────── */

/* The head now carries a meeting switcher and two buttons. */
.afp-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Agenda on the left, everything you could add on the right. The sidebar is
   a fixed column rather than a fraction so it stays readable as the agenda
   grows, and collapses out of the way entirely on a narrow screen. */
.afp-meeting-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 18px;
	align-items: start;
}
.afp-meeting-layout.afp-meeting-layout--solo { grid-template-columns: minmax(0, 1fr); }
.afp-meeting-main { min-width: 0; }

.afp-picker {
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	/* Sticks alongside the agenda while you scroll through it, which is the
	   whole point of a sidebar you pick from. */
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 90px);
	display: flex;
	flex-direction: column;
}
.afp-picker[hidden] { display: none; }
.afp-picker-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--afp-border); }
.afp-picker-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--afp-text); }
.afp-picker-sub { font-size: 12px; line-height: 1.5; color: var(--afp-muted); margin: 0 0 10px; }
.afp-picker-head .afp-search { width: 100%; margin-bottom: 8px; }

.afp-picker-list { overflow-y: auto; padding: 6px 0 10px; }

.afp-picker-group { padding: 10px 14px 2px; }
.afp-picker-group-head {
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--afp-muted); margin-bottom: 6px;
}

.afp-pick {
	display: flex; gap: 9px; align-items: flex-start;
	padding: 7px 14px; cursor: pointer; line-height: 1.4;
	border-left: 3px solid transparent;
}
.afp-pick:hover { background: var(--afp-gray); }
.afp-pick input { margin-top: 2px; flex-shrink: 0; }
.afp-pick-body { min-width: 0; }
.afp-pick-title { font-size: 13px; color: var(--afp-text); }
.afp-pick-meta { font-size: 11.5px; color: var(--afp-muted); margin-top: 2px; }
.afp-pick--on { background: var(--afp-blue-bg); border-left-color: var(--afp-accent); }
.afp-pick--busy { opacity: 0.5; pointer-events: none; }

/* A Sub-project sits under its Project, so it reads as belonging to it. */
.afp-pick--child { padding-left: 30px; }
.afp-pick--child .afp-pick-title { font-size: 12.5px; }

/* The save indicator on each notes box. */
.afp-note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.afp-save-state { font-size: 11.5px; color: var(--afp-muted); white-space: nowrap; }
.afp-save-state--saving { color: var(--afp-accent-dark); }
.afp-save-state--saved  { color: var(--afp-green); }
.afp-save-state--error  { color: var(--afp-red); font-weight: 600; }

/* Reordering and removing, on each agenda item. */
.afp-agenda-tools { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.afp-agenda-tool {
	font-family: inherit; font-size: 12px; line-height: 1;
	padding: 4px 8px; cursor: pointer;
	background: var(--afp-white); color: var(--afp-muted);
	border: 1px solid var(--afp-border);
}
.afp-agenda-tool:hover:not(:disabled) { color: var(--afp-text); border-color: var(--afp-muted); }
.afp-agenda-tool:disabled { opacity: 0.35; cursor: default; }
.afp-agenda-tool--remove:hover { color: var(--afp-red); border-color: var(--afp-red); }

/* A past meeting is a record: read it, do not type into it. */
.afp-readonly-banner {
	background: var(--afp-amber-bg); color: var(--afp-amber);
	border: 1px solid #e8d9a8; padding: 10px 14px;
	font-size: 13px; margin-bottom: 14px;
}

/* ── v2.7.0: attendees, select-all, truncated titles, per-person notes ─── */

/* The attendee picker: a button that opens a checklist. A native
   <select multiple> cannot show tick marks or two lines per person. */
.afp-dropdown { position: relative; }
.afp-dropdown-panel {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
	width: 340px; max-width: 88vw;
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	box-shadow: 0 8px 28px rgba(13, 17, 23, 0.16);
}
.afp-dropdown-panel[hidden] { display: none; }
.afp-dropdown-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--afp-border); }
.afp-dropdown-title { display: block; font-size: 13px; font-weight: 700; color: var(--afp-text); }
.afp-dropdown-sub { display: block; font-size: 11.5px; line-height: 1.5; color: var(--afp-muted); margin-top: 3px; }
.afp-dropdown-list { max-height: 300px; overflow-y: auto; padding: 4px 0; }
.afp-dropdown-foot {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-top: 1px solid var(--afp-border);
	background: var(--afp-gray);
}
.afp-dropdown-foot .afp-btn { margin-left: auto; }

.afp-person { display: flex; gap: 9px; align-items: flex-start; padding: 7px 14px; cursor: pointer; }
.afp-person:hover { background: var(--afp-gray); }
.afp-person input { margin-top: 3px; flex-shrink: 0; }
.afp-person-name { font-size: 13px; color: var(--afp-text); }
.afp-person-mail { font-size: 11.5px; color: var(--afp-muted); word-break: break-all; }

.afp-count-chip {
	display: inline-block; min-width: 17px; padding: 0 5px;
	background: var(--afp-accent); color: var(--afp-white);
	font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

/* Select all / deselect all, under the picker's own filters. */
.afp-picker-actions { margin-top: 9px; font-size: 12px; color: var(--afp-muted); }
.afp-picker-actions-sep { margin: 0 6px; }
.afp-linkbtn {
	font-family: inherit; font-size: 12px; color: var(--afp-accent-dark);
	background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
}
.afp-linkbtn:hover { color: var(--afp-black); }
.afp-linkbtn:disabled { color: var(--afp-muted); cursor: default; text-decoration: none; }

/* "Remove all" empties the agenda, so it reads as the destructive one it is —
   outlined rather than filled, because it sits beside Close out and should
   never be the button somebody hits by muscle memory. */
.afp-btn--danger { color: var(--afp-red); border-color: #e6bcb8; }
.afp-btn--danger:hover:not(:disabled) { background: var(--afp-red-bg); border-color: var(--afp-red); }
.afp-btn--danger:disabled { color: var(--afp-muted); border-color: var(--afp-border); }

/* A title cut at 15 words keeps a long Sub-project step from swallowing the
   column. The full text is always one hover (or one click through) away. */
.afp-truncated { cursor: help; }

/* Everyone else's notes, under your own box. */
.afp-others { margin-top: 12px; border-top: 1px dashed var(--afp-border); padding-top: 10px; }
.afp-other { margin-top: 9px; padding-left: 11px; border-left: 3px solid var(--afp-accent-light); }
.afp-other:first-child { margin-top: 0; }
.afp-other-who { font-size: 12px; font-weight: 700; color: var(--afp-accent-dark); }
.afp-other-text { font-size: 13px; line-height: 1.6; color: var(--afp-text); white-space: pre-wrap; }
.afp-other-when { font-size: 11px; color: var(--afp-muted); margin-top: 2px; }

@media (max-width: 1000px) {
	.afp-dropdown-panel { width: 300px; }
	.afp-meeting-layout { grid-template-columns: minmax(0, 1fr); }
	.afp-picker { position: static; max-height: none; }
	.afp-picker-list { max-height: 380px; }
}
.afp-label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--afp-muted);
	margin-bottom: 5px;
}
.afp-textarea { width: 100%; min-height: 62px; resize: vertical; line-height: 1.5; }

.afp-completed {
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	border-top: 3px solid var(--afp-green);
	padding: 18px 20px;
	margin-top: 28px;
}
.afp-completed-list { margin: 12px 0 0; padding-left: 22px; font-size: 13.5px; line-height: 1.85; color: var(--afp-text); }
.afp-completed-list li::marker { color: var(--afp-muted); font-weight: 700; }
.afp-completed-list .afp-ref { color: var(--afp-muted); font-size: 12.5px; }

/* ── action items ──────────────────────────────────────────────────────── */

.afp-group { margin-bottom: 22px; }
.afp-group-head {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	padding: 9px 14px;
	background: var(--afp-black);
	color: var(--afp-white);
}
.afp-group-head .afp-id { background: rgba(255,255,255,0.14); color: var(--afp-accent-light); }
.afp-group-title { font-size: 14px; font-weight: 700; flex: 1 1 auto; }
.afp-group-add {
	appearance: none; background: transparent; border: 1px solid rgba(255,255,255,0.25);
	color: rgba(255,255,255,0.8); font-family: inherit; font-size: 11px; font-weight: 700;
	letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; cursor: pointer;
}
.afp-group-add:hover { color: var(--afp-white); border-color: rgba(255,255,255,0.6); }

.afp-act {
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	border-top: none;
	padding: 12px 14px;
	display: grid;
	grid-template-columns: 1fr 150px;
	gap: 12px;
	align-items: start;
}
.afp-act--done { background: #fbfdfc; }
.afp-act--done .afp-act-text { color: var(--afp-muted); text-decoration: line-through; }
.afp-act-text { font-size: 14.5px; font-weight: 600; }
.afp-act-text--empty { color: var(--afp-muted); font-style: italic; font-weight: 400; }
.afp-act-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--afp-muted); }
.afp-act-right { display: flex; flex-direction: column; gap: 7px; }
.afp-act-right .afp-select { width: 100%; font-size: 12.5px; padding: 6px 8px; }
.afp-overdue { color: var(--afp-red); font-weight: 700; }

/* ── drawer ────────────────────────────────────────────────────────────── */

.afp-drawer { position: fixed; inset: 0; z-index: 99999; display: flex; justify-content: flex-end; }
.afp-drawer-scrim { position: absolute; inset: 0; background: rgba(13,17,23,0.5); }
.afp-drawer-panel {
	position: relative;
	background: var(--afp-white);
	width: min(560px, 100%);
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 32px rgba(13,17,23,0.2);
	font-family: var(--afp-font);
	color: var(--afp-text);
}
.afp-drawer-head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 16px 20px; border-bottom: 1px solid var(--afp-border);
}
.afp-drawer-title { font-size: 17px; font-weight: 700; }
.afp-drawer-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
.afp-drawer-foot {
	padding: 14px 20px; border-top: 1px solid var(--afp-border);
	display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
	background: #fbfcfd;
}
.afp-field { margin-bottom: 16px; }
.afp-field .afp-input, .afp-field .afp-select, .afp-field .afp-textarea { width: 100%; }
.afp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.afp-field-note { font-size: 12px; color: var(--afp-muted); margin-top: 4px; }
.afp-readonly {
	background: var(--afp-gray); border: 1px solid var(--afp-border);
	padding: 8px 10px; font-size: 13.5px; color: var(--afp-muted);
}

/* ── alerts & toast ────────────────────────────────────────────────────── */

.afp-alert {
	border: 1px solid var(--afp-border);
	border-left: 3px solid var(--afp-accent);
	background: var(--afp-white);
	padding: 13px 16px;
	font-size: 14px;
	margin-bottom: 18px;
	line-height: 1.55;
}
.afp-alert--error { border-left-color: var(--afp-red);   background: var(--afp-red-bg); }
.afp-alert--warn  { border-left-color: var(--afp-amber); background: var(--afp-amber-bg); }
.afp-alert--ok    { border-left-color: var(--afp-green); background: var(--afp-green-bg); }
.afp-alert code { font-size: 12.5px; background: rgba(0,0,0,0.06); padding: 1px 5px; }

.afp-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: var(--afp-black);
	color: var(--afp-white);
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 20px;
	z-index: 100000;
	box-shadow: 0 6px 24px rgba(13,17,23,0.28);
	max-width: calc(100vw - 40px);
}
.afp-toast--error { background: var(--afp-red); }

.afp-foot {
	margin-top: 40px; padding-top: 16px;
	border-top: 1px solid var(--afp-border);
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	font-size: 12.5px; color: var(--afp-muted);
}
.afp-foot a { color: var(--afp-accent-dark); }

/* ── login page ────────────────────────────────────────────────────────── */

.afp-login {
	min-height: 72vh;
	display: grid;
	place-items: center;
	padding: 56px 20px;
	background: linear-gradient(135deg, #1c2d3d 0%, #2c4a62 50%, #1c2d3d 100%);
}
.afp-login-card {
	background: var(--afp-white);
	width: 100%;
	max-width: 470px;
	padding: 40px 38px 32px;
	box-shadow: 0 20px 60px rgba(13,17,23,0.3);
}
.afp-login-brand {
	font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--afp-accent-dark); text-decoration: none;
}
.afp-login-kicker {
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--afp-muted); margin-top: 16px;
}
.afp-login-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
.afp-login-sub { color: var(--afp-muted); font-size: 14.5px; margin-top: 10px; line-height: 1.65; }
.afp-login-sub strong { color: var(--afp-text); font-weight: 600; }
.afp-google-wrap { margin-top: 26px; min-height: 44px; }
.afp-login-busy { display: flex; align-items: center; gap: 9px; color: var(--afp-muted); font-size: 14px; }
.afp-login-note {
	margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--afp-border);
	font-size: 13px; color: var(--afp-muted); line-height: 1.65;
}
.afp-login-note strong { color: var(--afp-text); }
.afp-login-back {
	display: inline-block; margin-top: 22px;
	font-size: 13px; color: var(--afp-accent-dark); text-decoration: none;
}
.afp-login-back:hover { text-decoration: underline; }

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	.afp-bar { padding: 0 14px; }
	.afp-tabs { order: 3; width: 100%; overflow-x: auto; margin-right: 0; }
	.afp-tab { padding: 13px 12px 11px; }
	.afp-bar-right { margin-left: auto; }
	.afp-who-name { display: none; }
	.afp-body { padding: 20px 14px 50px; }
	.afp-act { grid-template-columns: 1fr; }
	.afp-act-right { flex-direction: row; flex-wrap: wrap; }
	.afp-act-right .afp-select { width: auto; flex: 1 1 130px; }
	.afp-field-row { grid-template-columns: 1fr; }
	.afp-view-head { align-items: stretch; }
	.afp-login-card { padding: 30px 22px 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INSTALLED-APP POLISH
   In standalone mode there is no browser bar, so the top bar sits directly
   under the notch / status bar. env(safe-area-inset-*) is what keeps it clear;
   it only resolves because the viewport tag carries viewport-fit=cover.
   ══════════════════════════════════════════════════════════════════════════ */

@media all and (display-mode: standalone) {
	.afp-bar {
		padding-top: env(safe-area-inset-top);
		padding-left: max(20px, env(safe-area-inset-left));
		padding-right: max(20px, env(safe-area-inset-right));
		min-height: calc(56px + env(safe-area-inset-top));
	}
	.afp-body,
	.afi {
		padding-left: max(14px, env(safe-area-inset-left));
		padding-right: max(14px, env(safe-area-inset-right));
		padding-bottom: max(50px, env(safe-area-inset-bottom));
	}
	/* Nothing to go "back" to in an installed app, so hide the browser-era link. */
	.afp-login-back { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE INSTALL PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.afi { max-width: 900px; margin: 0 auto; padding: 44px 20px 80px; }

.afi-hero {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	margin-bottom: 34px;
	flex-wrap: wrap;
}
.afi-hero-icon {
	width: 88px; height: 88px;
	border-radius: 20px;
	flex-shrink: 0;
	box-shadow: 0 6px 20px -6px rgba(13, 17, 23, 0.4);
}
.afi-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--afp-accent);
	margin-bottom: 8px;
}
.afi-title {
	font-size: clamp(1.7rem, 4.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}
.afi-sub {
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--afp-muted);
	max-width: 56ch;
}
.afi-sub strong { color: var(--afp-text); font-weight: 600; }

.afi-alert {
	border: 1px solid var(--afp-border);
	border-left: 3px solid var(--afp-accent);
	background: var(--afp-white);
	padding: 14px 17px;
	font-size: 14.5px;
	margin-bottom: 26px;
}
.afi-alert--ok { border-left-color: var(--afp-green); background: var(--afp-green-bg); }

.afi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	margin-bottom: 44px;
}
.afi-card {
	background: var(--afp-white);
	border: 1px solid var(--afp-border);
	border-top: 3px solid var(--afp-border);
	padding: 22px 24px 24px;
}
/* The device you are actually holding gets the accent. */
.afi-card.is-yours { border-top-color: var(--afp-accent); }
.afi-card-head { margin-bottom: 16px; }
.afi-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--afp-accent-dark);
	background: var(--afp-accent-light);
	padding: 3px 9px;
	margin-bottom: 10px;
}
.afi-card h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }

.afi-btn {
	appearance: none;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--afp-accent);
	color: var(--afp-white);
	border: 1px solid var(--afp-accent);
	padding: 13px 26px;
	cursor: pointer;
	margin-bottom: 14px;
	width: 100%;
}
.afi-btn:hover { background: var(--afp-accent-dark); border-color: var(--afp-accent-dark); }
.afi-btn[disabled] { opacity: 0.55; cursor: default; }

.afi-note {
	font-size: 13.5px;
	color: var(--afp-muted);
	line-height: 1.6;
	margin-bottom: 16px;
}
.afi-note strong { color: var(--afp-text); font-weight: 600; }

.afi-steps { margin: 0; padding-left: 22px; }
.afi-steps li {
	font-size: 14.5px;
	line-height: 1.65;
	margin-bottom: 9px;
	color: var(--afp-text);
}
.afi-steps li:last-child { margin-bottom: 0; }
.afi-steps code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.86em;
	background: var(--afp-gray);
	border: 1px solid var(--afp-border);
	padding: 1px 5px;
	word-break: break-all;
}

.afi-faq { border-top: 1px solid var(--afp-border); padding-top: 30px; }
.afi-faq-title {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}
.afi-faq details {
	border-bottom: 1px solid var(--afp-border);
	padding: 15px 0;
}
.afi-faq summary {
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 28px;
}
.afi-faq summary::-webkit-details-marker { display: none; }
.afi-faq summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: -2px;
	font-size: 20px;
	font-weight: 400;
	color: var(--afp-accent);
}
.afi-faq details[open] summary::after { content: '\2212'; }
.afi-faq details p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--afp-muted);
	margin-top: 11px;
	max-width: 68ch;
}

.afi-foot {
	margin-top: 34px;
	font-size: 14px;
	color: var(--afp-muted);
}
.afi-foot a { color: var(--afp-accent-dark); }

@media (max-width: 600px) {
	.afi { padding: 28px 16px 60px; }
	.afi-hero { gap: 16px; }
	.afi-hero-icon { width: 64px; height: 64px; border-radius: 15px; }
	.afi-grid { grid-template-columns: 1fr; }
}

/* ── live freshness indicator in the top bar ─────────────────────────────── */
.afp-live {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ── a closed Board item ─────────────────────────────────────────────────
   Muted rather than struck through: this is the record, not a crossed-off
   shopping list, and the outcome is the part worth reading.               */
.afp-card--closed {
	border-left-color: var(--afp-green);
	background: #fbfdfc;
}
.afp-card--closed .afp-card-title { color: var(--afp-muted); font-weight: 600; }
.afp-outcome-read {
	margin-top: 11px;
	padding: 10px 13px;
	background: var(--afp-gray);
	border-left: 2px solid var(--afp-green);
	font-size: 14px;
	line-height: 1.6;
	color: var(--afp-text);
}
.afp-outcome-read .afp-label { margin-bottom: 4px; }
.afp-outcome-read a, .afp-card-why a { color: var(--afp-accent-dark); word-break: break-all; }

/* ── closed items, grouped by month ───────────────────────────────────────
   Board (Closed) and Action Items (Closed) only ever grow — nothing on them
   is deleted — so a flat list does not scale. Folding all but the newest
   month behind a native <details> disclosure keeps the tab short and fast;
   older months are one click away instead of gone.                        */
.afp-monthgroup {
	border: 1px solid var(--afp-border);
	border-radius: 8px;
	margin-bottom: 12px;
	background: var(--afp-white);
	overflow: hidden;
}
.afp-monthgroup summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	font-weight: 700;
	font-size: 14.5px;
	background: var(--afp-gray);
	position: relative;
}
.afp-monthgroup summary::-webkit-details-marker { display: none; }
.afp-monthgroup summary::after {
	content: '+';
	position: absolute;
	right: 16px;
	font-size: 19px;
	font-weight: 400;
	color: var(--afp-accent);
}
.afp-monthgroup[open] summary::after { content: '\2212'; }
.afp-monthgroup-count { font-weight: 400; color: var(--afp-muted); font-size: 13px; }
.afp-monthgroup-body { padding: 1px; }

/* ── "Completed last week", with the decision alongside each item ────────── */
.afp-completed-list li { margin-bottom: 12px; }
.afp-completed-list li:last-child { margin-bottom: 0; }
.afp-completed-what { font-weight: 600; }
.afp-completed-meta { color: var(--afp-muted); font-size: 12.5px; margin-top: 1px; }
.afp-completed-decision {
	margin-top: 6px;
	padding: 8px 11px;
	background: var(--afp-gray);
	border-left: 2px solid var(--afp-green);
	font-size: 13px;
	line-height: 1.6;
}
.afp-completed-decision .afp-label { margin-bottom: 3px; }
.afp-completed-decision a { color: var(--afp-accent-dark); word-break: break-all; }

@media (max-width: 860px) {
	.afp-live { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FINANCE

   This is the one tab used one-handed, outdoors, on a phone, by someone who
   wants to be doing something else. Targets are big, the amount is the largest
   thing on the screen, and the camera button is the first thing your thumb
   finds. Everything reuses the palette above so it reads as the same tool.
   ══════════════════════════════════════════════════════════════════════════ */

/* Five money tiles, and auto-fit leaves a grey hole wherever the count does not
   divide evenly. Fixing the column count at each size makes the row deliberate:
   five across on a desktop, two on a phone with the odd last tile widened to
   fill its row rather than sitting beside an empty cell. */
.afp-stats--money { grid-template-columns: repeat(2, 1fr); }
.afp-stats--money .afp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 900px) {
	.afp-stats--money { grid-template-columns: repeat(5, 1fr); }
	.afp-stats--money .afp-stat:last-child:nth-child(odd) { grid-column: auto; }
}
.afp-stats--money .afp-stat-n {
	font-variant-numeric: tabular-nums;
	font-size: 23px;
	white-space: nowrap;
}
.afp-stat-note {
	display: block;
	font-size: 11px;
	color: var(--afp-muted);
	margin-top: 3px;
	line-height: 1.35;
}

.afp-btn--big { font-size: 15px; padding: 11px 20px; }

/* ── one expense ───────────────────────────────────────────────────────── */

.afp-fin-card { border-left: 3px solid var(--afp-accent); }
.afp-fin-card--noreceipt { border-left-color: var(--afp-red); }
.afp-fin-card--void { opacity: 0.55; border-left-color: var(--afp-border); }

.afp-fin-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.afp-fin-amount {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--afp-text);
}
.afp-fin-card--void .afp-fin-amount { text-decoration: line-through; }
.afp-fin-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.afp-fin-vendor { font-weight: 600; margin-top: 1px; }
.afp-fin-reason {
	display: inline-block;
	background: var(--afp-accent-light);
	color: var(--afp-accent-dark);
	border-radius: 3px;
	padding: 0 6px;
	font-weight: 600;
	font-size: 12px;
}

.afp-fin-foot-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 9px;
	padding-top: 8px;
	border-top: 1px solid var(--afp-border);
	font-size: 12px;
}
.afp-fin-receipts {
	color: var(--afp-accent-dark);
	font-weight: 600;
	text-decoration: none;
}
.afp-fin-receipts:hover { text-decoration: underline; }
.afp-fin-noreceipt-flag { color: var(--afp-red); font-weight: 600; }
.afp-fin-approver { color: var(--afp-muted); margin-left: auto; }

.afp-pill--void { background: var(--afp-gray); color: var(--afp-muted); }

.afp-fin-foot { margin-top: 18px; }

/* ── the amount field ──────────────────────────────────────────────────── */

.afp-input--amount {
	font-size: 26px;
	font-weight: 700;
	padding: 10px 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* ── the camera and what it produces ───────────────────────────────────── */

.afp-receipts {
	border: 1px dashed var(--afp-border);
	border-radius: 6px;
	padding: 12px;
	background: var(--afp-white);
}
.afp-receipt-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.afp-btn--camera {
	background: var(--afp-accent);
	border-color: var(--afp-accent);
	color: var(--afp-white);
	font-weight: 600;
	/* 44px is the smallest target a thumb hits reliably while walking. */
	min-height: 44px;
	padding: 10px 16px;
}
.afp-btn--camera:hover { background: var(--afp-accent-dark); border-color: var(--afp-accent-dark); }
.afp-thumbcount { font-size: 12px; color: var(--afp-muted); margin-left: auto; }

.afp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.afp-thumbs:empty { display: none; }

.afp-thumb {
	position: relative;
	width: 74px;
	height: 74px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--afp-gray);
	border: 1px solid var(--afp-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.afp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afp-thumb-pdf { font-size: 12px; font-weight: 700; color: var(--afp-muted); }
.afp-thumb--sending { opacity: 0.5; }
.afp-thumb--done   { border-color: var(--afp-green); }
.afp-thumb--failed { border-color: var(--afp-red); }

.afp-thumb-x, .afp-thumb-tick, .afp-thumb-bang {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	border: none;
}
.afp-thumb-x {
	background: rgba(13,17,23,0.72);
	color: #fff;
	cursor: pointer;
	padding: 0;
}
.afp-thumb-x:hover { background: var(--afp-red); }
.afp-thumb-tick { background: var(--afp-green); color: #fff; }
.afp-thumb-bang { background: var(--afp-red); color: #fff; }

.afp-progress {
	font-size: 13px;
	color: var(--afp-muted);
	margin-top: 10px;
	line-height: 1.45;
}
.afp-progress:empty { display: none; }
.afp-progress--ok    { color: var(--afp-green); font-weight: 600; }
.afp-progress--error { color: var(--afp-red); }
.afp-progress .afp-btn { margin-top: 8px; }

/* ── the folded-away extras ────────────────────────────────────────────── */

.afp-more { margin-top: 14px; }
.afp-more > summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--afp-accent-dark);
	padding: 6px 0;
	list-style: none;
}
.afp-more > summary::-webkit-details-marker { display: none; }
.afp-more > summary::before { content: '▸ '; }
.afp-more[open] > summary::before { content: '▾ '; }
.afp-more-body { padding-top: 6px; }

.afp-quickrow { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; }

/* ── phones ────────────────────────────────────────────────────────────── */

@media ( max-width: 640px ) {
	.afp-fin-amount { font-size: 20px; }
	.afp-receipt-buttons { gap: 6px; }
	.afp-btn--camera { flex: 1 1 100%; justify-content: center; }
	.afp-thumbcount { margin-left: 0; width: 100%; }
	.afp-thumb { width: 64px; height: 64px; }
	.afp-input--amount { font-size: 30px; }
	/* iOS zooms the page in on any field under 16px. It never zooms back out. */
	.afp-input, .afp-select, .afp-textarea { font-size: 16px; }
}