/* ==========================================================================
   ResearchOps UI • Screen stylesheet
   Version:    v1.0.0
   Service:    Home Office Biometrics — ResearchOps
   Author:     Kevin Rapley
   Date:       2025-09-29
   Build:      GOV.UK typography + colours; mobile-first
   Repo:       /css/screen.css
   License:    All rights reserved
   NAV KEY:    "="  (Find "=" to jump sections)
   ========================================================================== */

/* CSS DIRECTORY
	1. =LAYOUT & GRID
	2. =NAVIGATION
	3. =CARDS & PATTERNS
	4. =PROJECT LIST
	5. =GENERIC COMPONENTS
	6. =ERRORS & STATES
	7. =DASHBOARD (Hero, Actions, KV)
	8. =SECTIONS (Board, Lists, Tables, Dropzone)
	9. =FORMS & MODALS
   10. =PAGINATION
   11. =UTILITIES (Tags, Notes, Motion)
*/

/* COLORS (GOV.UK / HOD)
	- text              #0b0c0c
	- muted text        #505a5f
	- link              #1d70b8
	- focus ring        #ffbf47
	- border            #b1b4b6
	- light grey        #f3f2f1
	- panel bg          #ffffff
	- HO green          #00703c
*/

/* === =LAYOUT & GRID ===================================== */

body {
	margin: 24px;
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
	}
	
.grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	}

@media (min-width: 900px) {
	.grid {
		grid-template-columns: 1fr 1fr;
		}
	}

/* === =NAVIGATION ======================================== */

.breadcrumbs {
	margin: 8px 0 12px;
	font-size: 0.95rem;
	color: #505a5f;
	}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	}

.breadcrumbs li + li::before {
	content: "›";
	margin: 0 4px 0 2px;
	color: #505a5f;
	}
	
.nav a {
	margin-right: 12px;
	}

.nav[data-active="Home"] .govuk-link[data-nav="Home"],
.nav[data-active="Start Research Project"] .govuk-link[data-nav="Start Research Project"],
.nav[data-active="Projects"] .govuk-link[data-nav="Projects"] {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 3px solid #1d70b8;
	}

/* === =CARDS & PATTERNS ================================== */

.card {
	border: 1px solid #b1b4b6;
	border-radius: 6px;
	padding: 24px;
	margin-bottom: 16px;
	background: #fff;
	}

.project-org {
	margin: 0 0 4px;
	color: #00703c;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: .02em;
	text-transform: none;
	}

.project-title {
	margin: 0;
	}

.project-title .govuk-link {
	color: #0b0c0c;
	text-decoration: none;
	font-weight: 700;
	}

.project-title .govuk-link:hover,
.project-title .govuk-link:focus {
	color: #0b0c0c;
	text-decoration: underline;
	}

.project-title .govuk-link:visited {
	color: #0b0c0c;
	}

.project-meta {
	display: grid;
	gap: 2px 12px;
	grid-auto-rows: min-content;
	margin: 4px 0 8px;
	}

.project-meta > div {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: baseline;
	gap: 6px;
	}

.project-meta .label {
	font-weight: 700;
	}

.project-summary {
	margin-bottom: 8px;
	}

.user-groups {
	margin: 8px 0 8px;
	}

.user-groups .govuk-heading-s {
	margin: 12px 0 6px;
	}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	}

.tag {
	display: inline-block;
	border: 1px solid #b1b4b6;
	padding: 2px 8px;
	border-radius: 14px;
	font-size: 12px;
	}

.project-details summary {
	cursor: pointer;
	}

.card a:focus {
	outline: 3px solid transparent;
	color: #0b0c0c;
	background-color: #ffbf47;
	box-shadow: 0 -2px #ffbf47, 0 4px #0b0c0c;
	text-decoration: none;
	}

/* === =PROJECT LIST ====================================== */

.thumb {
	width: 100%;
	height: 180px;
	background: #f3f2f1;
	border-radius: 4px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

.thumb span {
	color: #505a5f;
	font-size: 14px;
	}

.tabs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	}

.tabs a {
	padding: 6px 10px;
	border-radius: 4px;
	border: 1px solid #b1b4b6;
	text-decoration: none;
	}

.tabs a.active {
	border-color: #1d70b8;
	}

.list .item {
	border-top: 1px solid #b1b4b6;
	padding: 8px 0;
	}

/* === =GENERIC COMPONENTS ================================ */

.lede {
	color: #505a5f;
	margin-top: 8px;
	}

.cta {
	display: inline-block;
	margin-top: 16px;
	}

.cta .govuk-button {
	margin: 0;
	text-decoration: none;
	}

.cta .govuk-button:hover {
	color: #fff;
	}

select,
input {
	width: 100%;
	}

textarea {
	width: 100%;
	height: 140px;
	}

.item {
	border-top: 1px solid #b1b4b6;
	padding: 8px 0;
	}

.panel {
	border: 1px solid #b1b4b6;
	padding: 12px;
	border-radius: 4px;
	}

.note {
	border: 1px dashed #b1b4b6;
	padding: 8px;
	border-radius: 4px;
	margin-bottom: 8px;
	cursor: grab;
	}

.cluster {
	min-height: 160px;
	border: 2px solid #b1b4b6;
	padding: 8px;
	border-radius: 6px;
	margin-bottom: 12px;
	}

.result {
	border-top: 1px solid #b1b4b6;
	padding: 8px 0;
	}

.type {
	font-size: 12px;
	text-transform: uppercase;
	color: #505a5f;
	}

/* Description assistance toolbar */
.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
	}

/* === =ERRORS & STATES =================================== */

.error-message {
	color: #d4351c;
	margin-top: 4px;
	font-size: 14px;
	}

.panel[role="alert"] {
	border: 2px solid #d4351c;
	background: #fef7f7;
	padding: 12px;
	border-radius: 4px;
	margin-bottom: 12px;
	}

/* === =DASHBOARD (Hero, Actions, KV) ===================== */

.dashboard-hero {
	padding: 24px 24px 8px;
	border-bottom: 1px solid #b1b4b6;
	background: #fff;
	}

.dashboard-title {
	margin: 0 0 4px;
	}

.dashboard-subtitle {
	margin: 0;
	color: #505a5f;
	}

.dashboard-breadcrumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0;
	font-size: 0.95rem;
	color: #505a5f;
	}

.dashboard-breadcrumbs a {
	text-decoration: none;
	}

.dashboard-breadcrumbs a:hover,
.dashboard-breadcrumbs a:focus {
	text-decoration: underline;
	}

.actions-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-end;
	padding: 12px 24px;
	border-bottom: 1px solid #b1b4b6;
	background: #fff;
	}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 6px;
	border: 2px solid transparent;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	background: #1d70b8;
	color: #fff;
	}

.btn:hover {
	background: #003078;
	color: #fff;
	}

.btn:focus {
	outline: 3px solid #ffbf47;
	outline-offset: 0;
	}

.btn--secondary {
	background: #fff;
	color: #0b0c0c;
	border-color: #b1b4b6;
	}

.btn--secondary:hover {
	border-color: #1d70b8;
	color: #0b0c0c;
	}

.btn--outline {
	background: #fff;
	color: #1d70b8;
	border-color: #1d70b8;
	}

.btn--outline:hover {
	background: #f3f2f1;
	}

.kv {
	padding: 16px 24px;
	background: #fff;
	}

.kv__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	}

.kv__term {
	font-weight: 700;
	color: #0b0c0c;
	}

.kv__desc {
	color: #0b0c0c;
	}

/* === =SECTIONS (Board, Lists, Tables, Dropzone) ========= */

.board {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 16px 24px;
	background: #fff;
	border-bottom: 1px solid #b1b4b6;
	}

.board__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border: 1px solid #b1b4b6;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	font-weight: 700;
	}

.board__item:hover {
	border-color: #1d70b8;
	}

.board__item:focus {
	outline: 3px solid #ffbf47;
	outline-offset: 0;
	}

.section {
	margin: 16px 0 24px;
	border: 1px solid #b1b4b6;
	border-radius: 12px;
	background: #fff;
	}

.section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 12px 0 12px;
	border-bottom: 1px solid #b1b4b6;
	}

.section__title {
	margin: 0;
	}

.section__body {
	padding: 8px 12px 12px 12px;
	}

.section__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	}

.list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
	}

.list-divided > li + li {
	border-top: 1px solid #b1b4b6;
	padding-top: 8px;
	margin-top: 8px;
	}

.table {
	width: 100%;
	border-collapse: collapse;
	}

.table th,
.table td {
	padding: 8px 10px;
	border-top: 1px solid #b1b4b6;
	text-align: left;
	}

.table th {
	font-weight: 700;
	}

.dropzone {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: 16px;
	border: 2px dashed #b1b4b6;
	border-radius: 6px;
	background: #f3f2f1;
	color: #505a5f;
	text-align: center;
	}

.dropzone input[type="file"] {
	display: none;
	}

/* === =FORMS & MODALS ==================================== */

.modal {
	border: none;
	padding: 24px;
	border-radius: 6px;
	width: 90%;
	max-width: 600px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	}

/* Native dialog backdrop */
.modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
	}

/* Larger modal variant */
.modal--large {
	max-width: 90vw;
	width: 800px;
	}

.modal h2,
.modal h3 {
	margin-top: 0;
	}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	}

/* Code display in modals */
.modal .code--readonly {
	background: #f3f2f1;
	padding: 12px;
	border-radius: 4px;
	overflow-x: auto;
	max-height: 300px;
	font-size: 12px;
	white-space: pre;
	}

@media (max-width: 768px) {
	.modal {
		width: 95%;
		max-width: none;
		max-height: 90vh;
		overflow-y: auto;
		}
	
	.modal--large {
		width: 95%;
		}
	}

/* Rule/AI suggestion panel */
.sugg-region {
	padding: 12px;
	border: 1px solid var(--border, #b1b4b6);
	border-radius: 6px;
	background: var(--panel, #ffffff);
	}

.sugg-summary {
	font-weight: 700;
	margin-bottom: 8px;
	}

.sugg-list {
	margin: 0;
	padding-left: 18px;
	}

.sugg-item { margin: 8px 0; }

.sugg-cat { font-weight: 700; }

.sugg-why {
	font-size: 0.9rem;
	color: #505a5f;
	margin-top: 2px;
	}

/* Keyboard users get a visible focus when interacting inside the panel */
.sugg-region:focus-within {
	box-shadow: 0 0 0 3px #ffbf47;
	outline: none;
	}

/* Optional status text under buttons */
#ai-rewrite-status { margin-left: 8px; }

/* Decouple input from next label */
.govuk-input {
	margin-bottom: 20px;
	}

/* Couple label with its hint text */
.govuk-body + .hint {
	margin-top: -4px;
	margin-bottom: 4px;
	color: #505a5f;
	font-size: 0.95rem;
	}

/* Couple hint with textarea/input below */
.hint + textarea,
.hint + input {
	margin-top: 4px;
	}

/* Decouple select inputs from following label */
select.govuk-input {
	margin-bottom: 20px;
	}

/* === =PAGINATION ======================================== */

.paginate {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 4px 0;
	}

.paginate button,
.paginate a {
	min-width: 36px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #b1b4b6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	}

.paginate a[aria-current="page"] {
	font-weight: 700;
	outline: 2px solid #0b0c0c;
	outline-offset: 2px;
	}

.paginate button[disabled] {
	opacity: .45;
	cursor: default;
	}

/* === =UTILITIES (Tags, Notes, Motion) =================== */

.fade-tail {
	display: inline-block;
	-webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 10ch), rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to right, black 0, black calc(100% - 10ch), rgba(0,0,0,0) 100%);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	}

/* Completely remove from visual flow AND accessibility tree */
.hidden {
	display: none !important;
	}

/* Keep in the accessibility tree but visually hide and remove from layout */
.visuallyhidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap; /* prevent line breaks */
	}

/* Variant: becomes visible when focused (e.g., skip links) */
.visuallyhidden--focusable:active,
.visuallyhidden--focusable:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: inherit;
	}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
		}
	}

/* Spacing + tone utilities used in Start → Step 1 */
.mt-2 { margin-top: 8px !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: #505a5f; }

/* Live regions (no visual change; kept for clarity) */
[aria-live="polite"] { }

/* Responsive upgrades */
@media (min-width: 740px) {
	.board {
		grid-template-columns: repeat(4, 1fr);
		}
	.kv__list {
		grid-template-columns: 220px 1fr;
		}
	}

@media (min-width: 900px) {
	.section__grid {
		grid-template-columns: 1fr 1fr;
		}
	}

/* === Suggestions / Bias split view (Step 1 & 2) ============================ */
/* Structure produced by start-description-assist.js & start-objective-assist.js
   .sugg-grid
     .sugg-col
       .sugg-heading
       .sugg-list > .sugg-item
         .sugg-row > .sugg-cat + .sugg-sev
         .sugg-tip
         .sugg-why
*/

.sugg-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 12px;
	}

@media (min-width: 780px) {
	.sugg-grid { grid-template-columns: 1fr 1fr; }
	}

.sugg-col {
	border: 1px solid var(--border, #b1b4b6);
	border-radius: 6px;
	background: var(--panel, #ffffff);
	padding: 12px;
	min-height: 40px;
	}

.sugg-heading {
	margin: 0 0 6px 0;
	font-weight: 700;
	}

.sugg-list {
	list-style: disc;
	padding-left: 18px;
	margin: 0;
	}

.sugg-item { margin: 8px 0; }

.sugg-row {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	}

.sugg-cat { font-weight: 700; }

/* Severity badge */
.sugg-sev {
	font-size: 0.85rem;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 999px;
	border: 1px solid currentColor;
	}

.sugg-sev.high   { color: #7a1212; }
.sugg-sev.medium { color: #6b4e00; }
.sugg-sev.low    { color: #2a5b2b; }

/* Tip + Why text */
.sugg-tip { margin-top: 4px; }
.sugg-why { margin-top: 2px; color: #505a5f; }

/* AI summary + rewrite block */
.sugg-summary { margin: 12px 0 8px 0; }

.rewrite-block {
	padding: 12px;
	border: 1px solid var(--border, #b1b4b6);
	border-radius: 6px;
	background: #f8f8f8;
	white-space: pre-wrap;
	margin: 8px 0 12px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	}

/* Make the whole panel keyboard friendly */
.sugg-col:focus-within,
.sugg-grid:focus-within {
	outline: none;
	box-shadow: 0 0 0 3px #ffbf47;
	}

/* Align status labels beside buttons */
#ai-rewrite-status,
#ai-obj-status { margin-left: 8px; }

/* -------- Projects skeletons -------- */
.projects-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	}

@media (min-width: 700px) {
	.projects-grid {
		grid-template-columns: 1fr 1fr;
		}
	}

@media (min-width: 1100px) {
	.projects-grid {
		grid-template-columns: 1fr 1fr 1fr;
		}
	}

/* Card */
.project-card {
	border: 1px solid var(--govuk-border-colour, #b1b4b6);
	border-radius: 4px;
	padding: 16px;
	background: #fff;
	}

/* Skeleton base */
.skel {
	position: relative;
	overflow: hidden;
	background: #f3f2f1;
	border-radius: 3px;
	}

.skel::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
	animation: skel-shimmer 1200ms infinite;
	}

@keyframes skel-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
	}

/* Skeleton layout blocks */
.skel-title {
	height: 18px;
	margin-bottom: 12px;
	}

.skel-meta {
	height: 12px;
	width: 60%;
	margin-bottom: 16px;
	}

.skel-line {
	height: 10px;
	margin-bottom: 8px;
	}

.skel-line.w-80 { width: 80%; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-40 { width: 40%; }

/* Real content typography inside .project-card */
.project-title {
	margin: 0 0 4px 0;
	font-weight: 700;
	}

.project-meta {
	color: #505a5f;
	margin: 0 0 8px 0;
	}

.project-summary {
	margin: 0;
	}
	
/* Debug Shim */
#rops-debug-toggle { 
	transition: transform .06s ease-in-out; 
	}

#rops-debug-toggle:active { 
	transform: scale(.98); 
	}
	
#rops-debug {
	backdrop-filter:
	saturate(120%);
	}
	
#rops-debug button { 
	background:#fff; 
	border:1px solid #b1b4b6; 
	border-radius:6px; 
	padding:4px 8px;
	}
	
#rops-debug button:hover {
	border-color:#1d70b8;
	}

/* transparency begins in the cascade */