@shivaedev/work-board 0.11.0 → 0.13.0

package/docs/mockups/style.css

@@ -0,0 +1,1709 @@
+:root {
+	--paper: #f7f8f4;
+	--white: #fff;
+	--ink: #263c34;
+	--muted: #748077;
+	--line: #dfe5dc;
+	--green: #315b46;
+	--soft: #edf2e8;
+	--amber: #916129;
+	--gold: #e1b877;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	color-scheme: light;
+}
+* {
+	box-sizing: border-box;
+}
+body {
+	margin: 0;
+	font-size: 14px;
+	line-height: 1.55;
+	color: var(--ink);
+	background: var(--paper);
+}
+button,
+input,
+textarea {
+	font: inherit;
+}
+button,
+a {
+	-webkit-tap-highlight-color: transparent;
+}
+button {
+	color: inherit;
+	cursor: pointer;
+}
+a {
+	color: inherit;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+	text-underline-offset: 4px;
+}
+button:focus-visible,
+a:focus-visible,
+textarea:focus-visible,
+input:focus-visible {
+	outline: 3px solid #c48d45;
+	outline-offset: 4px;
+}
+[hidden] {
+	display: none;
+}
+h1,
+h2,
+h3,
+p {
+	margin: 0;
+}
+h1 {
+	font-size: clamp(28px, 2.7vw, 42px);
+	font-weight: 530;
+	line-height: 1.2;
+	letter-spacing: -1.65px;
+}
+h2 {
+	font-size: 17px;
+	font-weight: 600;
+	letter-spacing: -0.35px;
+}
+h3 {
+	font-size: 20px;
+	font-weight: 570;
+	line-height: 1.4;
+	letter-spacing: -0.5px;
+}
+.sidebar {
+	position: fixed;
+	inset: 0 auto 0 0;
+	display: flex;
+	flex-direction: column;
+	width: 224px;
+	padding: 25px 18px 20px;
+	color: #e8eee5;
+	background: #203a30;
+}
+.brand {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	padding: 0 9px 34px;
+	font-size: 21px;
+	font-weight: 550;
+	letter-spacing: -0.8px;
+}
+.brand-mark {
+	font:
+		italic 34px Georgia,
+		serif;
+	line-height: 1;
+}
+.brand-mark span {
+	color: #d0b47f;
+}
+.workspace {
+	display: flex;
+	gap: 11px;
+	align-items: center;
+	padding: 0 7px 23px;
+}
+.workspace strong {
+	display: block;
+	font-size: 14px;
+	font-weight: 550;
+}
+.workspace small,
+.profile small {
+	display: block;
+	margin-top: 2px;
+	font-size: 11px;
+	color: #9daf9f;
+}
+.project-icon {
+	padding: 7px 12px;
+	font-family: Georgia, serif;
+	font-size: 20px;
+	background: #385145;
+	border: 1px solid #536b59;
+	border-radius: 9px;
+}
+.local-dot {
+	display: inline-block;
+	flex-shrink: 0;
+	width: 6px;
+	height: 6px;
+	vertical-align: middle;
+	background: #92b797;
+	border-radius: 50%;
+}
+.workspace > .local-dot {
+	margin-left: auto;
+}
+.search-launch {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 9px;
+	font-size: 11px;
+	color: #c5d1c4;
+	background: transparent;
+	border: 1px solid #49604e;
+	border-radius: 7px;
+}
+kbd {
+	padding: 0 4px;
+	font:
+		10px ui-monospace,
+		monospace;
+	border: 1px solid #667869;
+	border-radius: 3px;
+}
+.nav-label {
+	margin: 27px 11px 10px;
+	font-size: 9px;
+	color: #94a995;
+	letter-spacing: 1.9px;
+}
+nav a {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	padding: 10px 12px;
+	margin: 3px 0;
+	font-size: 13px;
+	color: #c1cec2;
+	border-radius: 6px;
+}
+.nav-icon {
+	width: 20px;
+	font-size: 19px;
+	line-height: 1;
+}
+nav a.active {
+	color: #fff;
+	background: #3a5443;
+}
+nav a:hover {
+	text-decoration: none;
+	background: #314b3c;
+}
+nav em,
+.nav-count {
+	margin-left: auto;
+	font-size: 10px;
+	font-style: normal;
+}
+nav em {
+	padding: 1px 6px;
+	color: #e5e8d6;
+	background: #586c4f;
+	border-radius: 4px;
+}
+.attention-dot {
+	width: 5px;
+	height: 5px;
+	margin-left: auto;
+	background: #d9b77d;
+	border-radius: 50%;
+}
+.pinned {
+	margin: 6px 11px;
+	font-size: 11px;
+	color: #bbcabb;
+}
+.sidebar-note {
+	padding: 35px 10px 24px;
+	margin-top: auto;
+	font-size: 10px;
+	color: #c6d0c1;
+}
+.sidebar-note .local-dot {
+	margin-right: 7px;
+}
+.sidebar-note p {
+	padding: 9px 0 0 14px;
+	line-height: 1.8;
+	color: #8fa590;
+}
+.profile {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	padding: 19px 6px 0;
+	font-size: 12px;
+	border-top: 1px solid #3b5142;
+}
+.avatar {
+	display: grid;
+	place-items: center;
+	width: 30px;
+	height: 30px;
+	font-size: 12px;
+	color: #324538;
+	background: #dfd9c4;
+	border-radius: 50%;
+}
+.app {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	margin-left: 224px;
+}
+.topbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 68px;
+	padding: 0 40px;
+	font-size: 11px;
+	color: var(--muted);
+	border-bottom: 1px solid var(--line);
+}
+.topbar strong {
+	font-weight: 500;
+	color: var(--ink);
+}
+.topbar span {
+	margin: 0 12px;
+	color: #b1b8ac;
+}
+.prototype-label {
+	font-size: 8px;
+	letter-spacing: 1.6px;
+}
+main {
+	flex: 1;
+	width: 100%;
+	max-width: 1700px;
+	padding: 38px 40px 35px;
+	margin: auto;
+}
+.page-heading {
+	display: flex;
+	gap: 20px;
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-bottom: 32px;
+}
+.eyebrow {
+	margin-bottom: 12px;
+	font-size: 9px;
+	font-weight: 650;
+	color: var(--muted);
+	letter-spacing: 1.9px;
+}
+.subtitle {
+	margin-top: 12px;
+	font-size: 13px;
+	color: var(--muted);
+}
+.wave {
+	padding: 7px 10px;
+	margin-top: 30px;
+	font-size: 8px;
+	color: #73826e;
+	letter-spacing: 1.3px;
+	white-space: nowrap;
+	border: 1px solid var(--line);
+	border-radius: 4px;
+}
+.overview-grid,
+.decision-layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
+	gap: 35px;
+}
+.section-heading {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 15px;
+}
+.section-heading > span,
+.section-heading > a {
+	font-size: 10px;
+	color: var(--muted);
+}
+.count {
+	display: inline-grid;
+	place-items: center;
+	width: 19px;
+	height: 19px;
+	margin-left: 6px;
+	font-size: 10px;
+	vertical-align: 2px;
+	background: #e9ece2;
+	border-radius: 4px;
+}
+.attention-card {
+	padding: 23px 25px 20px;
+	margin-bottom: 15px;
+	background: var(--white);
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	box-shadow: 0 3px 9px #24362803;
+}
+.decision-card {
+	background: #fffefa;
+	border-left: 3px solid #bd945d;
+}
+.card-top,
+.card-bottom {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	justify-content: space-between;
+}
+.card-top {
+	margin-bottom: 15px;
+}
+.tag {
+	display: inline-block;
+	padding: 4px 7px;
+	font-size: 8px;
+	font-weight: 600;
+	letter-spacing: 0.6px;
+	white-space: nowrap;
+	border-radius: 4px;
+}
+.amber {
+	color: #906025;
+	background: #f5ead7;
+}
+.green {
+	color: #42633b;
+	background: #e9f0e5;
+}
+.neutral {
+	color: #697567;
+	background: #eef0eb;
+}
+.muted {
+	font-size: 10px;
+	color: var(--muted);
+}
+.attention-card > p {
+	margin-top: 9px;
+	font-size: 12px;
+	line-height: 1.8;
+	color: #788073;
+}
+.consequence {
+	margin-top: 15px;
+	font-size: 11px;
+	color: #876335;
+}
+.card-bottom {
+	padding-top: 20px;
+	margin-top: 18px;
+	border-top: 1px solid #e9eade;
+}
+.byline,
+.author-strip {
+	display: flex;
+	gap: 9px;
+	align-items: center;
+	font-size: 10px;
+}
+.byline small,
+.author-strip small {
+	display: block;
+	margin-top: 2px;
+	font-size: 9px;
+	color: var(--muted);
+}
+.agent-avatar {
+	display: grid;
+	flex-shrink: 0;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	font-size: 10px;
+	color: #59704d;
+	background: #dce5d2;
+	border: 1px solid #cfdac5;
+	border-radius: 7px;
+}
+.violet {
+	color: #766786;
+	background: #eae4ed;
+	border-color: #ded5e2;
+}
+.button {
+	display: inline-flex;
+	gap: 15px;
+	align-items: center;
+	justify-content: center;
+	padding: 10px 14px;
+	font-size: 10px;
+	font-weight: 550;
+	text-decoration: none;
+	border: 1px solid var(--line);
+	border-radius: 5px;
+}
+.button:hover {
+	text-decoration: none;
+	filter: brightness(0.96);
+}
+.primary {
+	color: #fff;
+	background: var(--green);
+	border-color: var(--green);
+}
+.secondary {
+	background: #fff;
+}
+.full {
+	width: 100%;
+}
+.evidence-line {
+	display: flex;
+	gap: 14px;
+	margin-top: 14px;
+	font-size: 10px;
+	color: #5c7750;
+}
+.amber-text {
+	color: var(--amber);
+}
+.lower {
+	margin-top: 29px;
+}
+.moving-row {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	padding: 16px 0;
+	border-top: 1px solid var(--line);
+}
+.moving-row strong {
+	font-size: 11px;
+	font-weight: 550;
+}
+.moving-row small {
+	display: block;
+	margin-top: 4px;
+	font-size: 10px;
+	color: var(--muted);
+}
+.moving-row .tag {
+	margin-left: auto;
+}
+.status-ring {
+	width: 11px;
+	height: 11px;
+	border: 2px solid #91a088;
+	border-top-color: #c5cec0;
+	border-radius: 50%;
+}
+.context-column {
+	min-width: 0;
+}
+.project-summary {
+	padding: 26px;
+	margin-bottom: 29px;
+	background: #eaf0e3;
+	border: 1px solid #dde5d5;
+	border-radius: 8px;
+}
+.project-summary h2 {
+	font:
+		25px / 1.35 Georgia,
+		serif;
+	letter-spacing: -0.6px;
+}
+.project-summary > p:not(.eyebrow) {
+	margin-top: 14px;
+	font-size: 11px;
+	line-height: 1.8;
+	color: #7b8574;
+}
+.segmented-progress {
+	display: flex;
+	gap: 4px;
+	margin-top: 27px;
+}
+.segmented-progress i {
+	flex: 1;
+	height: 5px;
+	background: #ced8c5;
+	border-radius: 2px;
+}
+.segmented-progress i:nth-child(-n + 5) {
+	background: #7f9870;
+}
+.progress-caption {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 9px;
+	font-size: 9px;
+}
+.progress-caption strong {
+	font-weight: 500;
+}
+.progress-caption span {
+	color: var(--muted);
+}
+.project-summary > a {
+	display: block;
+	padding-top: 16px;
+	margin-top: 23px;
+	font-size: 10px;
+	border-top: 1px solid #d5dfcc;
+}
+.timeline {
+	padding: 0 0 0 16px;
+	margin: 24px 0 0 4px;
+	list-style: none;
+	border-left: 1px solid #d5ddcf;
+}
+.timeline li {
+	position: relative;
+	padding: 0 0 25px 8px;
+}
+.timeline li::before {
+	position: absolute;
+	top: 4px;
+	left: -21px;
+	width: 7px;
+	height: 7px;
+	content: "";
+	background: #829574;
+	border: 2px solid var(--paper);
+	border-radius: 50%;
+}
+.timeline span {
+	display: block;
+	margin-bottom: 5px;
+	font-size: 9px;
+	color: var(--muted);
+}
+.timeline strong {
+	font-size: 11px;
+	font-weight: 600;
+}
+.timeline p {
+	margin: 6px 0;
+	font-size: 11px;
+	color: #7c8576;
+}
+.timeline a {
+	font-size: 10px;
+}
+.quiet-note {
+	display: flex;
+	gap: 8px;
+	padding-top: 18px;
+	font-size: 10px;
+	color: #858d80;
+	border-top: 1px solid var(--line);
+}
+.app-footer {
+	display: flex;
+	justify-content: space-between;
+	padding: 15px 40px;
+	font-size: 9px;
+	color: #8d9588;
+	border-top: 1px solid var(--line);
+}
+.app-footer .local-dot {
+	margin-right: 6px;
+}
+.work-toolbar {
+	display: flex;
+	gap: 18px;
+	align-items: center;
+	padding-bottom: 20px;
+	margin-bottom: 25px;
+	border-bottom: 1px solid var(--line);
+}
+.work-toolbar > .muted {
+	margin-left: auto;
+}
+.segmented {
+	display: inline-flex;
+	padding: 3px;
+	background: #e9ede5;
+	border: 1px solid var(--line);
+	border-radius: 6px;
+}
+.segmented button {
+	padding: 6px 12px;
+	font-size: 10px;
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	border-radius: 4px;
+}
+.segmented .selected {
+	color: var(--ink);
+	background: white;
+	box-shadow: 0 1px 3px #263c3415;
+}
+.filters {
+	display: flex;
+	gap: 7px;
+}
+.filters button {
+	padding: 5px 10px;
+	font-size: 10px;
+	color: var(--muted);
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: 20px;
+}
+.filters button.selected {
+	color: #416139;
+	background: #e8eedf;
+	border-color: #dce4d2;
+}
+.filters span {
+	margin-left: 4px;
+}
+.work-layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 270px;
+	gap: 25px;
+	min-height: 540px;
+}
+.kanban {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 13px;
+}
+.lane {
+	min-height: 460px;
+	padding: 12px 9px;
+	background: #edf0e9;
+	border-radius: 7px;
+}
+.lane-heading {
+	display: flex;
+	justify-content: space-between;
+	padding: 2px 4px 16px;
+	font-size: 10px;
+	font-weight: 600;
+}
+.lane-heading span {
+	font-weight: 400;
+	color: #8a9583;
+}
+.work-card {
+	display: block;
+	width: 100%;
+	padding: 16px 12px;
+	margin-bottom: 10px;
+	text-align: left;
+	background: #fff;
+	border: 1px solid #dfe5d9;
+	border-radius: 6px;
+}
+.work-card.selected {
+	border-color: #78976a;
+	box-shadow: 0 0 0 1px #78976a;
+}
+.work-card strong {
+	display: block;
+	margin: 10px 0;
+	font-size: 12px;
+	font-weight: 550;
+	line-height: 1.6;
+}
+.work-card p {
+	font-size: 10px;
+	line-height: 1.7;
+	color: #798371;
+}
+.work-card .card-bottom {
+	padding-top: 13px;
+	margin-top: 15px;
+	font-size: 9px;
+}
+.item-detail {
+	padding: 24px 20px;
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 7px;
+}
+.item-detail h2 {
+	margin: 16px 0;
+	font-size: 21px;
+	line-height: 1.4;
+}
+.item-detail p {
+	font-size: 11px;
+	line-height: 1.8;
+	color: var(--muted);
+}
+.detail-props {
+	margin: 23px 0;
+	font-size: 10px;
+}
+.detail-props div {
+	display: flex;
+	justify-content: space-between;
+	padding: 9px 0;
+	border-bottom: 1px solid #edf0e9;
+}
+.detail-props dt {
+	color: var(--muted);
+}
+.detail-props dd {
+	margin: 0;
+}
+.detail-section {
+	padding-top: 20px;
+	margin-top: 24px;
+	border-top: 1px solid var(--line);
+}
+.detail-section h3 {
+	margin-bottom: 10px;
+	font-size: 11px;
+}
+.detail-section a {
+	display: block;
+	margin: 8px 0;
+	font-size: 10px;
+	color: #527347;
+}
+.source-note {
+	margin-top: 25px;
+	font-size: 10px;
+	color: var(--muted);
+}
+.work-table {
+	width: 100%;
+	font-size: 11px;
+	border-collapse: collapse;
+	background: #fff;
+}
+.work-table th,
+.work-table td {
+	padding: 14px 12px;
+	text-align: left;
+	border-bottom: 1px solid var(--line);
+}
+.work-table th {
+	font-size: 9px;
+	color: var(--muted);
+	letter-spacing: 1px;
+}
+.work-table button {
+	padding: 0;
+	font-size: 11px;
+	text-align: left;
+	background: transparent;
+	border: 0;
+}
+.empty-filter {
+	padding: 12px 4px;
+	font-size: 11px;
+	color: var(--muted);
+}
+.author-strip {
+	padding: 15px 0 23px;
+	border-bottom: 1px solid var(--line);
+}
+.author-strip .tag {
+	margin-left: auto;
+}
+.large-prose {
+	max-width: 640px;
+	padding: 28px 0;
+	font:
+		26px / 1.5 Georgia,
+		serif;
+}
+.options-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 15px;
+}
+.option {
+	padding: 23px;
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 7px;
+}
+.option.recommended {
+	background: #f6f9f0;
+	border-color: #9bac8b;
+}
+.option-number {
+	margin: 17px 0 4px;
+	font:
+		37px Georgia,
+		serif;
+	color: #8b9a7b;
+}
+.option h2 {
+	font-size: 24px;
+	font-weight: 500;
+}
+.option > p:not(.option-number),
+.option li,
+.tradeoff p {
+	font-size: 11px;
+	line-height: 1.8;
+	color: var(--muted);
+}
+.option > p {
+	margin-top: 10px;
+}
+.option ul {
+	padding-left: 16px;
+	margin: 18px 0;
+}
+.option li {
+	padding: 3px 0;
+}
+.tradeoff {
+	padding-top: 14px;
+	border-top: 1px solid var(--line);
+}
+.tradeoff strong {
+	font-size: 10px;
+	font-weight: 600;
+}
+.tradeoff p {
+	margin-top: 7px;
+}
+.context-box {
+	padding: 23px;
+	margin-bottom: 18px;
+	background: #f1f3ec;
+	border: 1px solid var(--line);
+	border-radius: 7px;
+}
+.context-box h3 {
+	margin-bottom: 10px;
+	font-size: 18px;
+}
+.context-box > p:not(.eyebrow) {
+	font-size: 11px;
+	line-height: 1.85;
+	color: var(--muted);
+}
+.context-rule {
+	margin: 22px 0;
+	border-top: 1px solid #dce2d3;
+}
+.plain-list {
+	padding: 0;
+	font-size: 10px;
+	line-height: 2;
+	list-style: none;
+}
+.plain-list li {
+	display: flex;
+	gap: 10px;
+	align-items: baseline;
+	margin: 12px 0;
+}
+.plain-list span {
+	font-size: 9px;
+	color: #91a080;
+}
+.related-link {
+	display: block;
+	padding: 13px 0;
+	font-size: 11px;
+	border-bottom: 1px solid var(--line);
+}
+.small-note {
+	margin-top: 16px;
+	font-size: 10px;
+	line-height: 1.75;
+	color: var(--muted);
+}
+.response-box {
+	padding: 22px;
+	margin-top: 24px;
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 7px;
+}
+label {
+	display: block;
+	margin: 14px 0 8px;
+	font-size: 10px;
+	color: var(--muted);
+}
+textarea {
+	width: 100%;
+	padding: 11px;
+	font-size: 11px;
+	line-height: 1.8;
+	color: var(--ink);
+	background: #fbfcf8;
+	border: 1px solid #dbe2d4;
+	border-radius: 5px;
+}
+.response-footer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: center;
+	margin-top: 15px;
+}
+.response-footer > span {
+	margin-right: auto;
+	font-size: 9px;
+	color: var(--muted);
+}
+#decision-result {
+	margin-top: 15px;
+	font-size: 11px;
+	color: #557749;
+}
+.evidence-layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 292px;
+	gap: 25px;
+}
+.artifact-panel {
+	align-self: start;
+	overflow: hidden;
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 8px;
+}
+.artifact-heading {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24px;
+}
+.artifact-heading h2 {
+	margin-top: 13px;
+	font-size: 20px;
+}
+.artifact-tabs {
+	display: flex;
+	gap: 23px;
+	padding: 0 24px;
+	border-bottom: 1px solid var(--line);
+}
+.artifact-tabs button {
+	padding: 12px 0;
+	font-size: 10px;
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	border-bottom: 2px solid transparent;
+}
+.artifact-tabs button.selected {
+	color: var(--green);
+	border-bottom-color: var(--green);
+}
+.artifact-body {
+	min-height: 385px;
+	padding: 28px;
+}
+.mini-app {
+	display: grid;
+	grid-template-columns: 92px 1fr;
+	min-height: 290px;
+	overflow: hidden;
+	border: 1px solid #dce3d4;
+	border-radius: 6px;
+	box-shadow: 0 10px 20px #263c3408;
+}
+.mini-sidebar {
+	padding: 15px 10px;
+	font-size: 8px;
+	color: #bdc8b4;
+	background: #294032;
+}
+.mini-sidebar b {
+	display: block;
+	margin-bottom: 18px;
+	font:
+		italic 22px Georgia,
+		serif;
+	color: #efe6cd;
+}
+.mini-sidebar span {
+	display: block;
+	padding: 7px;
+	margin-bottom: 5px;
+}
+.mini-active {
+	background: #455b41;
+	border-radius: 3px;
+}
+.mini-main {
+	padding: 23px 18px;
+	background: #f7f9f2;
+}
+.mini-main h2 {
+	font-size: 20px;
+	font-weight: 500;
+}
+.mini-main .eyebrow {
+	font-size: 7px;
+}
+.mini-search {
+	padding: 7px 10px;
+	margin: 17px 0;
+	font-size: 8px;
+	color: var(--muted);
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 4px;
+}
+.mini-columns {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+}
+.mini-columns span {
+	font-size: 7px;
+	color: #829075;
+	letter-spacing: 1px;
+}
+.mini-columns article {
+	padding: 12px 9px;
+	margin-top: 7px;
+	font-size: 9px;
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 4px;
+}
+.mini-columns small {
+	display: block;
+	margin-top: 9px;
+	font-size: 7px;
+	color: var(--muted);
+}
+.mini-columns .mini-selected {
+	border-color: #849b73;
+}
+.mini-selected hr {
+	margin: 12px 0;
+	border: 0;
+	border-top: 1px solid var(--line);
+}
+.artifact-caption {
+	margin-top: 18px;
+	font-size: 9px;
+	color: var(--muted);
+	text-align: center;
+}
+.artifact-footer {
+	display: flex;
+	gap: 10px;
+	justify-content: space-between;
+	padding: 17px 24px;
+	font-size: 9px;
+	color: var(--muted);
+	border-top: 1px solid var(--line);
+}
+.review-panel {
+	padding: 25px;
+	background: #edf2e7;
+	border: 1px solid #dfe7d5;
+	border-radius: 7px;
+}
+.review-panel h2 {
+	margin-bottom: 24px;
+	font:
+		28px / 1.3 Georgia,
+		serif;
+}
+.criterion {
+	display: flex;
+	gap: 10px;
+	padding: 15px 0;
+	font-size: 11px;
+	border-top: 1px solid #dce4d1;
+}
+.criterion > span {
+	color: #6a8956;
+}
+.criterion strong {
+	font-size: 10px;
+	font-weight: 550;
+}
+.criterion small {
+	display: block;
+	margin-top: 5px;
+	font-size: 9px;
+	color: var(--muted);
+}
+.pending > span {
+	color: var(--amber);
+}
+.review-callout {
+	padding-top: 18px;
+	margin-top: 9px;
+	font-size: 10px;
+	line-height: 1.9;
+	border-top: 1px solid #dce4d1;
+}
+.review-callout strong {
+	font-weight: 600;
+}
+.review-panel .button {
+	margin-top: 12px;
+}
+.check-row {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	padding: 20px 0;
+	font-size: 11px;
+	border-bottom: 1px solid var(--line);
+}
+.check-row kbd,
+.check-row .tag {
+	margin-left: auto;
+}
+.diff {
+	margin-top: 25px;
+	font:
+		11px / 2 ui-monospace,
+		monospace;
+	white-space: pre-wrap;
+}
+.added {
+	color: #4b7740;
+	background: #eef5e7;
+}
+.removed {
+	color: #a65e50;
+	background: #fbeee8;
+}
+.brief-grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 280px;
+	gap: 30px;
+}
+.brief-paper {
+	padding: 38px;
+	background: #fff;
+	border: 1px solid var(--line);
+	border-radius: 8px;
+}
+.editorial-title {
+	margin: 25px 0 20px;
+	font:
+		42px / 1.2 Georgia,
+		serif;
+	letter-spacing: -1.4px;
+}
+.lead {
+	max-width: 630px;
+	font-size: 14px;
+	line-height: 1.9;
+	color: #7a8271;
+}
+.brief-principles {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 20px;
+	padding: 25px 0;
+	margin: 30px 0;
+	border-block: 1px solid var(--line);
+}
+.brief-principles span {
+	display: block;
+	margin-bottom: 12px;
+	font-size: 10px;
+	color: #9aaa8a;
+}
+.brief-principles strong {
+	font-size: 11px;
+	font-weight: 550;
+}
+.brief-principles p {
+	margin-top: 8px;
+	font-size: 10px;
+	line-height: 1.8;
+	color: var(--muted);
+}
+.brief-paper > h3 {
+	font-size: 15px;
+}
+.journey {
+	display: flex;
+	gap: 14px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 25px 0;
+}
+.journey > div {
+	flex: 1;
+}
+.journey-dot {
+	display: grid;
+	place-items: center;
+	width: 30px;
+	height: 30px;
+	margin-bottom: 14px;
+	font-size: 12px;
+	color: #fff;
+	background: #58794a;
+	border-radius: 50%;
+}
+.journey-dot.pale {
+	color: #8b9d7b;
+	background: #eaf0e3;
+}
+.journey strong {
+	display: block;
+	font-size: 11px;
+	font-weight: 550;
+}
+.journey small {
+	font-size: 9px;
+	color: var(--muted);
+}
+.journey-arrow {
+	margin-top: -28px;
+	color: #a8b49e;
+}
+blockquote {
+	padding-left: 20px;
+	margin: 15px 0 30px;
+	font:
+		italic 21px / 1.6 Georgia,
+		serif;
+	color: #6e805d;
+	border-left: 2px solid #a5b591;
+}
+.context-map {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 20px;
+}
+.context-map span,
+.context-map a {
+	padding: 10px 14px;
+	font-size: 10px;
+	background: #f4f7ef;
+	border: 1px solid #dfe6d6;
+	border-radius: 5px;
+}
+.context-map i {
+	font-style: normal;
+	color: #9bad8b;
+}
+.big-metric {
+	margin: 15px 0 6px;
+	font:
+		55px Georgia,
+		serif;
+	letter-spacing: -2px;
+}
+.big-metric span {
+	margin-left: 8px;
+	font:
+		14px -apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		sans-serif;
+	color: var(--muted);
+	letter-spacing: 0;
+}
+.context-box > .tag {
+	margin-top: 20px;
+}
+dialog {
+	width: min(580px, calc(100% - 32px));
+	padding: 25px;
+	color: var(--ink);
+	border: 1px solid var(--line);
+	border-radius: 10px;
+	box-shadow: 0 20px 90px #142c3450;
+}
+dialog::backdrop {
+	background: #152c2566;
+	backdrop-filter: blur(4px);
+}
+.dialog-heading {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 18px;
+}
+.dialog-heading button {
+	font-size: 24px;
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+}
+#search-input {
+	width: 100%;
+	padding: 12px;
+	background: var(--paper);
+	border: 1px solid var(--line);
+	border-radius: 5px;
+}
+#search-results a {
+	display: block;
+	padding: 13px 5px;
+	font-size: 12px;
+	border-bottom: 1px solid var(--line);
+}
+#search-results small {
+	display: block;
+	margin-top: 3px;
+	font-size: 10px;
+	color: var(--muted);
+}
+.toast {
+	position: fixed;
+	bottom: 25px;
+	left: 50%;
+	z-index: 10;
+	max-width: calc(100vw - 40px);
+	padding: 14px 20px;
+	font-size: 12px;
+	color: #fff;
+	background: #294633;
+	border-radius: 7px;
+	box-shadow: 0 8px 25px #1b362230;
+	transform: translateX(-50%);
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	white-space: nowrap;
+	clip-path: inset(50%);
+}
+@media (min-width: 1500px) {
+	main {
+		padding: 45px 55px;
+	}
+	.overview-grid {
+		gap: 45px;
+	}
+	.attention-card {
+		padding: 28px;
+	}
+}
+@media (max-width: 1180px) {
+	.sidebar {
+		width: 200px;
+	}
+	.app {
+		margin-left: 200px;
+	}
+	main {
+		padding: 30px 25px;
+	}
+	.topbar {
+		padding: 0 25px;
+	}
+	.page-heading .wave {
+		display: none;
+	}
+	.overview-grid,
+	.decision-layout {
+		gap: 22px;
+	}
+	.work-layout {
+		grid-template-columns: 1fr;
+	}
+	.item-detail {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 5px 25px;
+	}
+	.work-toolbar > .muted {
+		display: none;
+	}
+	.evidence-layout,
+	.brief-grid {
+		grid-template-columns: minmax(0, 1fr) 250px;
+		gap: 20px;
+	}
+	.card-bottom {
+		flex-wrap: wrap;
+	}
+	.artifact-heading > .muted {
+		display: none;
+	}
+	.editorial-title {
+		font-size: 33px;
+	}
+	.brief-paper {
+		padding: 25px;
+	}
+}
+@media (max-width: 900px) {
+	.overview-grid,
+	.decision-layout,
+	.evidence-layout,
+	.brief-grid {
+		grid-template-columns: 1fr;
+	}
+	.context-column {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 18px;
+	}
+	.overview-grid .context-column {
+		display: block;
+	}
+	.review-panel {
+		max-width: none;
+	}
+	.prototype-label {
+		font-size: 7px;
+	}
+	.section-heading > span {
+		font-size: 9px;
+	}
+}
+@media (max-width: 650px) {
+	.sidebar {
+		position: static;
+		width: 100%;
+		padding: 14px 18px;
+	}
+	.brand {
+		padding: 0;
+		font-size: 18px;
+	}
+	.brand-mark {
+		font-size: 29px;
+	}
+	.workspace,
+	.sidebar .nav-label,
+	.pinned,
+	.sidebar-note,
+	.profile {
+		display: none;
+	}
+	.search-launch {
+		position: absolute;
+		top: 17px;
+		right: 18px;
+		width: 155px;
+	}
+	nav {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 2px;
+		margin-top: 16px;
+	}
+	nav a {
+		gap: 5px;
+		padding: 7px 8px;
+		font-size: 10px;
+	}
+	.nav-icon,
+	nav em,
+	.nav-count,
+	nav i {
+		display: none;
+	}
+	.app {
+		margin-left: 0;
+	}
+	.topbar {
+		height: 49px;
+		padding: 0 20px;
+	}
+	.prototype-label {
+		font-size: 6px;
+		letter-spacing: 0.7px;
+	}
+	.prototype-label span {
+		margin: 0 3px;
+	}
+	main {
+		padding: 26px 20px;
+	}
+	h1 {
+		font-size: 30px;
+		letter-spacing: -1px;
+	}
+	.page-heading {
+		margin-bottom: 26px;
+	}
+	.subtitle {
+		font-size: 12px;
+	}
+	.attention-card {
+		padding: 20px;
+	}
+	.section-heading > span {
+		display: none;
+	}
+	.card-bottom {
+		gap: 14px;
+	}
+	.moving-row {
+		flex-wrap: wrap;
+	}
+	.moving-row .tag {
+		display: none;
+	}
+	.app-footer {
+		padding: 15px 20px;
+	}
+	.app-footer > span:last-child {
+		display: none;
+	}
+	.context-column,
+	.options-grid {
+		display: block;
+	}
+	.option {
+		margin-bottom: 15px;
+	}
+	.work-toolbar {
+		flex-wrap: wrap;
+		gap: 10px;
+	}
+	.kanban {
+		grid-template-columns: 1fr;
+	}
+	.lane {
+		min-height: 0;
+		margin-bottom: 12px;
+	}
+	.item-detail {
+		display: block;
+	}
+	.large-prose {
+		font-size: 24px;
+	}
+	.author-strip {
+		flex-wrap: wrap;
+	}
+	.author-strip .tag {
+		margin-left: 37px;
+	}
+	.response-footer > span {
+		flex-basis: 100%;
+	}
+	.artifact-body {
+		min-height: 330px;
+		padding: 18px;
+	}
+	.artifact-tabs {
+		gap: 14px;
+		padding: 0 18px;
+	}
+	.mini-app {
+		grid-template-columns: 55px 1fr;
+	}
+	.mini-sidebar {
+		padding: 12px 4px;
+		font-size: 6px;
+	}
+	.mini-main {
+		padding: 17px 10px;
+	}
+	.mini-main h2 {
+		font-size: 15px;
+	}
+	.mini-columns {
+		gap: 5px;
+	}
+	.mini-columns article {
+		padding: 8px 6px;
+		font-size: 8px;
+	}
+	.mini-search {
+		font-size: 6px;
+	}
+	.artifact-footer {
+		flex-wrap: wrap;
+		padding: 15px 18px;
+	}
+	.editorial-title {
+		font-size: 31px;
+	}
+	.brief-paper {
+		padding: 22px;
+	}
+	.brief-principles {
+		gap: 12px;
+	}
+	.brief-principles strong {
+		font-size: 10px;
+	}
+	.journey {
+		gap: 8px;
+	}
+	.journey strong {
+		font-size: 10px;
+	}
+	.journey small {
+		font-size: 8px;
+	}
+	.context-map {
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+	.context-map span,
+	.context-map a {
+		padding: 8px;
+	}
+	.work-table th,
+	.work-table td {
+		padding: 11px 6px;
+	}
+	.work-table th:last-child,
+	.work-table td:last-child {
+		display: none;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		scroll-behavior: auto;
+		transition: none;
+		animation: none;
+	}
+}
+@media print {
+	.sidebar,
+	.topbar,
+	.app-footer,
+	.wave,
+	.search-launch,
+	.toast {
+		display: none;
+	}
+	.app {
+		margin: 0;
+	}
+	main {
+		padding: 0;
+	}
+	.screen {
+		break-after: page;
+	}
+	body {
+		background: white;
+	}
+}
+
+fieldset {
+	min-width: 0;
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+@supports (resize: vertical) {
+	textarea {
+		resize: vertical;
+	}
+}