/* Notice and policy generators. Prefix ng-.
   Sits on the site's dark template. Card, table and control styling follows
   pages/gdpr-readiness/readiness.css and pages/gdpr-fine-calculator/calculator.css
   so the tools look like one set. The document preview is a light "paper" so the
   output reads as the document it is. */

.ng { max-width: 1200px; margin: 0 auto; width: 100%; }
.ng-block { margin: 0 0 2.5em 0; }
.ng-block h2 { margin-bottom: 0.5em; }
.ng-note { font-size: 0.9em; opacity: 0.88; line-height: 1.6; }

/* Every anchor target clears the 73px sticky header (see the scroll margin note in
   claude/site-context.md: rem, not em). */
#ng-how, #ng-which, #ng-gens, #ng-limits, .ng-panel { scroll-margin-top: 6rem; }

.ng-howto {
	padding: 20px 24px;
	background: rgba(255, 255, 255, 0.06);
	border-left: 3px solid #199e70;
	border-radius: 6px;
}
.ng-steps { margin: 0 0 1em 0; padding-left: 1.25em; }
.ng-steps li { list-style: decimal; margin-bottom: 0.5em; line-height: 1.6; }

.ng-method {
	padding: 20px 24px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
}
.ng-method h3 { margin: 1.2em 0 0.4em 0; font-size: 1em; text-transform: uppercase; letter-spacing: 0.08em; }
.ng-sources li { margin-bottom: 0.4em; line-height: 1.5; }

/* ------------------------------------------------------------- tables --- */

.ng-tablewrap { overflow-x: auto; margin: 0 0 1.5em 0; }
.ng-table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin: 0; }
.ng-table th {
	text-align: left; padding: 10px 12px; color: #fff;
	background: rgba(66, 118, 166, 0.55); border: 1px solid rgba(255, 255, 255, 0.12);
}
.ng-table td { padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.1); vertical-align: top; line-height: 1.5; }
.ng-table tbody tr { border: 0; }
.ng-table tbody tr:nth-child(odd) { background: rgba(66, 118, 166, 0.16); }
.ng-table tbody tr:nth-child(even) { background: transparent; }
.ng-which-table td:first-child { min-width: 11em; }
.ng-id { white-space: nowrap; font-family: "Courier New", monospace; font-size: 0.95em; opacity: 0.85; }
.ng-src { display: block; font-size: 0.82em; opacity: 0.7; margin-top: 2px; }
.ng-row-missing td:first-child { box-shadow: inset 3px 0 0 #e05a4b; }
.ng-row-warn td:first-child { box-shadow: inset 3px 0 0 #f0b429; }

/* -------------------------------------------------------------- chips --- */

.ng-chip {
	display: inline-block; padding: 2px 9px; border-radius: 10px;
	font-size: 0.8em; font-weight: bold; white-space: nowrap; line-height: 1.5;
}
.ng-chip-ok { background: #1f7a50; color: #fff; }
.ng-chip-missing { background: #c0392b; color: #fff; }
.ng-chip-warn { background: #f0b429; color: #1d1d1d; }
.ng-chip-check { background: #3a6d9a; color: #fff; }
.ng-chip-na { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.9); }

/* --------------------------------------------------------------- tabs --- */

/* The site template gives every button height: calc(4.75em + 2px), line-height
   4.75em, uppercase, wide tracking and nowrap. Reset all of it and let flex centre. */
.ng-tab, .ng-outtab, .ng-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: auto; min-height: 0; line-height: 1.25; white-space: normal;
	text-transform: none; letter-spacing: normal; margin: 0; cursor: pointer;
}
.ng-tabs, .ng-outtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ng-tab, .ng-outtab {
	padding: 9px 18px; font-size: 14px; border-radius: 4px; background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.ng-tab:hover, .ng-outtab:hover { background: rgba(255, 255, 255, 0.12); }
.ng-tab.is-active, .ng-outtab.is-active { background: #4276a6; box-shadow: inset 0 0 0 1px #fff; font-weight: bold; }
.ng-outtab { padding: 7px 14px; font-size: 13px; }

.ng-btn {
	padding: 9px 16px; font-size: 13px; border-radius: 4px;
	background-color: #4276a6; box-shadow: none; border: 0;
}
.ng-btn:hover { background-color: #35618a; }
.ng-btn-primary { background-color: #199e70; }
.ng-btn-primary:hover { background-color: #15845e; }
.ng-btn-ghost { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.ng-btn-ghost:hover { background-color: rgba(255, 255, 255, 0.1); }
.ng-btn-small { padding: 6px 12px; font-size: 12px; }
.ng-btn:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------- panels --- */

.ng-panel[hidden] { display: none; }
.ng-panel { display: block; }

@media screen and (min-width: 1281px) {
	.ng-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
	.ng-panel[hidden] { display: none; }
	.ng-out { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; }
}

/* --------------------------------------------------------------- form --- */

.ng-sec {
	border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
	padding: 14px 18px 6px 18px; margin: 0 0 16px 0; background: rgba(255, 255, 255, 0.03);
}
.ng-sec legend {
	padding: 0 8px; font-weight: bold; font-size: 1em; letter-spacing: 0.02em;
	display: inline-flex; align-items: center; gap: 8px;
}
.ng-secnum {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.6em; height: 1.6em; border-radius: 50%; background: #4276a6; font-size: 0.85em;
}
.ng-lead { font-size: 0.88em; opacity: 0.82; line-height: 1.55; margin: 0 0 12px 0; }

.ng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 18px; }
.ng-field { margin: 0 0 14px 0; min-width: 0; }
.ng-wide { grid-column: 1 / -1; }
.ng-field label, .ng-label {
	display: block; font-size: 0.86em; font-weight: bold; text-transform: none;
	letter-spacing: normal; line-height: 1.4; margin: 0 0 6px 0; opacity: 0.95;
}
.ng-field input[type="text"], .ng-field input[type="date"], .ng-field select, .ng-field textarea { width: 100%; box-sizing: border-box; }
/* The template styles text inputs but not date inputs. */
.ng-field input[type="date"] {
	background: rgba(255, 255, 255, 0.05); border: 0; border-radius: 0; color: #fff;
	height: 2.75em; padding: 0 1em; color-scheme: dark; font-family: inherit; font-size: inherit;
}
.ng-field textarea { min-height: 0; line-height: 1.5; padding: 0.6em 1em; }
.ng-hint { font-size: 0.8em; opacity: 0.72; margin: 5px 0 0 0; line-height: 1.45; }
/* Two fields side by side share their rows (label, control, hint), so the controls line up
   when one label wraps to more lines than the other. Each label sits just above its control. */
@supports (grid-template-rows: subgrid) {
	.ng-grid > .ng-field:not(.ng-wide) { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
	.ng-grid > .ng-field:not(.ng-wide) > label { align-self: end; }
	.ng-grid > .ng-field:not(.ng-wide) > .ng-hint { align-self: start; }
}
.ng-note { margin: 0 0 12px 0; }

.ng-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ng-checks label {
	display: inline-flex; align-items: center; font-weight: normal; font-size: 0.9em;
	margin: 0; padding: 0; cursor: pointer; opacity: 0.95;
}
/* The template hides native checkboxes in favour of a styled label. Put them back. */
.ng-checks input[type="checkbox"] {
	appearance: checkbox; -webkit-appearance: checkbox; opacity: 1; float: none;
	z-index: auto; width: auto; margin: 0 8px 0 0; vertical-align: middle;
}
.ng-checks label::before, .ng-checks label::after { display: none !important; }

.ng-rep-item {
	border-left: 3px solid #4276a6; background: rgba(255, 255, 255, 0.035);
	padding: 10px 12px 2px 12px; margin: 8px 0 12px 0; border-radius: 0 4px 4px 0;
}
.ng-rep-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.85em; font-weight: bold; opacity: 0.9; }

/* ------------------------------------------------------------- output --- */

.ng-out {
	padding: 16px 18px; background: rgba(255, 255, 255, 0.05); border-radius: 6px;
}
.ng-outhead { margin: 0 0 8px 0; font-size: 1em; text-transform: uppercase; letter-spacing: 0.08em; }
.ng-score { font-size: 0.9em; line-height: 2; margin: 0 0 10px 0; }
.ng-score-note { display: block; font-size: 0.85em; opacity: 0.75; line-height: 1.45; }
.ng-banner {
	background: rgba(192, 57, 43, 0.25); border-left: 4px solid #e05a4b; border-radius: 4px;
	padding: 10px 14px; margin: 0 0 12px 0; font-size: 0.92em; line-height: 1.5;
}
.ng-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px 0; }
.ng-actions .ng-sep { flex-basis: 100%; height: 0; }
.ng-status { font-size: 0.85em; min-height: 1.4em; margin: 0 0 8px 0; opacity: 0.9; }
.ng-saved { font-size: 0.8em; opacity: 0.65; margin: 12px 0 0 0; }
.ng-extra { font-size: 0.95em; }
.ng-extra h3 { font-size: 0.95em; margin: 1.2em 0 0.4em 0; text-transform: uppercase; letter-spacing: 0.06em; }
.ng-extra ul { margin-bottom: 1em; }
.ng-extra li { margin-bottom: 0.4em; line-height: 1.5; }
.ng-extra p { margin: 0 0 1em 0; line-height: 1.55; }
.ng-extra .ng-doc-box { border-left: 4px solid #e05a4b; background: rgba(192, 57, 43, 0.2); padding: 8px 14px; border-radius: 4px; margin-bottom: 1em; }
.ng-extra .ng-doc-boxtitle { font-weight: bold; margin: 0.4em 0; }

/* ------------------------------------------------- document preview paper --- */

.ng-paper {
	background: #fdfdfb; color: #1d2433; border-radius: 6px; padding: 26px 30px;
	font-family: Georgia, "Times New Roman", serif; font-size: 0.95em; line-height: 1.55;
}
.ng-paper h1, .ng-paper h2, .ng-paper h3 {
	color: #1d2433; text-transform: none; letter-spacing: normal; font-weight: bold;
	font-family: Georgia, "Times New Roman", serif; line-height: 1.3;
}
.ng-paper h1 { font-size: 1.45em; margin: 0 0 0.3em 0; }
.ng-paper h1:not(:first-child) { margin-top: 1.6em; padding-top: 1em; border-top: 2px solid #c9ceda; }
.ng-paper h2 { font-size: 1.15em; margin: 1.4em 0 0.4em 0; padding-bottom: 0.2em; border-bottom: 1px solid #d4d8e2; }
.ng-paper h3 { font-size: 1em; margin: 1.1em 0 0.3em 0; }
.ng-paper p { margin: 0 0 0.85em 0; color: #1d2433; }
.ng-paper strong { color: #1d2433; }
.ng-paper ul { margin: 0 0 0.9em 0; padding-left: 1.3em; }
.ng-paper li { margin-bottom: 0.35em; color: #1d2433; }
.ng-paper .ng-doc-meta { color: #5a6275; font-style: italic; }
.ng-paper .ng-doc-tablewrap { overflow-x: auto; margin: 0.4em 0 1em 0; }
.ng-paper table { width: 100%; border-collapse: collapse; font-size: 0.92em; margin: 0; }
.ng-paper table th, .ng-paper table td {
	border: 1px solid #c9ceda; padding: 0.45em 0.6em; text-align: left; vertical-align: top; color: #1d2433;
}
.ng-paper table th { background: #eef1f7; font-weight: bold; }
.ng-paper table tbody tr, .ng-paper table tbody tr:nth-child(odd) { background: transparent; border: 0; }
.ng-paper .ng-doc-box { border: 2px solid #2f5d9e; border-radius: 6px; padding: 0.3em 1em 0.1em 1em; margin: 0.6em 0 1.2em 0; background: #f4f7fc; }
.ng-paper .ng-doc-boxtitle { font-weight: bold; margin: 0.6em 0 0.4em 0; }

/* ------------------------------------------------------------- mobile --- */

@media screen and (max-width: 736px) {
	.ng-howto, .ng-method { padding: 16px 16px; }
	.ng-sec { padding: 12px 12px 4px 12px; }
	.ng-out { padding: 12px; }
	.ng-paper { padding: 18px 16px; }
	.ng-tab { flex: 1 1 calc(50% - 6px); }
	.ng-actions .ng-btn { flex: 1 1 calc(50% - 8px); }
	.ng-table { min-width: 560px; }
}