/* P07 — participant self-service page (/ma-reservation/{token}).
   Reads the theme's brand tokens with fallbacks; never redefines them, so the
   theme stays the single source of the palette. */

.jsst-manage h1{font-size:clamp(24px,3.6vw,34px);font-weight:800;color:var(--navy);margin:0 0 6px}
.jsst-manage h2{font-size:18px;font-weight:700;color:var(--navy);margin:30px 0 10px}
.jsst-manage-id{color:var(--muted);margin:0 0 8px}
.jsst-manage-ref{font-variant-numeric:tabular-nums}
.jsst-manage-empty{color:var(--muted);margin:0}

/* #133 — the billet. A block on its own line: on a phone the button is the
   thing being reached for, and an inline link inside body copy is a small
   target for the one action that ends with a QR at the door. */
.jsst-manage-ticket{margin:12px 0 0}
.jsst-manage-ticket .btn{max-width:100%}

.jsst-manage-days{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.jsst-manage-days li{
	background:var(--pale);color:var(--navy);font-weight:600;font-size:14px;
	padding:7px 14px;border-radius:var(--pill,999px);
}

.jsst-manage-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jsst-manage-list li{
	background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,18px);
	padding:14px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.jsst-manage-when{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.jsst-manage-title{flex:1 1 260px}
.jsst-manage-room{color:var(--muted);font-size:14px}
.jsst-manage-rank{
	background:var(--warn-ink);color:#fff;font-size:12px;font-weight:700;
	padding:3px 10px;border-radius:var(--pill,999px);
}
.jsst-manage-waitlisted li{border-style:dashed}

@media(max-width:520px){
	.jsst-manage-list li{flex-direction:column;gap:2px}
	/* `flex:1 1 260px` above is a minimum WIDTH in the row layout and a minimum
	   HEIGHT here, because flex-basis follows the main axis. Every card carried
	   ~140px of empty space between the title and the room (#168). */
	.jsst-manage-title{flex:0 0 auto}
	/* `margin-left:auto` does nothing in a column, so the cancel button was
	   landing wherever the flow left it. Place it deliberately instead. */
	.jsst-manage-inline{margin:8px 0 0;align-self:flex-end}
	.jsst-manage-blocked{margin-left:0}
}

/* notices + actions */
.jsst-manage-notice{
	border-radius:var(--radius,18px);padding:12px 16px;margin:0 0 18px;font-weight:600;
	border:1px solid var(--line);background:var(--surface);
}
.jsst-manage-notice--ok{border-color:var(--good);color:var(--good-ink)}
.jsst-manage-notice--warn{border-color:var(--warn);color:var(--warn-ink)}

.jsst-manage-days-form{margin:0 0 6px}
.jsst-manage-day{
	display:inline-flex;align-items:center;gap:8px;background:var(--surface);
	border:1px solid var(--line);border-radius:var(--pill,999px);padding:8px 16px;
	font-weight:600;color:var(--navy);cursor:pointer;
}
.jsst-manage-days-form .btn{margin-top:12px}

.jsst-manage-inline{margin:0 0 0 auto}
.jsst-manage-inline .btn{padding:8px 16px;font-size:14px}
.jsst-manage-blocked{margin-left:auto;color:var(--muted);font-size:14px;font-style:italic}
.jsst-manage-day-h{font-size:15px;font-weight:700;color:var(--muted);margin:18px 0 8px}
.jsst-manage-atrisk li{border-color:var(--orange)}
.jsst-manage-confirm{margin:18px 0}
.jsst-manage-cancel-all{margin-top:10px}
.jsst-manage-danger{background:var(--crit);border-color:var(--crit);color:#fff}

/* tokenless "retrouver mon inscription" */
.jsst-manage-lookup{display:grid;gap:8px;max-width:420px;margin:18px 0}
.jsst-manage-lookup label{font-weight:600;color:var(--navy)}
.jsst-manage-lookup input{
	padding:12px 14px;border:1px solid var(--line);border-radius:12px;
	font:inherit;background:var(--surface);
}
.jsst-manage-lookup .btn{justify-self:start}