/* Forms and the membership console.
   Loaded only by join.html and membership-admin.html, so the 28 KB of site.css every other page depends on
   does not grow for two pages. Colours come from site.css's custom properties throughout. */

.form-page { max-width: 44rem; }
.form-page .lede { font-size: 1.12rem; color: #4a5a58; }

/* What happens next, before the form. Numbered because it genuinely is a sequence, and the second step is the
   one applicants used to miss entirely. */
.steps-inline {
  margin: 2rem 0 2.6rem;
  padding: 1.4rem 1.5rem 1.4rem 3rem;
  background: var(--celadon-soft, #EAF4F3);
  border-radius: 14px;
  border-left: 4px solid var(--teal-deep, #1F7E76);
}
.steps-inline li { margin-bottom: .55rem; line-height: 1.5; }
.steps-inline li:last-child { margin-bottom: 0; }

.tp-form fieldset {
  border: none;
  border-top: 1px solid #E2E8E7;
  padding: 1.6rem 0 .4rem;
  margin: 0 0 1.2rem;
}
.tp-form fieldset:first-of-type { border-top: none; padding-top: 0; }
.tp-form legend {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--teal-deep, #1F7E76);
  padding: 0 .6rem 0 0;
}

.field { margin-bottom: 1.3rem; }
.field-row { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.field label,
.check label { font-weight: 600; display: block; margin-bottom: .4rem; line-height: 1.45; }
.req { color: var(--burgundy, #881D46); }
.optional { font-weight: 400; color: #6C7A78; font-size: .92em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: .72rem .85rem;
  border: 1.5px solid #CFDBD9;
  border-radius: 10px;
  background: #fff;
  color: inherit;
}
.field textarea { resize: vertical; min-height: 5rem; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.check input:focus-visible,
.tp-form button:focus-visible {
  outline: 3px solid rgba(50, 164, 154, .45);
  outline-offset: 1px;
  border-color: var(--teal-deep, #1F7E76);
}

.field input:invalid:not(:placeholder-shown) { border-color: #C9A0A0; }

.hint { font-size: .88rem; color: #64726F; margin: .45rem 0 0; line-height: 1.45; }

/* A field whose value is settled rather than typed: the confirmed school address on the grant form. It keeps
   the label's weight so the row still reads as part of the form, and the value is plainly not an input - an
   editable-looking box there would invite somebody to change an address the server is not going to read. */
.field-label { font-weight: 600; display: block; margin-bottom: .4rem; line-height: 1.45; }
.confirmed-as { margin: 0; padding: .6rem .85rem; border-radius: 10px; background: var(--celadon-soft, #EAF4F3); font-size: .95rem; }
.confirmed-as .hint { display: inline; margin: 0; }

.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; }
.check input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.check label { margin-bottom: 0; font-weight: 500; }

.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.form-status { font-size: .92rem; color: #64726F; }

.form-alert {
  padding: .85rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}
.form-alert--error { background: #FBEAEA; color: #8B2231; border-left: 4px solid #8B2231; }
.form-alert--info  { background: #EAF4F3; color: #17605A; border-left: 4px solid var(--teal-deep, #1F7E76); }

.form-done { padding: 1rem 0 2rem; }
.next-step {
  margin-top: 1.6rem;
  padding: 1.5rem;
  background: var(--celadon-soft, #EAF4F3);
  border-radius: 14px;
}
.next-step h3 { margin-top: 0; }

/* ---------- membership console ---------- */

/* The console is a DENSE VIEW, so it gets the screen. The 106rem cap was the site's reading measure applied to
   a 10-column register: on a wide monitor it left a third of the width empty while the email column truncated
   and the action buttons needed a sideways scroll to reach. A cap is still right - a table stretched across
   3,800px is not readable either - but it belongs somewhere near the widest useful table, not near a
   paragraph. */
.console { width: min(98vw, 150rem); margin-inline: auto; padding: 1.5rem 0 4rem; }

.console-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 2px solid #14403C;
  margin-bottom: 1.4rem;
}
.console-who { font-size: .88rem; color: #64726F; }
.console-who b { color: #14403C; }

.tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.tab {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem .95rem;
  border: 1.5px solid #CFDBD9;
  border-radius: 999px;
  background: #fff;
  color: #33534F;
  cursor: pointer;
}
.tab:hover { border-color: var(--teal-deep, #1F7E76); }
.tab[aria-selected="true"] { background: var(--teal-deep, #1F7E76); border-color: var(--teal-deep, #1F7E76); color: #fff; }
.tab .count { font-variant-numeric: tabular-nums; opacity: .8; margin-left: .3rem; }
.tab.alert[aria-selected="false"] { border-color: #C08080; color: #8B2231; }

.console-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.console-tools input[type="search"] {
  font: inherit;
  padding: .5rem .8rem;
  border: 1.5px solid #CFDBD9;
  border-radius: 10px;
  min-width: 18rem;
}

/* The tables here are team.core's tc-grid, and everything about how one LOOKS - the scroll box, the header,
   the cells, the filter row, the multi-select - now lives in css/vendor/tc-grid.369c203a6d.css beside the script that
   renders them. What is left here is the charity's own paint on top of it: the brand tokens the grid reads,
   and the chips and buttons this page puts INSIDE its cells, which the grid neither renders nor knows about.
   Keeping the two apart is the point: the rules that used to be here were reached by this site's own
   `details` and `th` element selectors and quietly broke the filter row, which is a bug that cannot happen to
   a stylesheet that ships with the markup it styles. */
.tcg {
  --tcc-grid-fg: #1E2A2D;
  --tcc-grid-muted: #64726F;
  --tcc-grid-line: #DDE7E5;
  --tcc-grid-head-bg: #F7FBFA;
  --tcc-grid-hover: #F4FAF9;
  --tcc-grid-accent: var(--teal-deep, #1F7E76);
  --tcc-radius-m: 12px;
}
.tcg td.num { font-variant-numeric: tabular-nums; }

/* The buttons in a row are the site's, so their size is the site's problem - and at the page's ordinary
   button size four of them set the height of every row in a table meant to be dense. */
.tcg .mini { font-size: .75rem; padding: .14rem .5rem; border-radius: 6px; }

.chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-pending   { background: #FBF0DC; color: #8A6316; }
.chip-validated { background: #DDF0EC; color: #17605A; }
.chip-removed   { background: #EEE9EA; color: #6B5A5E; }
.chip-risk      { background: #FBEAEA; color: #8B2231; }
.chip-group     { background: #E7F1FB; color: #1D5A8A; }

.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.unmatched-heading { font-size: 1rem; margin: 0; margin-right: auto; }
#unmatchedPanel { margin-top: 2.4rem; }

/* The amend dialog carries paired fields, so it needs room the confirm-and-note dialogs do not. */
dialog.tp-dialog--wide { width: min(94vw, 46rem); }

.history .changes { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .2rem; font-size: .85rem; }
.history .changes li { margin: .15rem 0; color: #64726F; }
.history .changes s { opacity: .75; }

.history-more { margin-top: 1rem; }

.roster-steps { margin: .6rem 0 1.2rem; padding-left: 1.2rem; font-size: .92rem; line-height: 1.7; }
.roster-steps code { background: #F1F6F5; padding: .1rem .35rem; border-radius: 5px; }
#rosterText { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }

/* Who may use the console. A reading width rather than the console's full 150rem: it is four short columns and
   two sentences, and stretched across a wide monitor the email and the role it belongs to end up a foot apart. */
#accessView { max-width: 66rem; }
.access-heading { font-size: 1.2rem; margin: 0 0 .4rem; }
.access-intro { margin-bottom: 1.6rem; }

/* The grant form reads as one line of intent - this address, this much access - so its fields sit side by side
   and drop to one column when there is no room for that. */
.access-grant {
  display: grid;
  gap: 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
  padding: 1.3rem 1.4rem .4rem;
  margin-bottom: 1.8rem;
  background: var(--celadon-soft, #EAF4F3);
  border-radius: 14px;
}
.access-grant .form-actions { margin-top: 0; grid-column: 1 / -1; }

/* Inside a dense table row, not on a form: the page's full-width field styling would make one dropdown as tall
   as three rows. */
.access-role { font: inherit; font-size: .85rem; padding: .25rem .4rem; border: 1.5px solid #CFDBD9; border-radius: 8px; background: #fff; }
.access-note { margin-top: 1.2rem; }

/* Pushed to the end of the toolbar, so the count sits away from the controls that change it and reads as a
   result rather than as another thing to press. */
.row-count { margin-left: auto; font-size: .85rem; font-weight: 600; color: #14403C; }

/* The dialog's history is a scrolling panel inside a modal; the whole-register feed is the page. The ID beats
   the base rule's max-height on specificity, whatever order the two end up in. */
#historyView .history { max-height: none; overflow-y: visible; padding-left: 0; border-top: none; }
#historyFeed { margin-top: .6rem; }
.mini {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: .32rem .7rem;
  border-radius: 8px;
  border: 1.5px solid #CFDBD9;
  background: #fff;
  color: #33534F;
  cursor: pointer;
  white-space: nowrap;
}
.mini:hover { border-color: var(--teal-deep, #1F7E76); color: var(--teal-deep, #1F7E76); }
.mini.danger:hover { border-color: #8B2231; color: #8B2231; }
.mini[disabled] { opacity: .5; cursor: not-allowed; }

dialog.tp-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(94vw, 34rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
dialog.tp-dialog::backdrop { background: rgba(12, 34, 32, .45); }
.tp-dialog .dialog-body { padding: 1.5rem; }
.tp-dialog h3 { margin-top: 0; }
.tp-dialog .form-actions { margin-top: 1.4rem; }

.history { margin-top: 1rem; border-top: 1px solid #E2E8E7; padding-top: 1rem; max-height: 16rem; overflow-y: auto; }
.history li { margin-bottom: .8rem; font-size: .88rem; line-height: 1.5; list-style: none; }
.history .when { color: #64726F; font-size: .82rem; display: block; }

.signin-panel { max-width: 32rem; margin: 4rem auto; text-align: center; }
.empty-note { padding: 2.5rem 1rem; text-align: center; color: #64726F; font-style: italic; }

/* A button that reads as a link. Used for "send it again" and "use a different address" inside a hint line -
   they are actions rather than navigation, so they must be buttons for the keyboard and for screen readers,
   and look like links because that is what a person reading a sentence expects to find there. */
.linklike {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--teal-deep, #1F7E76);
  text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { color: var(--burgundy, #881D46); }
.linklike:focus-visible { outline: 3px solid rgba(50, 164, 154, .45); outline-offset: 2px; }