/* MAS Client Portal, front end. Uses the theme's colors when present, with fallbacks. */
.mas-cp {
	--cp-ink: var(--mas-ink, #14123a);
	--cp-mango: var(--mas-mango, #ffb627);
	--cp-muted: var(--mas-muted, #5b6075);
	--cp-line: var(--mas-line, #e3e5ec);
	--cp-bg: var(--mas-bg, #f6f7f9);
	--cp-radius: var(--mas-radius, 14px);
	color: var(--cp-ink);
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

.mas-cp h2 { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.mas-cp h3 { margin: 0 0 0.75rem; font-size: 1.125rem; }
.mas-cp p { margin: 0 0 1rem; }
.mas-cp-muted { color: var(--cp-muted); }
.mas-cp-link { color: var(--cp-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--cp-mango); text-underline-offset: 0.25em; }
.mas-cp-optional { color: var(--cp-muted); font-weight: 400; }

.mas-cp-card {
	margin-bottom: 1.25rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
}

.mas-cp-signin { max-width: 36rem; }
.mas-cp-empty { text-align: center; color: var(--cp-muted); }
.mas-cp-empty p:last-child { margin: 0; }

.mas-cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

.mas-cp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 1.5rem;
}
.mas-cp-head p { margin: 0; }

.mas-cp-notice { padding: 0.85rem 1rem; border-radius: 10px; font-weight: 500; }
.mas-cp-notice--ok { background: var(--mas-st-resolved-bg, #dff4ea); color: var(--mas-st-resolved, #13774f); }
.mas-cp-notice--error { background: #fde7e7; color: #c93838; }
.mas-cp-notice--hold { background: var(--mas-st-hold-bg, #efebff); color: var(--mas-st-hold, #6046c9); }

.mas-cp-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--cp-line); }
.mas-cp-tabs a { padding: 0.6rem 0.9rem; color: var(--cp-muted); font-weight: 500; text-decoration: none; }
.mas-cp-tabs a.is-active { color: var(--cp-ink); box-shadow: inset 0 -2px 0 var(--cp-mango); }

.mas-cp-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); }
.mas-cp-table { width: 100%; border-collapse: collapse; font-size: 0.96875rem; }
.mas-cp-table th { padding: 0.8rem 1rem; background: var(--cp-bg); color: var(--cp-muted); font-size: 0.8125rem; font-weight: 600; text-align: left; white-space: nowrap; }
.mas-cp-table td { padding: 0.9rem 1rem; border-top: 1px solid var(--cp-line); vertical-align: middle; }
.mas-cp-table a { color: var(--cp-ink); text-decoration: none; }
.mas-cp-table a:hover { text-decoration: underline; text-decoration-color: var(--cp-mango); }
.mas-cp-title a { font-weight: 600; }
.mas-cp-num, .mas-cp-num a { color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mas-pill { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.mas-pill--new { background: var(--mas-st-new-bg, #e7eeff); color: var(--mas-st-new, #2f6be8); }
.mas-pill--progress { background: var(--mas-st-progress-bg, #fff1d1); color: var(--mas-st-progress, #8a5a00); }
.mas-pill--hold { background: var(--mas-st-hold-bg, #efebff); color: var(--mas-st-hold, #6046c9); }
.mas-pill--resolved { background: var(--mas-st-resolved-bg, #dff4ea); color: var(--mas-st-resolved, #13774f); }
.mas-pill--closed { background: var(--mas-st-closed-bg, #eef0f5); color: var(--mas-st-closed, #5b6075); }

.mas-cp-prio { display: inline-block; padding: 0.1rem 0.5rem; border: 1px solid currentColor; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.mas-cp-prio--1 { color: #c93838; background: #fde7e7; }
.mas-cp-prio--2 { color: #b4540f; }
.mas-cp-prio--3 { color: #8a6200; }
.mas-cp-prio--4 { color: #2f6be8; }
.mas-cp-prio--5 { color: var(--cp-muted); }

.mas-cp-form { margin-top: 1.5rem; }
.mas-cp-field label, .mas-cp-choices legend { display: block; margin-bottom: 0.35rem; font-size: 0.9375rem; font-weight: 600; }
.mas-cp-field { margin: 0 0 1.1rem; }
.mas-cp input[type="text"], .mas-cp input[type="search"], .mas-cp input[type="password"], .mas-cp textarea, .mas-cp select {
	width: 100%; min-height: 2.875rem; padding: 0.6rem 0.85rem; background: #fff; color: var(--cp-ink);
	border: 1px solid #cfd3de; border-radius: 10px; font: inherit; font-size: 1rem;
}
.mas-cp input:focus, .mas-cp textarea:focus, .mas-cp select:focus { border-color: var(--cp-ink); box-shadow: 0 0 0 3px rgba(255, 182, 39, 0.45); outline: none; }
.mas-cp-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.1rem; }
.mas-cp-choices { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--cp-line); border-radius: 10px; }
.mas-cp-choices label { display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; font-weight: 500; cursor: pointer; }
.mas-cp-choices input { width: 1.1rem; height: 1.1rem; accent-color: var(--cp-ink); }

.mas-cp .mas-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.7rem 1.35rem; border: 1px solid transparent; border-radius: 10px; font: inherit; font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer; }
.mas-cp .mas-btn--primary { background: var(--cp-mango); color: var(--cp-ink); }
.mas-cp .mas-btn--dark { background: var(--cp-ink); color: #fff; }
.mas-cp .mas-btn--ghost { background: transparent; border-color: #c9ccd8; color: var(--cp-ink); }

.mas-cp-back { margin-bottom: 1rem; }
.mas-cp-detail { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
.mas-cp-detail__title { margin-bottom: 0.75rem !important; }
.mas-cp-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mas-cp-text { line-height: 1.6; overflow-wrap: anywhere; }
.mas-cp-confirm { background: var(--mas-sand, #fff4dc); border-color: transparent; }

.mas-cp-facts { display: grid; gap: 0.85rem; margin: 0; }
.mas-cp-facts div { padding-bottom: 0.85rem; border-bottom: 1px solid var(--cp-line); }
.mas-cp-facts div:last-child { padding-bottom: 0; border-bottom: 0; }
.mas-cp-facts dt { color: var(--cp-muted); font-size: 0.8125rem; }
.mas-cp-facts dd { margin: 0.15rem 0 0; font-weight: 600; }

.mas-cp-timeline { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.mas-cp-timeline li { margin-bottom: 0.75rem; }
.mas-cp-msg { padding: 1rem 1.1rem; background: var(--cp-bg); border-radius: 12px; }
.mas-cp-msg--staff { background: #fff; border: 1px solid var(--cp-line); }
.mas-cp-msg__who { margin: 0 0 0.4rem !important; font-size: 0.9375rem; }
.mas-cp-msg__who time, .mas-cp-event time { color: var(--cp-muted); font-size: 0.8125rem; }
.mas-cp-team { margin-left: 0.35rem; padding: 0.1rem 0.45rem; background: var(--cp-ink); border-radius: 6px; color: var(--cp-mango); font-size: 0.75rem; font-weight: 600; }
.mas-cp-event { padding: 0 1.1rem; color: var(--cp-muted); font-size: 0.875rem; }
.mas-cp-closed-note { margin: 0; }

/* Staff workspace */
.mas-cp-eyebrow { margin: 0 0 0.35rem !important; color: var(--mas-blue, #2f6be8); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mas-cp-small { font-size: 0.875rem; }
.mas-cp-narrow { max-width: 40rem; }
.mas-cp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.mas-cp-stats a { display: flex; flex-direction: column; gap: 0.15rem; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--cp-line); border-radius: 12px; color: var(--cp-ink); text-decoration: none; }
.mas-cp-stats a:hover { border-color: var(--cp-ink); }
.mas-cp-stats b { font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mas-cp-stats span { color: var(--cp-muted); font-size: 0.875rem; }
.mas-cp-stats .is-hot a { background: #fde7e7; border-color: #f3c1c1; }
.mas-cp-stats .is-hot b { color: #c93838; }
.mas-cp-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; margin: 0 0 1rem; }
.mas-cp-filters .mas-cp-field { margin: 0; }
.mas-cp-filters__go { display: flex; align-items: center; gap: 0.75rem; margin: 0 !important; }
.mas-cp-sub { display: block; margin-top: 0.15rem; color: var(--cp-muted); font-size: 0.8125rem; }
.mas-cp-table--staff tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--mas-st-new, #2f6be8); }
.mas-cp-pages { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; }
.mas-cp-pages a, .mas-cp-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border: 1px solid var(--cp-line); border-radius: 8px; color: var(--cp-ink); text-decoration: none; }
.mas-cp-pages span { background: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }
.mas-cp-detail--staff { grid-template-columns: minmax(0, 1fr) 24rem; }
.mas-cp-work .mas-cp-card { margin-bottom: 1rem; }
.mas-cp-choices--inline { display: grid; gap: 0.15rem; margin-bottom: 0.75rem; padding: 0.6rem 0.9rem; }
.mas-cp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; margin-top: 1rem; }
.mas-cp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.75rem; }
.mas-cp-grid2 .mas-cp-field label, .mas-cp-grid3 .mas-cp-field label { font-size: 0.875rem; }
.mas-cp-tag { margin-left: 0.35rem; padding: 0.1rem 0.45rem; background: var(--mas-st-new-bg, #e7eeff); border-radius: 6px; color: var(--mas-st-new, #2f6be8); font-size: 0.75rem; font-weight: 600; }
.mas-cp-tag--note { background: var(--mas-st-progress-bg, #fff1d1); color: var(--mas-st-progress, #8a5a00); }
.mas-cp-msg--note { background: #fffaf0; border: 1px dashed #e9c46a; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

@media (max-width: 1000px) {
	.mas-cp-detail--staff { grid-template-columns: 1fr; }
	.mas-cp-detail--staff .mas-cp-detail__side { order: 0; }
}

@media (max-width: 760px) {
	.mas-cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mas-cp-filters { grid-template-columns: 1fr 1fr; }
	.mas-cp-filters .mas-cp-field:first-child { grid-column: 1 / -1; }
	.mas-cp-grid3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.mas-cp-detail { grid-template-columns: 1fr; }
	.mas-cp-detail__side { order: -1; }
}

@media (max-width: 640px) {
	.mas-cp-choice-row { grid-template-columns: 1fr; }
	.mas-cp-table thead { display: none; }
	.mas-cp-table, .mas-cp-table tbody, .mas-cp-table tr, .mas-cp-table td { display: block; width: 100%; }
	.mas-cp-table tr { padding: 0.9rem 1rem; border-top: 1px solid var(--cp-line); }
	.mas-cp-table tr:first-child { border-top: 0; }
	.mas-cp-table td { display: inline-block; width: auto; padding: 0.15rem 0.5rem 0.15rem 0; border: 0; }
	.mas-cp-table td.mas-cp-title { display: block; padding: 0.25rem 0 0.5rem; }
}

/* Leads workspace -------------------------------------------------------- */
.mas-cp-areas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.5rem 0 1.25rem; }
.mas-cp-areas a { padding: 0.5rem 0.95rem; border: 1px solid var(--cp-line); border-radius: 999px; color: var(--cp-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; background: #fff; }
.mas-cp-areas a.is-active { background: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }
.mas-cp-areas a b { margin-left: 0.3rem; padding: 0 0.45rem; background: var(--cp-mango); border-radius: 999px; color: var(--cp-ink); font-size: 0.75rem; }
.mas-cp-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mas-heat { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; vertical-align: middle; }
.mas-heat--hot { background: #ffe4d6; color: #a83a00; }
.mas-heat--warm { background: #fff1d1; color: #8a5a00; }
.mas-heat--cool { background: #e7eeff; color: #2f5bc4; }
.mas-pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.mas-pill--new { background: var(--mas-st-new-bg, #e7eeff); color: var(--mas-st-new, #2f6be8); }
.mas-pill--progress { background: var(--mas-st-progress-bg, #fff1d1); color: var(--mas-st-progress, #8a5a00); }
.mas-pill--hold { background: var(--mas-st-hold-bg, #efebff); color: var(--mas-st-hold, #6046c9); }
.mas-pill--resolved { background: var(--mas-st-resolved-bg, #dff4ea); color: var(--mas-st-resolved, #13774f); }
.mas-pill--closed { background: var(--mas-st-closed-bg, #eef0f5); color: var(--mas-st-closed, #5b6075); }
/* Board */
.mas-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }
.mas-board__col { min-width: 0; padding: 0.75rem; background: var(--cp-bg); border-radius: var(--cp-radius); }
.mas-board__col--quiet { background: transparent; border: 1px dashed var(--cp-line); }
.mas-board__col h3 { display: flex; justify-content: space-between; margin: 0 0 0.6rem; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-muted); }
.mas-board__col h3 span { color: var(--cp-ink); }
.mas-board__empty { margin: 0; color: var(--cp-muted); font-size: 0.875rem; }
.mas-board__more { display: block; margin-top: 0.25rem; color: var(--cp-ink); font-size: 0.875rem; font-weight: 600; }
.mas-lead-card { display: block; margin: 0 0 0.6rem; padding: 0.7rem 0.8rem; background: #fff; border: 1px solid var(--cp-line); border-left: 3px solid transparent; border-radius: 10px; color: var(--cp-ink); text-decoration: none; transition: box-shadow 0.15s ease; }
.mas-lead-card:hover { box-shadow: var(--mas-shadow, 0 8px 24px rgba(20,18,58,.08)); }
.mas-lead-card.is-stale { border-left-color: #e9a23b; }
.mas-lead-card__top { display: flex; justify-content: space-between; gap: 0.4rem; align-items: flex-start; }
.mas-lead-card__top b { font-size: 0.9375rem; line-height: 1.3; }
.mas-lead-card__who, .mas-lead-card__needs { display: block; margin-top: 0.15rem; color: var(--cp-muted); font-size: 0.8125rem; line-height: 1.35; }
.mas-lead-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.5rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--cp-muted); }
.mas-lead-card__foot b { color: var(--cp-ink); }
.mas-lead-card__task { color: #8a5a00; font-weight: 600; }
.mas-cp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.mas-tasks { margin: 0; padding: 0; list-style: none; }
.mas-tasks li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid var(--cp-line); }
.mas-tasks li:first-child { border-top: 0; }
.mas-tasks li.is-late .mas-cp-sub { color: #c93838; font-weight: 600; }
.mas-tasks__done button, .mas-check { width: 1.6rem; height: 1.6rem; padding: 0; border: 1.5px solid #c9ccd8; border-radius: 50%; background: #fff; color: transparent; cursor: pointer; font: inherit; line-height: 1; }
.mas-tasks__done button:hover, .mas-check:hover { border-color: var(--cp-ink); color: var(--cp-ink); }
.mas-linkbox p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; }
.mas-linkbox code { flex: 1; min-width: 0; padding: 0.35rem 0.55rem; background: var(--cp-bg); border-radius: 6px; font-size: 0.8125rem; overflow-wrap: anywhere; }
.mas-linkbox__name { width: 100%; }
.mas-linkbox__lang { width: 4.5rem; font-weight: 600; font-size: 0.875rem; }
.mas-cp-filters--leads { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
/* Lead screen */
.mas-lead-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.mas-lead-hero__name { margin: 0 0 0.25rem !important; font-size: 1.375rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mas-lead-hero__contact { margin: 0.35rem 0 0 !important; font-size: 0.9375rem; }
.mas-lead-hero__contact a { color: var(--cp-ink); font-weight: 600; text-decoration: none; }
.mas-lead-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mas-cp-detail--lead { grid-template-columns: minmax(0, 1fr) 22rem; }
.mas-lead-main .mas-cp-card, .mas-lead-side .mas-cp-card { margin-bottom: 1.25rem; }
.mas-compose { margin-bottom: 1.25rem; border: 2px solid var(--cp-mango); }
.mas-compose__head { display: flex; justify-content: space-between; align-items: center; }
.mas-compose__head h3 { margin: 0; }
.mas-compose__head button, .mas-cp-link[type=button] { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.mas-compose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: 0.75rem; }
.mas-compose__fields { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.875rem; color: var(--cp-muted); }
.mas-chip { padding: 0.2rem 0.6rem; background: var(--cp-bg); border: 1px solid var(--cp-line); border-radius: 999px; color: var(--cp-ink); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.mas-chip:hover { border-color: var(--cp-ink); }
.mas-note-form { margin-bottom: 1rem; padding: 0.9rem; background: var(--cp-bg); border-radius: 10px; }
.mas-note-form__kinds { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.5rem; font-size: 0.9375rem; }
.mas-note-form textarea { width: 100%; }
.mas-note-form__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.mas-note-form__due { font-size: 0.875rem; color: var(--cp-muted); }
.mas-note-form__due input { width: auto; min-height: 2.25rem; }
.mas-timeline { margin: 0; padding: 0; list-style: none; }
.mas-timeline__item { position: relative; display: flex; gap: 0.85rem; padding: 0.75rem 0; border-top: 1px solid var(--cp-line); }
.mas-timeline__dot { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.35rem; border-radius: 50%; background: #c9ccd8; }
.mas-timeline__item--email .mas-timeline__dot { background: var(--mas-blue, #2f6be8); }
.mas-timeline__item--call .mas-timeline__dot, .mas-timeline__item--meeting .mas-timeline__dot { background: #13774f; }
.mas-timeline__item--task .mas-timeline__dot { background: var(--cp-mango); }
.mas-timeline__item--status .mas-timeline__dot, .mas-timeline__item--proposal .mas-timeline__dot { background: var(--cp-ink); }
.mas-timeline__item--accepted .mas-timeline__dot, .mas-timeline__item--client .mas-timeline__dot { background: #13774f; box-shadow: 0 0 0 3px #dff4ea; }
.mas-timeline__item--viewed .mas-timeline__dot { background: #6046c9; }
.mas-timeline__item.is-done .mas-timeline__task { text-decoration: line-through; color: var(--cp-muted); }
.mas-timeline__body { flex: 1; min-width: 0; }
.mas-timeline__meta { margin: 0 0 0.25rem !important; font-size: 0.875rem; }
.mas-timeline__text { font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.mas-timeline__text--email { padding: 0.6rem 0.8rem; background: #f6f7fb; border-left: 3px solid var(--mas-blue, #2f6be8); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.mas-timeline__task { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 !important; }
.mas-timeline__del { margin-top: 0.25rem; }
.mas-inline { display: inline; }
.mas-answers__title { margin: 1rem 0 0.4rem; color: #8a5a00; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mas-answers { display: grid; grid-template-columns: minmax(10rem, 35%) 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9375rem; }
.mas-answers dt { color: var(--cp-muted); }
.mas-answers dd { margin: 0; font-weight: 600; }
.mas-answers dd.is-long { font-weight: 400; line-height: 1.5; }
.mas-edit-contact { margin-top: 1rem; font-size: 0.9375rem; }
.mas-edit-contact summary { cursor: pointer; font-weight: 600; }
.mas-audit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0.75rem 0; }
.mas-audit-stats div { padding: 0.5rem 0.7rem; background: var(--cp-bg); border-top: 3px solid var(--cp-mango); border-radius: 6px; }
.mas-audit-stats b { display: block; font-size: 1.25rem; }
.mas-audit-stats span { font-size: 0.75rem; color: var(--cp-muted); line-height: 1.3; }
.mas-audit-list { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.mas-audit-list li { margin-bottom: 0.35rem; }
.mas-prop-row { padding: 0.6rem 0; border-bottom: 1px solid var(--cp-line); font-size: 0.9375rem; }
.mas-prop-row a { color: var(--cp-ink); text-decoration: none; }
.mas-prop-row__links { display: block; margin-top: 0.15rem; font-size: 0.8125rem; }
.mas-prop-row__links a { text-decoration: underline; text-decoration-color: var(--cp-mango); text-underline-offset: 0.2em; }
.mas-service-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--cp-line); font-size: 0.9375rem; }
.mas-service-row select { width: auto; min-height: 2rem; font-size: 0.8125rem; }
.mas-service-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.mas-service-add input { flex: 1; min-height: 2.25rem; }
.mas-code { display: block; padding: 0.4rem 0.6rem; background: var(--cp-bg); border-radius: 6px; font-size: 0.75rem; overflow-wrap: anywhere; }
.mas-builder__side hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--cp-line); }
.mas-services { margin: 0; padding: 0; list-style: none; }
.mas-services li { padding: 0.55rem 0; border-top: 1px solid var(--cp-line); }
.mas-services li:first-child { border-top: 0; }
.mas-services b { margin-right: 0.4rem; }
.mas-cp-two--client { margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .mas-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mas-cp-stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .mas-cp-detail--lead, .mas-cp-two, .mas-compose__grid { grid-template-columns: 1fr; } .mas-cp-filters--leads { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mas-board { grid-template-columns: 1fr; } .mas-cp-stats--5 { grid-template-columns: 1fr 1fr; } .mas-answers { grid-template-columns: 1fr; gap: 0.1rem; } .mas-answers dd { margin-bottom: 0.5rem; } .mas-audit-stats { grid-template-columns: 1fr 1fr; } }

/* Link-style buttons inside the portal must not pick up the theme's submit button look. */
.mas-cp .mas-inline button.mas-cp-link, .mas-cp button.mas-cp-link, .mas-cp button[type="submit"].mas-cp-link:not(.mas-btn), .mas-cp .mas-timeline__del button { min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--cp-ink); font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--cp-mango); text-underline-offset: 0.25em; cursor: pointer; }
.mas-cp .mas-timeline__task button.mas-check, .mas-cp .mas-tasks__done button { min-height: 0; width: 1.5rem; height: 1.5rem; padding: 0; background: #fff; border: 1.5px solid #c9ccd8; border-radius: 50%; color: transparent; font-size: 0.8rem; line-height: 1; }
.mas-cp .mas-timeline__task button.mas-check:hover, .mas-cp .mas-tasks__done button:hover { border-color: var(--cp-ink); color: var(--cp-ink); background: #fff; }
.mas-cp .mas-prop button.button-link-delete { min-height: 0; padding: 0; background: none; border: 0; color: #b32d2e; }

/* v3.1: two-factor, clients, files, onboarding, reports. */
.mas-2fa { margin-bottom: 1.25rem; }
.mas-2fa h3 .mas-pill { margin-left: 0.5rem; vertical-align: middle; }
.mas-2fa__tabs { display: flex; gap: 0.4rem; margin: 0.75rem 0 1rem; border-bottom: 1px solid var(--cp-line); }
.mas-cp .mas-2fa__tabs button { min-height: 0; padding: 0.5rem 0.8rem; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--cp-muted); font: inherit; font-weight: 600; cursor: pointer; }
.mas-cp .mas-2fa__tabs button.is-active { color: var(--cp-ink); border-bottom-color: var(--cp-mango); }
.mas-2fa__steps { margin: 0; padding-left: 1.2rem; font-size: 0.9375rem; line-height: 1.5; }
.mas-2fa__steps li { margin-bottom: 0.75rem; }
.mas-2fa__qr { width: 180px; height: 180px; margin: 0.6rem 0 0.3rem; padding: 6px; background: #fff; border: 1px solid var(--cp-line); border-radius: 8px; }
.mas-2fa__qr svg { width: 100%; height: 100%; display: block; }
.mas-2fa__key { display: inline-block; padding: 0.15rem 0.4rem; background: var(--cp-bg); border-radius: 4px; font-size: 0.85rem; letter-spacing: 0.05em; }
.mas-2fa__confirm { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.mas-2fa__confirm input[type=text] { width: 8rem; min-height: 2.4rem; font-size: 1.1rem; letter-spacing: 0.2em; text-align: center; }
.mas-2fa__off { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--cp-line); font-size: 0.875rem; }
.mas-2fa__off input { min-height: 2.2rem; width: 12rem; }
.mas-2fa__codes ul { columns: 2; margin: 0.4rem 0; padding-left: 1.2rem; }
.mas-2fa__codes code { font-size: 1rem; letter-spacing: 0.05em; }
.mas-2fa__change, .mas-2fa__log { margin-top: 0.75rem; font-size: 0.9375rem; }
.mas-2fa__change summary, .mas-2fa__log summary { cursor: pointer; font-weight: 600; }
.mas-2fa__log ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--cp-muted); }
.mas-cp-stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mas-stage { display: flex; gap: 3px; margin: 0.3rem 0 0; }
.mas-stage span { flex: 1; height: 5px; background: var(--cp-line); border-radius: 3px; }
.mas-stage span.is-on { background: var(--cp-mango); }
.mas-stage span.is-done { background: #2e8b57; }
.mas-files { margin: 0; padding: 0; list-style: none; }
.mas-files li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--cp-line); font-size: 0.9375rem; }
.mas-files li:first-child { border-top: 0; }
.mas-files .mas-cp-sub { display: block; }
.mas-files__act { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mas-upload { display: grid; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--cp-line); font-size: 0.9375rem; }
.mas-upload input[type=file] { font-size: 0.875rem; }
.mas-upload__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mas-upload__row input[type=text] { flex: 1; min-width: 10rem; min-height: 2.25rem; }
.mas-check-list { margin: 0; padding: 0; list-style: none; }
.mas-check-list li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; border-top: 1px solid var(--cp-line); font-size: 0.9375rem; }
.mas-check-list li:first-child { border-top: 0; }
.mas-check-list li.is-done { color: var(--cp-muted); text-decoration: line-through; }
.mas-check-list input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
.mas-check-list .mas-who { margin-left: auto; font-size: 0.75rem; color: var(--cp-muted); white-space: nowrap; }
.mas-approve { padding: 0.9rem 1rem; margin-bottom: 0.75rem; background: #fff7e6; border: 1px solid #f3dca8; border-radius: 10px; }
.mas-approve form { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.mas-approve textarea { min-height: 3.5rem; }
.mas-approve__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mas-client-head { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.mas-svc { display: grid; grid-template-columns: 1fr; gap: 0.4rem; padding: 0.7rem 0; border-top: 1px solid var(--cp-line); font-size: 0.9375rem; }
.mas-svc:first-child { border-top: 0; }
.mas-svc__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mas-svc__row select, .mas-svc__row input { min-height: 2.1rem; font-size: 0.8125rem; width: auto; }
.mas-svc__row input[type=date] { width: 10rem; }
.mas-svc__row input[type=text] { width: 7rem; }
.mas-renew { color: #a12d2d; font-weight: 600; }
.mas-rating { display: inline-flex; gap: 0.2rem; }
.mas-rating i { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--cp-line); }
.mas-rating i.is-on { background: var(--cp-mango); }
.mas-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mas-report-grid table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.mas-report-grid td, .mas-report-grid th { padding: 0.35rem 0; border-top: 1px solid var(--cp-line); text-align: left; }
.mas-report-grid th { border-top: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-muted); }
.mas-report-grid td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mas-bar { display: block; height: 6px; margin-top: 4px; background: var(--cp-mango); border-radius: 3px; }
.mas-lost-reason { display: none; }
.mas-lost-reason.is-open { display: block; }
.mas-ok-page { max-width: 560px; margin: 2rem auto; }
@media (max-width: 1100px) { .mas-cp-stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mas-report-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mas-cp-stats--6 { grid-template-columns: 1fr 1fr; } .mas-files li { grid-template-columns: 1fr; } .mas-client-head { grid-template-columns: 1fr; } }

/* 3.2: workspace layout with a left sidebar ------------------------------------------------- */
/* The layout follows the width it is given (not the window), so it lines up with any page column. */
.mas-cp--app { container-type: inline-size; container-name: mascp; }
.mas-cp-app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.mas-cp-main { min-width: 0; }
.mas-cp-side { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding: 1rem 0.7rem; background: var(--cp-ink); border-radius: var(--cp-radius); color: #c9cbe0; scrollbar-width: thin; }
.mas-cp-side__top { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.6rem; }
.mas-cp-side__brand { color: var(--cp-mango); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mas-cp-side__current { display: none; }
.mas-cp-side__toggle { margin-left: auto; padding: 0.45rem 0.9rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #fff; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.mas-cp-side__toggle:focus-visible, .mas-cp-side a:focus-visible { outline: 2px solid var(--cp-mango); outline-offset: 2px; }
.mas-cp-side__who { display: flex; flex-direction: column; gap: 0.1rem; margin: 0.7rem 0 0.75rem !important; padding: 0 0.6rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; }
.mas-cp-side__who b { color: #fff; font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.mas-cp-side__list, .mas-cp-side__sub { margin: 0; padding: 0; list-style: none; }
.mas-cp-side__list--setup, .mas-cp-side__list--you { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mas-cp-side__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 10px; color: #d9daec; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-decoration: none; }
.mas-cp-side__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.mas-cp-side__link.is-active { background: rgba(255, 182, 39, 0.16); color: #fff; box-shadow: inset 3px 0 0 var(--cp-mango); }
.mas-cp-side__link.is-active .mas-cp-icon { color: var(--cp-mango); }
.mas-cp-icon { flex: none; }
.mas-cp-side__badge { margin-left: auto; min-width: 1.4rem; padding: 0.05rem 0.45rem; background: var(--cp-mango); border-radius: 999px; color: var(--cp-ink); font-size: 0.75rem; font-weight: 700; text-align: center; }
.mas-cp-side__sub { margin: 0.2rem 0 0.35rem 1.55rem; padding-left: 0.6rem; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.mas-cp-side__sub a { display: block; padding: 0.38rem 0.6rem; border-radius: 8px; color: #b9bbd6; font-size: 0.875rem; text-decoration: none; }
.mas-cp-side__sub a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.mas-cp-side__sub a.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; }
.mas-cp-side__list--you .mas-cp-side__link { font-size: 0.875rem; color: #b9bbd6; }

/* The page beside the sidebar: its own header lines up with the top of the sidebar. */
.mas-cp-main > .mas-cp-notice:first-child { margin-top: 0; }
.mas-cp-main .mas-cp-head { align-items: flex-start; margin-top: 0; padding-top: 0.15rem; }
.mas-cp-main .mas-cp-head > .mas-btn { flex: none; }
.mas-settings__pick { margin-top: -0.25rem; }
.mas-cp .mas-settings .form-table tr + tr th, .mas-cp .mas-settings .form-table tr + tr td { border-top: 1px solid var(--cp-line); }
.mas-cp .mas-settings .form-table:last-of-type { margin-bottom: 0; }
.mas-settings__save { position: sticky; bottom: 0; margin: 1.25rem calc(-1 * clamp(1.25rem, 3vw, 2rem)) calc(-1 * clamp(1.25rem, 3vw, 2rem)) !important; padding: 1rem clamp(1.25rem, 3vw, 2rem); background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--cp-line); border-radius: 0 0 var(--cp-radius) var(--cp-radius); backdrop-filter: blur(6px); }

/* Narrower column: smaller sidebar, fewer board and stat columns. */
@container mascp (max-width: 1320px) {
	.mas-cp-main .mas-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mas-cp-main .mas-cp-stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container mascp (max-width: 1080px) {
	.mas-cp-app { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.5rem; }
	.mas-cp-main .mas-cp-detail--lead, .mas-cp-main .mas-cp-two { grid-template-columns: 1fr; }
	.mas-cp-main .mas-cp-stats--4 { grid-template-columns: 1fr 1fr; }
}
/* Narrow column (phones, small windows): the sidebar sits on top and folds into a Menu button. */
@container mascp (max-width: 820px) {
	.mas-cp-app { display: block; }
	.mas-cp-side { position: static; max-height: none; margin-bottom: 1.25rem; padding: 0.7rem; }
	.mas-cp-side__brand { display: none; }
	.mas-cp-side__current { display: block; padding-left: 0.1rem; color: #fff; font-weight: 600; }
	.mas-cp-side.is-collapsed .mas-cp-side__body { display: none; }
	.mas-cp-side__who { margin-top: 0.8rem !important; }
	.mas-cp-main .mas-cp-stats--4, .mas-cp-main .mas-cp-stats--6 { grid-template-columns: 1fr 1fr; }
	.mas-cp-main .mas-board { grid-template-columns: 1fr; }
	.mas-cp .mas-settings .form-table, .mas-cp .mas-settings .form-table tbody, .mas-cp .mas-settings .form-table tr, .mas-cp .mas-settings .form-table th, .mas-cp .mas-settings .form-table td { display: block; width: auto; }
	.mas-cp .mas-settings .form-table th { padding-bottom: 0.25rem; }
	.mas-cp .mas-settings .form-table tr + tr td { border-top: 0; }
}

/* Prospects */
.mas-cp-bulk { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin: 0 0 0.75rem; }
.mas-cp-bulk .mas-cp-field { margin: 0; }
.mas-cp-table--prospects .mas-cp-check { width: 2.25rem; text-align: center; }
.mas-cp-inline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.mas-cp-inline .mas-cp-field { margin: 0; }
.mas-cp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mas-cp-timeline li { padding-left: 0.75rem; border-left: 2px solid var(--cp-mango); font-size: 0.9rem; }
.mas-cp-filters--prospects { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
@container mascp (max-width: 820px) { .mas-cp-filters--prospects { grid-template-columns: 1fr 1fr; } }

/* The portal on its own page */
body.mas-portal-page { margin: 0; background: #f6f7f9; }
.mas-cp-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem clamp(1rem, 4vw, 2rem); background: var(--cp-ink, #14123a); color: #fff; }
.mas-cp-top__brand { display: flex; align-items: center; gap: 0.65rem; color: #fff; text-decoration: none; font-weight: 600; min-width: 0; }
.mas-cp-top__brand img { border-radius: 8px; flex: none; }
.mas-cp-top__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas-cp-top__brand b { color: var(--cp-mango, #ffb627); font-weight: 700; margin-left: 0.25rem; }
.mas-cp-top__site { flex: none; padding: 0.45rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.mas-cp-top__site:hover { background: rgba(255, 255, 255, 0.12); }
.mas-cp-page { max-width: 1240px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem) 4rem; }
@media (max-width: 520px) { .mas-cp-top__brand b { display: none; } }
.mas-cp-filters--clients { grid-template-columns: minmax(0, 1fr) auto; }

/* Booking calendar */
.mas-cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.mas-cal h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.mas-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mas-cal__dow { font-size: 0.7rem; color: var(--cp-muted); text-transform: uppercase; }
.mas-cal__day { position: relative; display: block; cursor: pointer; }
.mas-cal__day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mas-cal__day span { display: block; padding: 0.5rem 0; border: 1px solid var(--cp-line); border-radius: 8px; font-size: 0.9rem; background: #fff; }
.mas-cal__day input:checked + span { background: var(--cp-mango); border-color: var(--cp-mango); color: var(--cp-ink); font-weight: 700; }
.mas-cal__day input:focus-visible + span { outline: 2px solid var(--cp-ink); outline-offset: 1px; }
.mas-cal__day.is-off { cursor: default; }
.mas-cal__day.is-off span { opacity: 0.35; background: transparent; }
.mas-cal-hours__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.4rem; }
.mas-cal-hours__row strong { min-width: 7.5rem; }
.mas-cal-quick { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mas-cal-details summary { cursor: pointer; font-weight: 600; margin: 0.5rem 0; }

/* Personal email to a prospect */
.mas-pcompose .mas-cp-field textarea { min-height: 14rem; }
.mas-pcompose__opts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.75rem 0; }
.mas-pcompose__opts label { display: inline-flex; gap: 0.4rem; align-items: center; }
.mas-pcompose .mas-cp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mas-pcompose__open { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.mas-pcompose__sent { border: 1px solid var(--cp-line, #e3e5ec); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.mas-pcompose__sent summary { cursor: pointer; }
.mas-pcompose__sent div { margin-top: 0.6rem; font-size: 0.9rem; white-space: normal; }