/* =====================================================================================================
   entry.css - the way into the application
   =====================================================================================================
   Seven screens share this file: Sign in, the sign-in code page, Sign up, Reset password, Select organisation, Accept trading terms
   and the general error page. They are the only screens a prospective member ever sees, and they are
   one component rather than seven pages: a narrow centred panel on an otherwise empty page, with a
   masthead at the top of it and a single commit button at the bottom.

   ONE stylesheet, not seven, on purpose. Every one of these screens could have had its own prefix, and
   the day before this file existed the codebase had just finished undoing exactly that mistake in the
   other direction: .am-field and .mm-field were the same labelled field written twice under two page
   prefixes, and .mm-field-pair's own comment asked for the promotion that finally happened on
   2026-09-03 (see the ".idt-formfield" block in idt-ui.css). Six copies of a centred panel would have
   been that story again, on the same day, with five more copies.

   It is NOT in idt-ui.css either, and the boundary is worth stating: the kit owns the pieces INSIDE the
   panel - .idt-masthead, .idt-formgrid / .idt-formfield, .idt-input, .idt-btn, .idt-message,
   .idt-shuttle - and this file owns only the panel around them and the handful of small things the kit
   has no opinion about (a hint line under a password box, the row of two buttons, the sign-in page's
   footer links). Nothing here re-states a kit rule. If a rule in this file starts to look like it
   belongs to every page rather than to the front door, it belongs in the kit and this file should lose
   it.

   Load order per page: idt-ui.css, then this file, so page rules win on equal specificity - the same
   rule every other page in the application follows.

   These screens decorate no layout (see the note in signin.html about the icon sprite), so each of the
   seven carries its own <link> to this file. That is the cost of them being layout-less, and it is
   cheaper than a layout refactor on the pages a signed-out visitor sees.

   No class name in this file contains the substring "span": bootstrap-responsive.min.css is loaded
   app-wide and matches [class*="span"], which turns the element into a floated block. ==================================================================================================== */

/* The page these seven screens sit on. Vertical air above and below the panel so it reads as a single
   object on an empty page rather than as content that ran out; the app bar is 58px and fixed, and
   layout/main.html is not in play here, so the top padding is this file's job.

   text-align is NOT set here. The templates used to centre everything with Bootstrap's .text-center on
   a .row, which centred the field labels too - a label above a box is read down the left edge with the
   box, so a centred label floats free of the thing it names. The panel below is centred; its contents
   are not. */
.entry {
	max-width: 440px;
	margin: 0 auto;
	padding: 36px 0 48px;
}

/* Sign up is the one screen that cannot live at 440px: it carries eight fields, a search box and a
   jsTree of every organisation on the platform. 660px is the width at which .idt-formgrid can put two
   short fields on one line (two tracks plus the 24px column gap plus the panel's own 28px inset) and
   the tree still has room to show a nested organisation name without wrapping every row. */
.entry--wide {
	max-width: 660px;
}

/* The panel. Card weight, not a card: .idt-card is a titled container inside a page that has other
   things on it, and these pages have nothing else - so this box carries the masthead itself rather
   than sitting under one. Hence its own class rather than .idt-card, whose head band and title rules
   would have to be undone to get here.

   It replaces core.css's .sign-panel, which was a 1px #b3b1b1 rounded box drawn around the fields
   only, leaving the heading and the commit button outside it. That is the layout that made the seam
   visible: the modern app bar and the maroon footer rule framing a grey Bootstrap box with an
   unstyled <h2> floating above it. */
.entry-panel {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--idt-line);
	border-radius: var(--idt-radius);
	box-shadow: var(--idt-shadow-sm);
}

/* The masthead's rule already separates the heading from what follows, and inside a panel the kit's
   28px section gap under it is more air than a 440px box can spend. */
.entry-panel .idt-masthead {
	margin-bottom: var(--idt-gap);
}

/* A sentence of orientation that is part of the task rather than part of the title: the reset window
   expiring, or which organisation's terms are on screen. The masthead's strapline says what the page is
   for; this says what the member has to know before filling it in. */
.entry-lede {
	margin: 0 0 var(--idt-gap);
	font-size: 13px;
	line-height: 1.55;
	color: var(--idt-ink-soft);
}

.entry-lede strong {
	font-weight: 600;
	color: var(--idt-ink);
}

/* The constraint on a password box, under the box. --idt-ink-faint is the kit's supporting-metadata
   ink and is under AA for content, which is why this is a hint about a control the member is looking
   at and never the only statement of a rule: the same three conditions are enforced by the form's own
   validators and repeated in the error message when one fails. */
.entry-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--idt-ink-faint);
}

/* A single checkbox with its label beside it - trusting this browser, and accepting the terms. The kit has no
   checkbox row: every other page in the application collects a boolean in a grid or a dialog, not on
   a form of its own.

   align-items: flex-start, not center, because the terms label wraps to three lines on a narrow
   viewport and a vertically centred box then sits opposite the middle of the sentence instead of
   opposite its first line. margin-top on the input is the optical correction that centres the box on
   that first line at 13px/1.5. */
.entry-check {
	display: flex;
	align-items: flex-start;
	margin: 0 0 var(--idt-gap);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--idt-ink);
}

.entry-check input {
	flex: 0 0 auto;
	margin: 3px 10px 0 0;
}

/* The commit row. One button fills the width, because on these seven screens there is exactly one thing
   to do and the panel is narrow enough that a 100px button in the corner reads as an afterthought.
   Two buttons share the width instead - Next/Close, Accept/Cancel.

   NO FLEX `gap` HERE, and it is not a style preference: EdgeHTML never shipped gap for flex containers
   (see the .idt-cellactions note in idt-ui.css), so a gap would compute to 0 on a supported browser
   and weld the two buttons together. The adjacent-sibling margin has worked since IE8. */
.entry-actions {
	display: flex;
	margin-top: var(--idt-gap-lg);
}

.entry-actions .idt-btn {
	flex: 1 1 0%;
	justify-content: center;
}

.entry-actions .idt-btn + .idt-btn {
	margin-left: 10px;
}

/* Sign in's way out to the other two things a visitor can do here. Under the panel's own rule rather
   than inside the form: they are not part of signing in, and one of them (Sign up) leaves the page. */
.entry-foot {
	margin: var(--idt-gap) 0 0;
	padding-top: var(--idt-gap);
	border-top: 1px solid var(--idt-line);
	font-size: 13px;
	color: var(--idt-ink-soft);
}

.entry-foot a {
	color: var(--idt-accent);
	font-weight: 600;
	text-decoration: none;
}

.entry-foot a:hover,
.entry-foot a:focus {
	text-decoration: underline;
}

/* The separator between the two links. A literal " | " in the markup is punctuation a screen reader
   reads out; a rendered one is not in the accessibility tree at all. */
.entry-foot-sep {
	margin: 0 8px;
	color: var(--idt-line-strong);
}

/* Sign up is the one entry screen long enough to need section labels - About you, Choose a password,
   Organisations you represent - and .idt-subhead is the kit's. Its own padding is written for a card
   BODY, which supplies no inset of its own; the panel here already insets by 28px, so left-padding the
   subhead would indent it away from the fields it heads. Flushed, with the kit's own gap above it - the
   same correction the kit makes for the shuttle (`.idt-shuttle .idt-subhead`) and Account Management
   makes with .am-subhead. First one has no top gap: it sits directly under the masthead's rule. */
.entry-panel .idt-subhead {
	padding: 0 0 10px;
	margin-top: var(--idt-gap-lg);
}

.entry-panel .idt-subhead:first-of-type {
	margin-top: 0;
}

/* jQuery Validate's own error output. It writes <label class="error"> next to the field it failed, and
   Sign up writes into <p class="error"> blocks of its own for the two things it validates by hand (the
   organisation tree and the terms checkbox). core.css sets both to a bare `color: red` app-wide; that is
   the legacy red these six screens were the last visible consumers of, and it is out of this file's
   reach - core.css is shared with every page in the application - so the value is restated here on the
   kit's --idt-bad instead. Two classes on the message elements would have been cleaner than an element
   plus a class, but the elements are generated by the validator and the markup is not ours to name. */
.entry-panel label.error,
.entry-panel p.error {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--idt-bad);
}

/* Sign up's organisation tree is the kit's .idt-shuttle with ONE column - a search box over a
   .idt-shuttle-tree - because at sign-up there is nothing to shuttle it to: the member picks the
   organisations they represent and the form posts the checked ids. Account Management and the Members
   dialog are the two-column consumers. Nothing here re-declares the component; the two rules below are
   size and alignment for this one context, the same allowance the kit's own ".idt-formfield" comment
   spells out ("a page that needs its fields narrower than their track caps it under its own prefix")
   and the same shape as the kit's `.idt-modal .idt-shuttle-tree` override.

   300px rather than the kit's 260px: at sign-up the member is hunting for their own organisation in a list
   of every organisation in the country, which is the one place in this application where scrolling less
   matters more than the page being short. text-align because the panel is a list of names read down its
   left edge, and core.css's `.organisations { text-align: left }` used to be what supplied that - a rule
   this file no longer relies on, since the class it keys on is the jsTree's and not the panel's. */
.entry-panel .idt-shuttle-tree {
	height: 300px;
	text-align: left;
}

/* The general error page. It has no form and no panel of its own - just the alert fragment - so it
   borrows the width and the air and nothing else. */
.entry--message {
	padding-top: 48px;
}

/* The sign-in code page's two foot actions are POSTs - Send a new code spends one of five sends, and
   Sign in as someone else signs out - so they are buttons in forms rather than links. These make them
   read exactly as .entry-foot a does on Sign in: the forms sit inline on the one line, and the buttons
   shed the browser's own button chrome. */
.entry-foot-form {
	display: inline;
	margin: 0;
}

.entry-foot-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--idt-accent);
	font-weight: 600;
	cursor: pointer;
}

.entry-foot-button:hover,
.entry-foot-button:focus {
	text-decoration: underline;
}