/* ============================================================================
   PRECISION - "INSTRUMENT"  ·  v2 design layer  ·  product readouts
   ----------------------------------------------------------------------------
   Every product screenshot on this site is real HTML and CSS. Nothing here is
   an image. That is deliberate:

     - it stays crisp at any DPI and in print;
     - it is themed from the same tokens as the rest of the page, so a brand
       change never leaves a stale PNG behind;
     - it is text, so it is searchable, translatable and readable by a screen
       reader;
     - and there is no asset to re-cut every time the product moves.

   THE READOUT IDEA. These panels are the illuminated face of the instrument: a
   thin teal line runs along the top edge of each one like a powered bezel, and
   everything numeric is IBM Plex Mono with tabular figures so columns align on
   the decimal without a table layout doing it for them.

   A readout is ALWAYS a light surface, including inside a navy .i-invert band -
   which is why it works from the --i-paper-* tokens rather than the chassis
   tokens, and why the guard below pins the readable status inks back to their
   on-white values. Without that guard a readout dropped into the CTA band would
   inherit full-strength Signal Teal for text sitting on white (2.1:1).
   The one exception is .p-code, a terminal, which stays dark deliberately and
   therefore restates its own colours.

   STATUS IS NEVER COLOUR ALONE. Every PASS / REVIEW / BLOCK indicator carries
   both an icon and a text label, so it survives greyscale, colour blindness
   and a screen reader.
   ========================================================================== */


/* ==========================================================================
   1  READOUT CHASSIS
   ========================================================================== */

/* The light-surface guard - see the note at the top of this file. */
.p-readout,
.p-phone
{
	--i-pass-ink:   #00786B;
	--i-review-ink: #96590A;
	--i-block-ink:  #B3261E;
	color-scheme: light;
}

.p-readout
{
	position: relative;
	background: var(--i-paper);
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius-lg);
	overflow: hidden;
	color: var(--i-paper-ink-2);
	font-size: 0.85rem;
	line-height: 1.5;
	/* Soft enough to sit on a white page without reading as a floating slab,
	   deep enough to still lift off a navy band. */
	box-shadow: 0 22px 48px -28px rgba(9, 28, 54, 0.45);
}
/* the powered bezel */
.p-readout::before
{
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(to right, var(--i-teal), rgba(0, 199, 177, 0.15) 55%, transparent);
	z-index: 3;
}

/* Slight optical lift for the hero panel only. */
.p-readout--hero { transform: perspective(1600px) rotateY(-2.2deg) rotateX(0.6deg); }

.p-readout__bar
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.95rem;
	background: var(--i-paper-2);
	border-bottom: 1px solid var(--i-paper-line);
}
.p-readout__dots { display: flex; gap: 5px; flex: none; }
.p-readout__dots i
{
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--i-paper-line);
	display: block;
}
.p-readout__dots i:first-child { background: #E6EBF1; }
.p-readout__title
{
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--i-paper-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.p-readout__crumb
{
	font-size: 0.74rem;
	color: var(--i-paper-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.p-readout__pick
{
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.55rem;
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius);
	font-size: 0.7rem;
	color: var(--i-paper-ink-2);
	background: var(--i-paper);
	white-space: nowrap;
	flex: none;
}

.p-readout__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.p-readout__body--tight { padding: 0.75rem; gap: 0.65rem; }

/* --- with a dark product sidebar ---------------------------------------- */

.p-readout--sided .p-readout__body { flex-direction: row; padding: 0; gap: 0; }
.p-side
{
	flex: none;
	width: 9.5rem;
	background: var(--i-navy);
	padding: 0.85rem 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	border-right: 1px solid var(--i-paper-line);
}
.p-side__item
{
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.48rem 0.6rem;
	border-radius: var(--i-radius);
	font-size: 0.74rem;
	color: rgba(185, 198, 214, 0.85);
	white-space: nowrap;
}
.p-side__item svg { flex: none; opacity: 0.75; }
.p-side__item.is-on
{
	background: rgba(0, 199, 177, 0.14);
	color: var(--i-teal);
	box-shadow: inset 2px 0 0 var(--i-teal);
}
.p-side__item.is-on svg { opacity: 1; }
.p-side__foot
{
	margin-top: auto;
	padding: 0.6rem;
	font-family: var(--i-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8698AF;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.p-side__foot b { color: var(--i-teal); font-weight: 500; }
.p-main { flex: 1; min-width: 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }


/* ==========================================================================
   2  STATUS LANGUAGE  (PASS / REVIEW / BLOCK)
   ========================================================================== */

.p-chip
{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem 0.2rem 0.35rem;
	border-radius: 100px;
	border: 1px solid transparent;
	font-family: var(--i-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}
.p-chip--pass   { color: var(--i-pass-ink);   background: rgba(0, 199, 177, 0.12);  border-color: rgba(0, 199, 177, 0.4); }
.p-chip--review { color: var(--i-review-ink); background: rgba(244, 163, 64, 0.14); border-color: rgba(244, 163, 64, 0.45); }
.p-chip--block  { color: var(--i-block-ink);  background: rgba(217, 48, 69, 0.1);   border-color: rgba(217, 48, 69, 0.35); }
.p-chip--info   { color: var(--i-paper-ink-2); background: var(--i-paper); border-color: var(--i-paper-line); }

/* Dot form, for legends where a chip would be too heavy. */
.p-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.p-dot--pass   { background: var(--i-teal); }
.p-dot--review { background: var(--i-amber); }
.p-dot--block  { background: var(--i-red); }
.p-dot--idle   { background: var(--i-paper-line); }


/* ==========================================================================
   3  METRICS
   ========================================================================== */

.p-metrics
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 1px;
	background: var(--i-paper-line);
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius);
	overflow: hidden;
}
.p-metric { background: var(--i-paper-2); padding: 0.7rem 0.8rem; min-width: 0; }
.p-metric__label
{
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--i-paper-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.p-metric__value
{
	margin-top: 0.25rem;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--i-paper-ink);
	line-height: 1.1;
}
.p-metric__delta { font-size: 0.66rem; font-weight: 500; letter-spacing: 0; color: var(--i-pass-ink); }
.p-metric__delta--down { color: var(--i-review-ink); }
.p-metric__delta--flat { color: var(--i-paper-ink-3); }


/* ==========================================================================
   4  STATUS RAIL  -  Calculated -> Validated -> Ready to pay
   --------------------------------------------------------------------------
   The signature product graphic, straight from impl.md section 5 screen 1 and the
   hero of the Website Design Sheet. Nodes light in sequence on first view.
   ========================================================================== */

.p-rail
{
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 1.1rem 0.5rem 0.9rem;
	background: var(--i-paper-2);
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius);
}
.p-rail__track
{
	position: absolute;
	top: 1.1rem;
	left: 16.7%;
	right: 16.7%;
	height: 2px;
	transform: translateY(11px);
	background: var(--i-paper-line);
}
.p-rail__track::after
{
	content: '';
	position: absolute;
	inset: 0;
	background: var(--i-teal);
	transform: scaleX(var(--p-progress, 0));
	transform-origin: left;
	transition: transform 1.1s cubic-bezier(0.3, 0.8, 0.3, 1) 0.25s;
}
.p-rail__node { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.p-rail__mark
{
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--i-paper-line);
	background: var(--i-paper-2);
	color: transparent;
	transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}
.p-rail__node.is-on .p-rail__mark
{
	border-color: var(--i-teal);
	background: var(--i-teal);
	/* Navy, not white. White on Signal Teal is 1.9:1 and fails the 3:1 floor
	   for a non-text indicator; navy on teal is 8.0:1. Same rule as the teal
	   button label. */
	color: var(--i-navy);
}
.p-rail__node.is-current .p-rail__mark
{
	border-color: var(--i-teal);
	background: var(--i-paper-2);
	color: transparent;
	box-shadow: 0 0 0 4px rgba(0, 199, 177, 0.16);
}
.p-rail__label
{
	font-family: var(--i-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--i-paper-ink);
	line-height: 1.2;
}
.p-rail__time { font-family: var(--i-mono); font-size: 0.62rem; color: var(--i-paper-ink-3); }


/* ==========================================================================
   5  TABLES
   ========================================================================== */

.p-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.p-table
{
	width: 100%;
	min-width: 22rem;
	border-collapse: collapse;
	font-size: 0.76rem;
}
.p-table th
{
	text-align: left;
	padding: 0.5rem 0.7rem;
	font-family: var(--i-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--i-paper-ink-3);
	border-bottom: 1px solid var(--i-paper-line);
	white-space: nowrap;
}
.p-table td
{
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var(--i-paper-line-2);
	color: var(--i-paper-ink-2);
	vertical-align: middle;
}
.p-table tr:last-child td { border-bottom: 0; }
.p-table td:first-child { color: var(--i-paper-ink); font-weight: 500; }
.p-table .p-num
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}
.p-table__link { color: var(--i-pass-ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.p-table__link:hover { text-decoration: underline; }


/* ==========================================================================
   6  METER  (donut)
   --------------------------------------------------------------------------
   conic-gradient rather than SVG: one element, no viewBox maths, and the sweep
   animates from a custom property.
   ========================================================================== */

.p-meter
{
	position: relative;
	width: var(--p-size, 104px);
	height: var(--p-size, 104px);
	flex: none;
	border-radius: 50%;
	background:
		conic-gradient(var(--p-colour, var(--i-teal)) calc(var(--p-value, 0) * 1%), var(--i-paper-line) 0);
	display: grid;
	place-items: center;
}
.p-meter::after
{
	content: '';
	position: absolute;
	inset: 11px;
	border-radius: 50%;
	background: var(--i-paper-2);
}
.p-meter__inner { position: relative; z-index: 1; text-align: center; line-height: 1.15; }
.p-meter__value
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--i-paper-ink);
}
.p-meter__label { font-size: 0.6rem; color: var(--i-paper-ink-3); letter-spacing: 0.02em; }
.p-meter--sm { --p-size: 78px; }
.p-meter--sm::after { inset: 9px; }
.p-meter--sm .p-meter__value { font-size: 0.9rem; }

.p-meterrow { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }


/* ==========================================================================
   7  LEGEND / KEY-VALUE LISTS
   ========================================================================== */

.p-legend { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; }
.p-legend__row
{
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.74rem;
	color: var(--i-paper-ink-2);
}
.p-legend__row span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-legend__val
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--i-paper-ink);
}


/* ==========================================================================
   8  SUB-PANELS  (cards inside a readout)
   ========================================================================== */

.p-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.65rem; }
.p-card
{
	background: var(--i-paper-2);
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius);
	padding: 0.8rem 0.85rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.p-card--centre { align-items: center; text-align: center; }
.p-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.p-card__title
{
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--i-paper-ink);
	letter-spacing: 0.01em;
}
.p-card__sub { font-size: 0.64rem; color: var(--i-paper-ink-3); }
.p-card__big
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--i-paper-ink);
}
.p-card__big--pass   { color: var(--i-pass-ink); }
.p-card__big--review { color: var(--i-review-ink); }
.p-card__big--block  { color: var(--i-block-ink); }


/* ==========================================================================
   9  CHARTS  (bars, sparkline, heatmap)
   ========================================================================== */

.p-bars
{
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 3.25rem;
}
.p-bars i
{
	flex: 1;
	display: block;
	min-width: 4px;
	background: rgba(0, 199, 177, 0.32);
	border-radius: 1px 1px 0 0;
	height: var(--h, 40%);
	transition: height 0.7s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.p-bars i:last-child { background: var(--i-teal); }
.p-bars__axis
{
	display: flex;
	gap: 4px;
	margin-top: 0.3rem;
	font-family: var(--i-mono);
	font-size: 0.56rem;
	color: var(--i-paper-ink-3);
}
.p-bars__axis span { flex: 1; text-align: center; }

.p-spark { display: block; width: 100%; height: 2.6rem; overflow: visible; }
.p-spark path { fill: none; stroke: var(--i-teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-spark .p-spark__fill { fill: rgba(0, 199, 177, 0.12); stroke: none; }

.p-heat { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 3px; align-items: center; }
.p-heat__axis
{
	font-family: var(--i-mono);
	font-size: 0.56rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--i-paper-ink-3);
	padding-right: 0.35rem;
	text-align: right;
}
.p-heat__cell
{
	height: 1.55rem;
	border-radius: 2px;
	display: grid;
	place-items: center;
	font-family: var(--i-mono);
	font-size: 0.58rem;
	font-weight: 600;
}
.p-heat__cell--low  { background: rgba(0, 199, 177, 0.18);  color: var(--i-pass-ink); }
.p-heat__cell--mid  { background: rgba(244, 163, 64, 0.22); color: var(--i-review-ink); }
.p-heat__cell--high { background: rgba(217, 48, 69, 0.16);  color: var(--i-block-ink); }


/* ==========================================================================
   10  FLOW STRIP  (in-product step bar)
   ========================================================================== */

.p-strip
{
	display: flex;
	align-items: stretch;
	background: var(--i-paper-2);
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius);
	overflow-x: auto;
}
.p-strip__step
{
	flex: 1 0 8.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.8rem;
	border-right: 1px solid var(--i-paper-line-2);
	min-width: 0;
}
.p-strip__step:last-child { border-right: 0; }
.p-strip__icon
{
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--i-paper-line);
	color: var(--i-paper-ink-3);
}
.p-strip__step.is-on .p-strip__icon { border-color: var(--i-teal); color: var(--i-pass-ink); background: rgba(0, 199, 177, 0.1); }
.p-strip__name { font-size: 0.68rem; font-weight: 600; color: var(--i-paper-ink); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.p-strip__sub  { font-size: 0.62rem; color: var(--i-paper-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ==========================================================================
   11  LIST ROWS  (documents, evidence, activity)
   ========================================================================== */

.p-rows { display: flex; flex-direction: column; }
.p-row
{
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--i-paper-line-2);
	font-size: 0.76rem;
	min-width: 0;
}
.p-row:last-child { border-bottom: 0; }
.p-row__icon { color: var(--i-paper-ink-3); flex: none; display: flex; }
.p-row__name { color: var(--i-paper-ink); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-row__meta { color: var(--i-paper-ink-3); font-family: var(--i-mono); font-size: 0.66rem; white-space: nowrap; flex: none; }


/* ==========================================================================
   12  CONTROL LADDER  (PASS / REVIEW / BLOCK vertical scale)
   --------------------------------------------------------------------------
   From the "Website Sheet 2" compliance dashboard: a dark rail beside the
   panel showing the three outcomes a control can produce.
   ========================================================================== */

.p-ladder
{
	/* A navy rail inside a light readout. --i-block is the on-white red at
	   7.0:1; on navy it drops to 2.6:1, so this scope takes the on-dark form -
	   the same trick .p-code uses. */
	--i-block: #FF7A85;
	color-scheme: dark;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 0.5rem;
	padding: 1.1rem 0.9rem;
	background: var(--i-navy);
	border-right: 1px solid var(--i-paper-line);
	position: relative;
	flex: none;
	width: 6.5rem;
}
.p-ladder::before
{
	content: '';
	position: absolute;
	left: 50%;
	top: 2.5rem;
	bottom: 2.5rem;
	border-left: 1px dashed rgba(159, 190, 220, 0.25);
}
.p-ladder__item
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-align: center;
}
.p-ladder__ring
{
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--i-navy);
	border: 1.5px solid currentColor;
	position: relative;
	z-index: 1;
}
.p-ladder__name
{
	font-family: var(--i-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.p-ladder__item--pass   { color: var(--i-teal); }
.p-ladder__item--review { color: var(--i-amber); }
.p-ladder__item--block  { color: var(--i-block); }


/* ==========================================================================
   13  PHONE  (worker self-service)
   ========================================================================== */

.p-phone
{
	width: 12.5rem;
	flex: none;
	border-radius: 20px;
	border: 6px solid var(--i-navy);
	background: var(--i-paper-2);
	overflow: hidden;
	box-shadow: 0 22px 44px -26px rgba(9, 28, 54, 0.45);
}
.p-phone__bar
{
	background: var(--i-navy);
	color: var(--i-cloud);
	padding: 0.5rem 0.75rem 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.p-phone__bar img { width: 78px; }
.p-phone__body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; }
.p-phone__hello { font-size: 0.78rem; font-weight: 600; color: var(--i-paper-ink); }
.p-phone__tile
{
	border: 1px solid var(--i-paper-line);
	border-radius: var(--i-radius);
	padding: 0.5rem 0.6rem;
}
.p-phone__tile-label { font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--i-paper-ink-3); }
.p-phone__tile-value
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--i-paper-ink);
	letter-spacing: -0.03em;
	margin-top: 0.1rem;
}


/* ==========================================================================
   15  RESPONSIVE
   --------------------------------------------------------------------------
   Every readout must be able to shrink. Panels drop their sidebar, tables
   scroll inside their own container rather than pushing the page sideways.
   ========================================================================== */

@media (max-width: 1080px)
{
	.p-readout--hero { transform: none; }
}

@media (max-width: 860px)
{
	.p-side { display: none; }
	.p-ladder { width: 100%; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--i-paper-line); padding: 0.85rem; }
	.p-ladder::before { display: none; }
	.p-readout--sided .p-readout__body { flex-direction: column; }
	.p-phone { margin-inline: auto; }
}

@media (max-width: 560px)
{
	.p-readout__crumb { display: none; }
	.p-rail { grid-auto-flow: row; gap: 0.85rem; }
	.p-rail__track { display: none; }
	.p-rail__node { flex-direction: row; gap: 0.75rem; text-align: left; }
	.p-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-meterrow { justify-content: center; }
}