/* The self-service station.
 *
 * Loaded by index.php only, and written to stand on its own: the login page is
 * the one page in Emilda that does not load the template stylesheet, so
 * nothing here can lean on style.css. It does sit next to the page's inline
 * CSS and buttons.css, and it inherits the same palette -- #E6E8EE behind,
 * white boxes, #575E89 text, 18px corners -- so that the station reads as the
 * same screen the login box is on rather than something bolted to it.
 *
 * Sizes are deliberately large. This is read standing up, at arm's length,
 * often by an eight-year-old, and usually on a touch screen; nothing here is a
 * pointer target smaller than a fingertip.
 *
 * :has() is not available at this project's browser floor (Firefox only from
 * 121), so state is switched by classes on the panel rather than by matching
 * on what is inside it. */

/* One centred column. The station and the login box are alternatives, never
 * both, and whichever is showing has the accordion directly underneath it at
 * the same width. */
.ss-layout
{
	display: flex;
	justify-content: center;
	width: 100%;
	text-align: left;
}

.ss-column
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* 420 is the width of the login box. The column has to match it, or the
 * box overflows the column, the flex centring is computed on the narrower
 * column and the box ends up off centre -- and the self-service accordion,
 * which is width: 100% of the column, comes out narrower than the box it
 * sits under. */
.ss-column-narrow { max-width: 420px; }
.ss-column-wide   { max-width: 680px; }

.ss-panel
{
	background: #FFFFFF;
	border-radius: 18px;
	padding: 28px 32px 32px 32px;
	box-sizing: border-box;
	width: 100%;
	color: #575E89;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Title on the left, logo on the right, and the gap between them belongs to
 * whichever is longer -- the Swedish heading is half again the width of the
 * English one, and a fixed gap would have pushed the logo off the panel. */
.ss-head
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.ss-head-text { min-width: 0; }

.ss-panel h2
{
	font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15pt;
	font-weight: 600;
	margin: 0 0 4px 0;
	color: #575E89;
}

.ss-sub
{
	font-size: 10pt;
	margin: 0;
	color: #8A90AD;
}

/* flex-shrink: 0 so the logo keeps its aspect ratio when the heading wraps;
 * a shrunk img would be squashed horizontally rather than scaled. */
.ss-logo
{
	flex: 0 0 auto;
	display: block;
	margin-top: 2px;
}

/* The three screens. Exactly one is shown, chosen by the ss-mode-* class on
 * the panel. */
.ss-screen { display: none; }

.ss-panel.ss-mode-idle   .ss-screen-idle,
.ss-panel.ss-mode-card   .ss-screen-scan,
.ss-panel.ss-mode-borrow .ss-screen-scan,
.ss-panel.ss-mode-return .ss-screen-scan { display: block; }

/* Choose what you came to do. Two targets, nothing else on the screen. */
.ss-choice
{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.ss-choice button
{
	flex: 1 1 200px;
	min-height: 150px;
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	color: #FFFFFF;
	font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 19pt;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: filter 0.12s ease-in-out;
}

.ss-choice button:hover  { filter: brightness(1.07); }
.ss-choice button:active { filter: brightness(0.94); }

.ss-borrow-btn { background: #4B77BE; }
.ss-return-btn { background: #47A08A; }

/* The scanning screen. */
.ss-who
{
	background: #EEF1F8;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 18px;
}

.ss-who-name
{
	font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 17pt;
	font-weight: 600;
	color: #3C4270;
}

.ss-who-meta
{
	font-size: 10pt;
	color: #8A90AD;
	margin-top: 3px;
}

.ss-prompt
{
	font-size: 12pt;
	margin-bottom: 8px;
}

.ss-scan-row
{
	display: flex;
	gap: 10px;
	align-items: center;
}

/* The scanner is a keyboard that types and presses Enter, so this is an
 * ordinary text field and the form's submit is what a scan triggers. It is
 * visible rather than hidden so that a barcode that will not read can be typed
 * in, which on a worn library card happens often enough to matter. */
input.ss-scan
{
	flex: 1 1 auto;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 17pt;
	padding: 12px 14px;
	border: 2px solid #C3C9DD;
	border-radius: 10px;
	color: #575E89;
	background: #FFFFFF;
	min-width: 0;
}

input.ss-scan:focus
{
	outline: none;
	border-color: #4B77BE;
}

/* Confirms whatever is in the field. Coloured like the primary action it is,
 * and sized to the field beside it. */
.ss-enter
{
	border: 0;
	border-radius: 10px;
	background: #4B77BE;
	color: #FFFFFF;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 13pt;
	font-weight: 600;
	padding: 14px 26px;
	cursor: pointer;
	white-space: nowrap;
}

.ss-enter:hover  { filter: brightness(1.07); }
.ss-enter:active { filter: brightness(0.94); }

/* Finishing. Deliberately unlike the button above it: full width, at the foot
 * of the panel, below the list it is going to clear, and in the page's muted
 * grey rather than an action colour. It used to sit beside the field, where it
 * was one slipped click away from throwing away a half-scanned pile of books.
 *
 * The separating rule is part of that -- it puts the list, not the input, next
 * to this button. */
.ss-done
{
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 15px 22px;
	border: 0;
	border-top: 1px solid #E6E8EE;
	border-radius: 0 0 10px 10px;
	background: #EEF1F8;
	color: #6F769B;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 11pt;
	cursor: pointer;
}

.ss-done:hover { background: #E1E5F0; color: #575E89; }

/* What just happened, newest first. */
.ss-log
{
	list-style: none;
	margin: 20px 0 0 0;
	padding: 0;
}

.ss-log li
{
	border-left: 5px solid #C3C9DD;
	background: #F7F8FC;
	border-radius: 0 10px 10px 0;
	padding: 12px 16px;
	margin-bottom: 9px;
}

.ss-log li.ss-ok   { border-left-color: #47A08A; }
.ss-log li.ss-fail { border-left-color: #C8553D; background: #FBF1EF; }

.ss-log-title
{
	font-size: 12pt;
	font-weight: 600;
	color: #3C4270;
}

.ss-log-detail
{
	font-size: 10pt;
	color: #8A90AD;
	margin-top: 3px;
}

/* A failed scan has to be noticed by someone who is already looking at the
 * book rather than the screen, so it also flashes. Kept short; this fires on
 * every mis-scan and a long animation would be in the way of the next one. */
@keyframes ss-shake
{
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-7px); }
	75%      { transform: translateX(7px); }
}

.ss-panel.ss-error .ss-scan-row { animation: ss-shake 0.22s ease-in-out 2; }

/* Arming and disarming, under whichever box is showing. Closed by default: it
 * is not secret, but it is not what the page is for either. */
.ss-activate
{
	margin: 18px 0 0 0;
	width: 100%;
	background: #FFFFFF;
	border-radius: 14px;
	box-sizing: border-box;
	text-align: left;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #575E89;
}

.ss-activate > summary
{
	cursor: pointer;
	padding: 13px 18px;
	font-size: 10pt;
	list-style: none;
	user-select: none;
}

.ss-activate > summary::-webkit-details-marker { display: none; }

.ss-activate > summary::before
{
	content: "\25B8";
	display: inline-block;
	margin-right: 9px;
	color: #A0A6C0;
	transition: transform 0.12s ease-in-out;
}

.ss-activate[open] > summary::before { transform: rotate(90deg); }

.ss-activate-body
{
	padding: 0 18px 18px 18px;
	font-size: 9.5pt;
	line-height: 1.55;
}

.ss-activate-body p { margin: 0 0 12px 0; color: #8A90AD; }

.ss-activate-body label
{
	display: block;
	margin-bottom: 9px;
}

.ss-activate-body label span
{
	display: block;
	font-size: 9pt;
	margin-bottom: 3px;
}

.ss-activate-body input[type=text],
.ss-activate-body input[type=password]
{
	width: 100%;
	box-sizing: border-box;
}

.ss-activate-error
{
	background: #FBF1EF;
	border-left: 4px solid #C8553D;
	border-radius: 0 8px 8px 0;
	padding: 9px 12px;
	color: #A8412C !important;
}

/* Below roughly a tablet the two columns stop being two columns. The station
 * comes first either way: on a phone-sized screen it is the only reason the
 * page is open. */
@media (max-width: 860px)
{
	.ss-panel { padding: 20px; }

	.ss-choice button { min-height: 120px; font-size: 16pt; }

	/* Below this the heading and the logo stop competing for one line. */
	.ss-head { flex-direction: column; gap: 12px; }

	.ss-logo { order: -1; }
}