/*
 * White Peak Client Portal
 * Look and feel follows White Peak client reports: Poppins headings, Lato body,
 * navy/green palette, white panels on a warm grey ground, light-only.
 */
.wpcp {
	color-scheme: light;
	--navy: #22467F; --navy-dk: #20365F; --navy-hv: #38588C; --navy-60: #7A90B2; --navy-20: #D3DAE5;
	--ink: #313237; --text: #494B51; --muted: #6b6e76;
	--green: #6DA93D; --green-hv: #7CB250; --green-20: #E2EED8; --green-dk: #3f7a1f;
	--orange: #F39130; --orange-20: #FDE9D4; --orange-dk: #9a520c;
	--rose: #C44964; --link: #4175FC;
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ground: #F3F1F1; --panel: #FFFFFF; --rule: #E8EBEB; --tint: #F7F9FF; --blue-card: #E7F0FE;
	--head: "Poppins", "Segoe UI", system-ui, sans-serif;
	--body: "Lato", "Helvetica Neue", Arial, sans-serif;
	font: 400 16px/1.6 var(--body);
	color: var(--text);
	background: var(--ground);
	min-height: 100vh;
	padding-bottom: 48px;
	box-sizing: border-box;
}
.wpcp *, .wpcp *::before, .wpcp *::after { box-sizing: border-box; }
.wpcp h1, .wpcp h2, .wpcp h3 { font-family: var(--head); font-weight: 700; text-wrap: balance; margin: 0; }
.wpcp h1 { color: var(--navy); font-size: clamp(40px, 4.2vw, 48px); line-height: 1.15; }
.wpcp h2 { color: var(--ink); font-size: clamp(28px, 3vw, 32px); line-height: 1.25; }
.wpcp h3 { color: var(--ink); font-size: 20px; line-height: 1.3; }
.wpcp p { margin: 0; }
.wpcp a { color: var(--link); text-decoration: none; }
.wpcp code { font: 700 13px/1.4 ui-monospace, Menlo, monospace; color: var(--navy); }
.wpcp-muted { color: var(--muted); }
.wpcp-small, .wpcp-note { font-size: 14px; color: var(--muted); }
.wpcp-eyebrow { font: 600 12px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }

/* Brand bar: white, logo left, 4px navy rule (as in reports) */
.wpcp-brandbar { background: var(--panel); border-bottom: 4px solid var(--navy); }
.wpcp-brandbar-inner { max-width: 980px; margin: 0 auto; padding: 18px 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.wpcp-logo { height: 34px; width: auto; display: block; }
.wpcp-meta { font: 600 12px/1.4 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.wpcp-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--muted); }
.wpcp-user { color: var(--ink); font-weight: 700; }

.wpcp-page-inner { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.wpcp-banner { margin: 20px 0 0; padding: 10px 14px; border-radius: 6px; background: var(--orange-20); color: var(--orange-dk); font-size: 14px; }
.wpcp-banner.is-staff { background: var(--navy-20); color: var(--navy-dk); }

/* Intro */
.wpcp-intro { display: grid; gap: 14px; padding: 40px 0 26px; }
.wpcp-lede { font-size: 18px; color: var(--ink); max-width: 68ch; }
.wpcp-scope { font-size: 14px; color: var(--muted); max-width: 68ch; }

/* KPI band */
.wpcp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-radius: 6px; overflow: hidden; }
.wpcp-kpi { appearance: none; border: 0; border-right: 1px solid var(--rule); background: none; text-align: left; padding: 22px 20px; display: grid; gap: 4px; cursor: pointer; font: inherit; color: inherit; }
.wpcp-kpi:last-child { border-right: 0; }
.wpcp-kpi:hover, .wpcp-kpi:focus { background: var(--tint); color: inherit; }
.wpcp-kpi .l { font: 600 12px/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.wpcp-kpi .v { font: 700 34px/1.1 var(--head); color: var(--navy); font-variant-numeric: tabular-nums; }
.wpcp-kpi .s { font-size: 14px; color: var(--muted); }
.wpcp-kpi.is-attention { box-shadow: inset 0 4px 0 var(--orange); }
.wpcp-kpi.is-attention .v { color: var(--orange-dk); }

/* Tabs */
.wpcp-tabs { display: flex; gap: 4px; margin: 28px 0 16px; border-bottom: 1px solid #dcdcdc; }
.wpcp-tabs button { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font: 600 15px/1 var(--head); color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.wpcp-tabs button:hover, .wpcp-tabs button:focus, .wpcp-tabs button:active { background: none; color: var(--navy); box-shadow: none; }
.wpcp-tabs button.is-active { color: var(--navy); border-bottom-color: var(--navy); }
.wpcp button:focus-visible, .wpcp select:focus-visible, .wpcp textarea:focus-visible, .wpcp input:focus-visible, .wpcp a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Toolbar */
.wpcp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.wpcp-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wpcp-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.wpcp-filter button { appearance: none; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 7px 13px; font: 600 13px/1.2 var(--head); cursor: pointer; }
.wpcp-filter button:hover, .wpcp-filter button:focus { background: var(--tint); color: var(--ink); border-color: var(--navy-20); }
.wpcp-filter button.is-active, .wpcp-filter button.is-active:hover, .wpcp-filter button.is-active:focus { background: var(--navy); border-color: var(--navy); color: #fff; }
.wpcp-filter button.has-attention:not(.is-active), .wpcp-filter button.has-attention:not(.is-active):hover, .wpcp-filter button.has-attention:not(.is-active):focus { border-color: var(--orange); color: var(--orange-dk); }
.wpcp-count { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.07); font-size: 12px; text-align: center; }
.wpcp-filter button.is-active .wpcp-count { background: rgba(255,255,255,.2); }
.wpcp-mine-toggle { font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wpcp-mine { font-weight: 700; color: var(--green-dk); }
.wpcp-due { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--orange-dk); }
.wpcp-due.is-past { color: var(--rose); }
/* Search (above the toolbar) */
.wpcp-search { margin-bottom: 12px; }
.wpcp .wpcp-search-input { box-sizing: border-box; width: 100%; max-width: 420px; font: 400 16px/1.4 var(--body); color: var(--ink); padding: 9px 12px 9px 36px; border: 1px solid #cfd3d6; border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.wpcp .wpcp-search-input:focus { border-color: var(--navy); background-color: #fff; color: var(--ink); }
.wpcp select { font: 400 15px/1.4 var(--body); color: var(--ink); padding: 8px 10px; border: 1px solid #cfd3d6; border-radius: 6px; background: #fff; max-width: 100%; }

/* Panels (report "section") */
.wpcp-panel-box { background: var(--panel); border-radius: 6px; padding: 26px clamp(18px, 4vw, 32px); margin-top: 20px; display: grid; gap: 12px; }
.wpcp-panel-box:first-child { margin-top: 0; }
.wpcp-group.is-review .wpcp-eyebrow { color: var(--orange-dk); }

/* Task rows: report callout style (4px left rule) */
.wpcp-task { background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--navy); border-radius: 0 6px 6px 0; overflow: hidden; }
.wpcp-task.is-review { border-left-color: var(--orange); }
.wpcp-task.is-done { border-left-color: var(--green); }
.wpcp-task-head { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; padding: 14px 16px; cursor: pointer; color: inherit; font: inherit; }
.wpcp-task-head:hover, .wpcp-task-head:focus { background: var(--tint); color: inherit; }
.wpcp-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wpcp-task-title { font: 600 16px/1.35 var(--head); color: var(--ink); overflow-wrap: anywhere; }
.wpcp-task.is-done .wpcp-task-title { color: var(--muted); }
.wpcp-task-meta { font-size: 13px; color: var(--muted); }
.wpcp-chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; flex: none; margin: 0 4px 4px; }
.wpcp-task.is-open .wpcp-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.wpcp-pill { flex: none; font: 600 12px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.wpcp-pill.is-review { background: var(--orange-20); color: var(--orange-dk); }
.wpcp-pill.is-in_process { background: var(--navy-20); color: var(--navy-dk); }
.wpcp-pill.is-done { background: var(--green-20); color: var(--green-dk); }

.wpcp-task-body { padding: 4px 16px 18px; border-top: 1px solid var(--rule); }
.wpcp-desc { margin: 14px 0 6px; color: var(--text); overflow-wrap: anywhere; max-width: 72ch; }
.wpcp-desc p, .wpcp-comment-body p { margin: 0 0 10px; }
.wpcp-desc ul, .wpcp-desc ol, .wpcp-comment-body ul, .wpcp-comment-body ol { margin: 0 0 10px 1.2em; padding: 0; }
.wpcp-desc h4 { font: 600 15px/1.4 var(--head); color: var(--ink); margin: 14px 0 6px; }
.wpcp-task-body > h3 { font: 600 12px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin: 18px 0 10px; }
.wpcp-staff-note { font-size: 14px; color: var(--muted); margin: 0 0 6px; }

/* Conversation */
.wpcp-thread { display: flex; flex-direction: column; gap: 10px; }
.wpcp-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 92%; }
.wpcp-msg.is-team { align-self: flex-start; }
.wpcp-msg.is-client { align-self: flex-end; flex-direction: row-reverse; }
.wpcp-comment { padding: 10px 14px; border-radius: 6px; background: var(--tint); border: 1px solid var(--rule); overflow-wrap: anywhere; min-width: 0; }
.wpcp-comment.is-team { border-left: 4px solid var(--green); }
.wpcp-comment.is-client { background: var(--blue-card); border-color: var(--navy-20); }
.wpcp-comment-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.wpcp-comment-head strong { font: 600 14px/1.3 var(--head); color: var(--ink); }
.wpcp-org { font: 600 11px/1.3 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dk); }
.wpcp-comment-body p:last-child { margin-bottom: 0; }
.wpcp-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rule); }
.wpcp-avatar.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--navy-20); color: var(--navy-dk); font: 600 14px/1 var(--head); }
.wpcp-event { font-size: 13px; color: var(--muted); text-align: center; margin: 4px 0; }

/* Forms and buttons */
.wpcp textarea, .wpcp input[type=text], .wpcp input[type=password], .wpcp input[type=email], .wpcp input[type=date], .wpcp input[type=url] { width: 100%; font: 400 15px/1.5 var(--body); color: var(--ink); padding: 10px 12px; border: 1px solid #cfd3d6; border-radius: 6px; background: #fff; }
.wpcp-comment-form { margin-top: 14px; }
.wpcp-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
/* Buttons follow the Brand Style Guide (Oct 2026): Poppins SemiBold Title Case label, 12 x 24 px padding,
   6 px corners (never pill-shaped), no border, soft glow in the button's own fill color.
   Navy for routine actions; green (.is-primary) for the task's primary call to action, Mark as Done (Tim, 2026-10-16).
   Hover (Tim's example, 2026-10-16): fill 10% lighter, wider glow, and a right arrow appears after the label. */
.wpcp-btn { appearance: none; border: 0; background: var(--navy); color: #fff; border-radius: 6px; padding: 12px 24px; font: 600 15px/1.2 var(--head); cursor: pointer; box-shadow: 0 0 8px 1px var(--navy); transition: background-color .15s, box-shadow .15s; }
.wpcp-btn::after { content: ""; display: none; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; background: var(--arrow) center / contain no-repeat; }
.wpcp-btn:not(:disabled):hover, .wpcp-btn:not(:disabled):focus-visible { background: var(--navy-hv); color: #fff; box-shadow: 0 0 14px 2px var(--navy-hv); }
.wpcp-btn:not(:disabled):not(.is-armed):hover::after, .wpcp-btn:not(:disabled):not(.is-armed):focus-visible::after { display: inline-block; }
.wpcp-btn.is-primary { background: var(--green); box-shadow: 0 0 8px 1px var(--green); }
.wpcp-btn.is-primary:not(:disabled):hover, .wpcp-btn.is-primary:not(:disabled):focus-visible { background: var(--green-hv); box-shadow: 0 0 14px 2px var(--green-hv); }
.wpcp-btn:disabled { opacity: .6; cursor: default; }
.wpcp-btn.is-armed, .wpcp-btn.is-armed:not(:disabled):hover, .wpcp-btn.is-armed:not(:disabled):focus-visible { background: var(--navy); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.wpcp-btn.is-primary.is-armed, .wpcp-btn.is-primary.is-armed:not(:disabled):hover, .wpcp-btn.is-primary.is-armed:not(:disabled):focus-visible { background: var(--green); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); }
.wpcp-comment-form.is-preview textarea { background: #f6f7f8; cursor: not-allowed; resize: none; }
.wpcp-comment-form.is-preview .wpcp-btn:disabled { cursor: not-allowed; }
.wpcp-preview-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--orange-20); color: var(--orange-dk); font-size: 13px; }
.wpcp-link { appearance: none; background: none; border: 0; padding: 6px 0; color: var(--link); font: 400 14px/1.4 var(--body); cursor: pointer; }
.wpcp-link:hover, .wpcp-link:focus { background: none; color: var(--link); text-decoration: none; }
.wpcp-form-status { font-size: 14px; color: var(--green-dk); margin: 8px 0 0; min-height: 1em; }
.wpcp-form-status.is-error { color: var(--rose); }
.wpcp-flash { background: var(--green-20); color: var(--green-dk); border-radius: 6px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.wpcp-empty { background: var(--tint); border: 1px dashed var(--rule); border-radius: 6px; padding: 28px 20px; text-align: center; }
.wpcp-empty h3 { margin-bottom: 4px; }
.wpcp-empty p { color: var(--muted); }

/* Reports */
.wpcp-link-form { display: grid; gap: 4px; }
.wpcp-link-form.is-edit { margin: 0; }
.wpcp-link-grid { display: grid; grid-template-columns: 1fr 180px; gap: 10px 14px; }
.wpcp-link-grid label { display: flex; flex-direction: column; gap: 4px; font: 600 12px/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.wpcp-link-grid .is-wide { grid-column: 1 / -1; }
.wpcp-link-grid input, .wpcp-link-grid select { width: 100%; min-width: 0; text-transform: none; letter-spacing: 0; }
.wpcp-email { border: 1px solid var(--rule); background: var(--tint); border-radius: 6px; padding: 10px 12px; margin: 12px 0 0; }
.wpcp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 4px 0; cursor: pointer; flex-wrap: wrap; }
.wpcp-contacts { margin: 6px 0 0 24px; }
.wpcp-contacts p { margin: 4px 0; }
.wpcp-email-note { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; }
.wpcp-email-note[hidden] { display: none; }
.wpcp-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wpcp-link-item { background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; }
.wpcp-link-item.is-editing { padding: 16px; }
.wpcp-link-main { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t o" "m o" "v o"; gap: 2px 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.wpcp-link-main:hover { background: var(--tint); }
.wpcp-link-title { grid-area: t; font: 600 16px/1.35 var(--head); color: var(--navy); overflow-wrap: anywhere; }
.wpcp-link-meta { grid-area: m; font-size: 13px; color: var(--muted); }
.wpcp-link-seen { grid-area: v; font-size: 13px; color: var(--muted); }
.wpcp-link-seen.is-opened { color: var(--green-dk); font-weight: 600; }
.wpcp-link-open { grid-area: o; align-self: center; font: 400 14px/1 var(--body); color: var(--link); white-space: nowrap; }
.wpcp-link-tools { display: flex; gap: 16px; padding: 0 16px 10px; }
.wpcp-preview-select { font-size: 13px !important; padding: 5px 8px !important; max-width: 240px; }

/* Footer (as in reports) */
.wpcp-footer { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* Sign-in */
.wpcp-login-card { width: calc(100% - 32px); max-width: 460px; margin: 48px auto 0; background: var(--panel); border-radius: 6px; padding: 30px; display: grid; gap: 10px; }
.wpcp-login-card .wpcp-lede { font-size: 16px; }
.wpcp-login-card form p { margin: 12px 0 0; }
.wpcp-login-card label { display: block; font: 600 12px/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.wpcp-login-card .login-remember label { display: inline; font: 400 14px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.wpcp-login-card input[type=submit] { appearance: none; width: 100%; border: 0; background: var(--navy); color: #fff; border-radius: 6px; padding: 12px 24px; font: 600 15px/1.2 var(--head); cursor: pointer; margin-top: 4px; box-shadow: 0 0 8px 1px var(--navy); transition: background-color .15s, box-shadow .15s; }
.wpcp-login-card input[type=submit]:hover, .wpcp-login-card input[type=submit]:focus-visible { background: var(--navy-hv) var(--arrow) no-repeat right 24px center / 14px 14px; box-shadow: 0 0 14px 2px var(--navy-hv); }

@media (max-width: 760px) {
	.wpcp-kpis { grid-template-columns: repeat(2, 1fr); }
	.wpcp-kpi:nth-child(2) { border-right: 0; }
	.wpcp-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
	.wpcp-intro { padding-top: 28px; }
	.wpcp-kpi { padding: 16px 14px; }
	.wpcp-kpi .v { font-size: 28px; }
	.wpcp-task-head { flex-wrap: wrap; }
	.wpcp-task-main { flex-basis: calc(100% - 30px); }
	.wpcp-pill { order: 3; }
	.wpcp-msg { max-width: 100%; }
	.wpcp-avatar { width: 32px; height: 32px; }
	.wpcp-link-grid { grid-template-columns: 1fr; }
	.wpcp-preview-select { max-width: 100%; }
	.wpcp .wpcp-search-input { max-width: 100%; }
	.wpcp-toolbar-right, .wpcp-toolbar-right select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wpcp-chev, .wpcp-btn, .wpcp-login-card input[type=submit] { transition: none; } }

/* Landing / sign-in page */
.wpcp-landing { max-width: 980px; margin: 0 auto; padding: 48px 16px 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.wpcp-landing-intro { display: grid; gap: 16px; padding-top: 8px; }
.wpcp-landing-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.wpcp-landing-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.wpcp-landing-points strong { color: var(--ink); }
.wpcp-dot { flex: none; width: 4px; align-self: stretch; border-radius: 2px; background: var(--navy); }
.wpcp-dot.is-review { background: var(--orange); }
.wpcp-dot.is-done { background: var(--green); }
.wpcp-landing .wpcp-login-card { margin: 0; width: 100%; max-width: none; border-top: 4px solid var(--navy); border-radius: 0 0 6px 6px; padding: 28px; }
.wpcp-landing .wpcp-login-card h2 { font-size: 22px; margin-bottom: 2px; }
.wpcp-login-card a { color: var(--link); }
.wpcp-notice { margin: 0; padding: 10px 14px; border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; background: var(--green-20); color: var(--ink); font-size: 15px; }
.wpcp-notice.is-error { border-left-color: var(--rose); background: #F7E1E6; }
.wpcp-landing-footer { max-width: 980px; margin: 40px auto 0; padding: 0 16px; }
@media (max-width: 760px) {
	.wpcp-landing { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
	.wpcp-landing .wpcp-login-card { order: -1; }
}

/* Logins vault (1.4.0) */
.wpcp-vault-box { margin-bottom: 16px; display: grid; gap: 10px; }
.wpcp-vault-box > p { margin: 0; max-width: 68ch; }
.wpcp-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.wpcp-secret { display: inline-block; font-size: 15px; letter-spacing: .08em; background: var(--tint); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 6px; user-select: all; overflow-wrap: anywhere; }
.wpcp-qr { display: block; background: #fff; border: 1px solid var(--rule); border-radius: 6px; image-rendering: pixelated; max-width: 100%; height: auto; }
.wpcp-code-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.wpcp-code-form label { display: flex; flex-direction: column; gap: 4px; font: 600 12px/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.wpcp .wpcp-code { width: 9em; font: 700 22px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .2em; padding: 8px 10px; border: 1px solid #cfd3d6; border-radius: 6px; text-transform: none; }
.wpcp-vault-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; font-size: 14px; color: var(--green-dk); }
.wpcp-vault-bar select { max-width: 320px; }
.wpcp-vault-lockinfo { font-weight: 700; }
.wpcp-vault-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wpcp-vault-item { background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--navy); border-radius: 0 6px 6px 0; padding: 12px 16px 6px; display: grid; gap: 4px; }
.wpcp-vault-item.is-editing { padding: 16px; }
.wpcp-vault-item .wpcp-link-tools { padding: 4px 0 4px; align-items: center; flex-wrap: wrap; }
.wpcp-vault-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wpcp-vault-title { font: 600 16px/1.35 var(--head); color: var(--navy); overflow-wrap: anywhere; }
.wpcp-vault-kind { font-size: 13px; color: var(--muted); }
.wpcp-vault-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; }
.wpcp-vault-row .k { flex: 0 0 90px; font: 600 12px/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wpcp-vault-row a { overflow-wrap: anywhere; }
.wpcp-vault-row .wpcp-link { padding: 0; }
.wpcp-vault-user, .wpcp-vault-secret { font-family: ui-monospace, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.wpcp-vault-secret.is-shown { background: var(--orange-20); padding: 0 4px; border-radius: 3px; }
.wpcp-vault-notes { white-space: pre-wrap; flex: 1 1 300px; }
.wpcp-vault-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; border-bottom: 1px solid var(--rule); padding: 4px 0; }
.wpcp-vault-person .wpcp-check { flex: 1 1 280px; }
.wpcp-vault-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.wpcp-vault-box textarea, .wpcp-vault-item textarea { width: 100%; font: inherit; border: 1px solid #cfd3d6; border-radius: 6px; padding: 8px; text-transform: none; letter-spacing: 0; }
.wpcp-vault-grid { grid-template-columns: 1fr 1fr; }
.wpcp-offscreen { position: fixed; left: -9999px; top: 0; }
@media (max-width: 560px) { .wpcp-vault-row .k { flex-basis: 100%; } .wpcp-vault-grid { grid-template-columns: 1fr; } }

/* The theme's scroll-to-top button (Astra) prints its markup in the footer even though theme CSS is not loaded here. */
#ast-scroll-top { display: none !important; }