@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');

HTML, BODY {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
}

/* Sandbox / QA environment banner — only rendered when APP_ENV != production */
/* Sandbox bar: px throughout so select and button heights are unambiguous */
DIV.sandbox-bar { background: #92400e; color: #fff; min-height: 36px; padding: 4px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; font-size: 13px; }
DIV.sandbox-bar SPAN.sb-env { background: rgba(0,0,0,.3); padding: 3px 7px; border-radius: 3px; font-weight: 700; letter-spacing: .08em; font-size: 11px; flex-shrink: 0; }
DIV.sandbox-bar SPAN.sb-acting { flex-shrink: 0; }
DIV.sandbox-bar FORM { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
DIV.sandbox-bar LABEL.sb-label { color: #fff; font-size: inherit; line-height: inherit; flex-shrink: 0; }
/* margin:0 matters: Foundation gives select a 1rem bottom margin, and flex centres the margin box */
DIV.sandbox-bar SELECT.sb-select, DIV.sandbox-bar INPUT.sb-input, DIV.sandbox-bar BUTTON.sb-btn { height: 24px; margin: 0; box-sizing: border-box; border-radius: 4px; font-family: inherit; font-size: 12px; line-height: 24px; color: #fff; }
DIV.sandbox-bar SELECT.sb-select { -webkit-appearance: none; appearance: none; padding: 0 24px 0 8px; border: 1px solid rgba(255,255,255,.35); background-color: rgba(0,0,0,.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,.7)'/%3E%3C/svg%3E"); background-origin: padding-box; background-size: 10px 6px; background-repeat: no-repeat; background-position: right 8px center; width: 160px; cursor: pointer; transition: none; }
DIV.sandbox-bar BUTTON.sb-btn { padding: 0 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.18); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
DIV.sandbox-bar BUTTON.sb-btn:hover { background: rgba(255,255,255,.3); }
/* Foundation makes [type=text] a full-width block with a shadow and 1rem margin; undo all of it */
DIV.sandbox-bar INPUT.sb-input { display: inline-block; width: 144px; padding: 0 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.22); box-shadow: none; transition: none; font-variant-numeric: tabular-nums; }
DIV.sandbox-bar INPUT.sb-input:focus { outline: none; border-color: rgba(255,255,255,.7); background: rgba(0,0,0,.3); box-shadow: none; }
/* The running simulated clock is plain text, not a box */
DIV.sandbox-bar SPAN.sb-clock { font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.air-datepicker.sb-picker { --adp-font-size: 13px; --adp-accent-color: #92400e; --adp-cell-background-color-selected: #92400e; --adp-cell-background-color-selected-hover: #78350f; --adp-border-radius: 4px; }

/* The body is a column so the skyline footer can sit at the foot of the
   viewport on short pages (margin-top: auto) and after the content on long ones. */
BODY { color: #525252; display: flex; flex-direction: column; height: auto; min-height: 100vh; }
BODY * { font-family: Lora; }

SELECT { height: 2.65rem; }
FOOTER { position: relative; width: 100%; flex-shrink: 0; margin-top: auto; background-image: url('/images/skyline.svg'); background-position: bottom; background-repeat: no-repeat; background-size: 100%; height: 26vw; }

HTML.is-reveal-open { overflow: inherit; }
BODY.is-reveal-open { overflow: hidden; }

/* Phone "page view": the reveal's content replaces the page instead of
   floating over it as a modal. Foundation moves DIV.reveal inside
   DIV.reveal-overlay directly under BODY, so hiding BODY's other children
   hides the whole original page. */
BODY.page-view > *:not(DIV.reveal-overlay) { display: none; }
BODY.page-view DIV.reveal-overlay { position: static; overflow: visible; background: none; }
BODY.page-view DIV.reveal { position: relative; top: 0; height: auto; min-height: 100vh; overflow: visible; }

H1 { text-align: center; line-height: 1.2; font-size: 1.25rem; }  /* unitless so wrapped event names don't cramp */
H2 { text-align: center; line-height: 1em; }
H3 { text-align: center; line-height: 1.5em; font-size: 1.25rem; font-style: italic; }
I.fa { margin-right: 0.25em; }
TR.event { cursor: pointer; }
TR.user { cursor: pointer; }
TR.perfect { background-color: red !important; }
TR.match { background-color: orange !important; }
TD.location { display: none; text-align: center; }
TD.time { text-align: center; white-space: nowrap; }
TD.status { text-align: center; white-space: nowrap; }
TD.name DIV.location { font-style: italic; font-size: 0.85em; margin-top: 0.25em; }
TD.availability { text-align: right; }
DIV.myavailability { margin: 1em 0; }
DIV.myavailability > DIV { text-align: center; padding: 1em 0; }
DIV.myavailability > DIV:hover { background-color: orange; color: white; }
DIV.myavailability > DIV > I { margin: 0.25em 0; }

DIV.login { margin-top: 1.75em; }
DIV.login DIV.social-login A.button { margin: 0.25em; }
DIV.login A.button.google { background-color: #ffffff; color: #3c4043; border: 1px solid #dadce0; }
DIV.login A.button.google:hover { background-color: #f1f3f4; }
DIV.login P.or { margin: 1em 0 0.5em; color: #8a8a8a; }
DIV.selector { margin: 1em 0; }
DIV.users { border-bottom: solid 3px #8a8a8a; margin-bottom: 1em }

SPAN.long { display: none; }
SPAN.short { display: inline; }
/* My status in the events list: kept in the page for screen readers on narrow screens, shown from 520px. */
TD.status SPAN.status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
TABLE.events THEAD { border: 0; background: transparent; }
TABLE.events THEAD TH { padding: 0; border: 0; }
TABLE.events TD.name A.ellipsis { display: block; color: inherit; }
TABLE.events TD.name A.ellipsis:hover, TABLE.events TD.name A.ellipsis:focus { color: inherit; }

DIV.name { padding: 0 0.75em; }
DIV.top-bar { margin-bottom: 1em; }

TABLE.users TR.user { background-color: #f1f1f1; border-bottom: solid 2px #fff !important; }
/* max-width: 0 lets the cell shrink below its text so long names truncate rather than wrap. */
TABLE.users TD.name { width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
TABLE.users TR.no-results TD.name { color: #8a8a8a; font-style: italic; }
TABLE.directory TR.no-results TD { color: #8a8a8a; font-style: italic; }
DIV.search.directory { margin-bottom: 1em; }

TD.availability { vertical-align: middle; padding: 0; }
TD.availability DIV.button-group { margin-bottom: 0; flex-wrap: nowrap; }  /* Foundation 6.9 wraps button groups by default */
TD.availability DIV.button-group BUTTON { margin-bottom: 0; }
TD.availability BUTTON { display: none; }
TD.availability BUTTON:hover { background-color: orange; }
TD.availability BUTTON I { margin-right: 0; }
TD.timestamp, DIV.timestamp { white-space: nowrap; font-size: 0.75em; line-height: 1em; color: #8a8a8a; }

DIV.past DIV.myavailability { display: none; }

/* Past events: every list offers "attended", and the attended list offers the way back out. */
DIV.past DIV.attended TD.availability BUTTON.notattended,
DIV.past :is(DIV.required, DIV.notrequired, DIV.available, DIV.maybe, DIV.unavailable, DIV.invited, DIV.users) TD.availability BUTTON.attended { display: inline-block; }

/* Upcoming events: each list offers the statuses it makes sense to move to.
   BUTTON.previous is the invited button, which also means "back to invited". */
DIV.upcoming :is(DIV.required, DIV.notrequired, DIV.available, DIV.maybe, DIV.unavailable, DIV.users) TD.availability BUTTON.previous,
DIV.upcoming :is(DIV.available, DIV.maybe) TD.availability :is(BUTTON.required, BUTTON.notrequired),
DIV.upcoming :is(DIV.unavailable, DIV.invited) TD.availability :is(BUTTON.available, BUTTON.maybe),
DIV.upcoming :is(DIV.invited, DIV.users) TD.availability :is(BUTTON.available, BUTTON.unavailable) { display: inline-block; }

DIV.padlock { display: none; text-align: center; }
DIV.locked DIV.padlock { display: block; background-color: #ffae00; color: #ffffff; margin: 1em 0; }
DIV.padlock SPAN.timestamp { font-size: 0.75em; line-height: 1em; color: #8a8a8a; }

/* Read-only status lists for members who cannot manage the event: visibly
   greyed out and inert, so it is clear they can look but not change anything. */
DIV.selector.readonly { opacity: 0.55; filter: grayscale(1); pointer-events: none; user-select: none; margin-top: 1em; }
DIV.selector.readonly TD.name { cursor: default; }

DIV.search { position: relative; }
DIV.search INPUT { text-indent: 36px; padding-right: 48px; }
DIV.search I.fa-search { position: absolute; top: 7px; left: 7px; font-size: 1.5em; }
DIV.search I.clear { display: none; position: absolute; top: 0; right: 0; height: 100%; min-width: 48px; box-sizing: border-box; margin: 0; padding: 0 14px; align-items: center; justify-content: center; font-size: 1.5em; color: #8a8a8a; cursor: pointer; }
DIV.search I.clear.visible { display: flex; }
DIV.search I.clear:hover { color: #525252; }

@-webkit-keyframes orange-fade {
   0% { background: orange; }
   100% { background: #f1f1f1; }
}

@keyframes orange-fade {
   0% { background: orange; }
   100% { background: #f1f1f1; }
}

TR.new {
   -webkit-animation: orange-fade 0.75s ease-in 1;
   animation: orange-fade 0.75s ease-in 1;
}

DIV.user { line-height: 42px; }
DIV.status DIV.title { margin: 2px 0; background-color: #8a8a8a; color: white; padding: 0.5em 10px; text-align: center; }
/* The icon groups were floats, which hang from the top of the bar while the text
   centres on the taller badge line; pin them to the bar's vertical middle instead. */
DIV.status DIV.title { position: relative; }
DIV.status DIV.title DIV.float-left, DIV.status DIV.title DIV.float-right { position: absolute; top: 50%; transform: translateY(-50%); }
DIV.status DIV.title DIV.float-left { left: 10px; }
DIV.status DIV.title DIV.float-right { right: 10px; }
DIV.status DIV.title SPAN.badge { background-color: white; color: #8a8a8a; }
DIV.type { text-align: center; margin-bottom: 1em; }
SPAN.label { border-radius: 2px; }
SPAN.label.paid { background-color: purple; }
SPAN.label.practice { background-color: orange; }
SPAN.label.wedding { background-color: blue; }
SPAN.label.quarter { background-color: green; }
SPAN.label.peal { background-color: pink; }
SPAN.badge { vertical-align: middle; font-weight: bold; }
DIV.datetime { width: 48%; text-align: center; background-color: #f1f1f1; padding: 0.5em; }
DIV.datetime.date { float: left; }
DIV.datetime.time { float: right; }
DIV.user { clear: both; margin: 2px 0; background-color: #f1f1f1; }
A.user { white-space: nowrap; cursor: pointer; }
A.user:hover { background-color: orange; color: white; }
DIV.date { text-align: center; }
DIV.date SPAN.weekday { display: block; font-size: 0.65em; line-height: 1.2em; text-transform: uppercase; }
DIV.date SPAN.day { display: block; font-size: 1.5em; line-height: 1em; font-weight: 700; }
DIV.date SPAN.month { display: block; font-size: 0.65em; line-height: 1.2em; text-transform: uppercase; }
LABEL.middle { vertical-align: middle; }
TD.timestamp { display: none; }

DIV.top-bar { position: relative; }
DIV.top-bar H1 { margin: 0 auto; line-height: 1.9em; }
DIV.top-bar LI.more > A { color: inherit; }  /* reads as the title, not a link; the arrow marks the dropdown */
DIV.top-bar LI.more UL.menu { z-index: 10; min-width: 10rem; }
DIV.top-bar .dropdown.menu > LI.more.is-dropdown-submenu-parent > A::after { border-width: 4px; border-top-color: #8a8a8a; margin-top: -2px; }  /* smaller, grey arrow */
DIV.top-bar DIV.me { position: absolute; top: 0; right: 0.5em; background-color: #1779ba; padding: 0.15em 0em 0.1em 0.35em; font-size: 0.85em; }
DIV.top-bar DIV.me A { color: white; }
DIV.top-bar DIV.me .avatar { position: relative; display: inline-block; }
/* Membership badge inset at the bottom right of the user icon, ringed in the bar colour. */
DIV.top-bar DIV.me .member-badge { position: absolute; right: -0.05em; bottom: -0.1em; font-size: 0.6em; line-height: 1; padding: 0.1em; border-radius: 50%; background-color: #1779ba; color: #f5c518; }
TD.member { width: 2em; padding-right: 0; text-align: center; }
TD.member I { color: #d4a017; font-size: 0.75em; vertical-align: middle; }
/* Foundation tooltip triggers: drop the default dotted underline and bold. */
.member-tip.has-tip { border-bottom: none; font-weight: normal; cursor: default; }
.tooltip { font-weight: normal; }

BODY.list { display: block; font-size: 11.85px; width: 210mm; margin: 1em 0 0 0; position: relative; }  /* print layout: not the flex column */
BODY.list H1 { font-size: 2em; line-height: 1.15em; margin-bottom: 0.1em; }
BODY.list H2 { font-size: 1.5em; }
BODY.list TABLE { border: none !important; margin: 0; border-spacing: 0; border-collapse: separate; }
BODY.list TABLE TR TD { background-color: transparent; border-spacing: 0; }
BODY.list TABLE TBODY TR:nth-child(even) { background-color: transparent; border: none; }
BODY.list TD { padding: 0.1em; margin: 0; line-height: 1.125em; }
BODY.list TD.date { width: 15mm; text-align: center; }
BODY.list TD.time { width: 25mm; text-align: center; }
BODY.list TD.location { width: 50mm; display: table-cell; text-align: center; }
BODY.list SPAN.unpaid { font-size: 0.85em; font-style: italic; }
BODY.list FOOTER { display: none; }
BODY.list DIV.footer { line-height: 1.15em; margin-top: 0.75em; font-size: 1.25em; }
BODY.list DIV.footer DIV.general { font-size: 0.75em; }
BODY.list DIV.timestamp { font-size: 0.65em; position: absolute; top: -1em; right: 0.25em; }

BODY.list TABLE.ticksheet { border: solid 1px !important; border-collapse: collapse; }
BODY.list TABLE.ticksheet TR TD { border: solid 1px !important; }
BODY.list TABLE.ticksheet TR TD.person { font-size: 14px; width: 200px; padding: 12px 6px; }
BODY.list TABLE.ticksheet TR TD.tick { width: 50px; }

@media screen and (min-width: 520px) {
    H1 { font-size: 1.85rem; }
    TD.timestamp { display: table-cell; }
    SPAN.long { display: inline; }
    SPAN.short { display: none; }
    TD.status SPAN.status-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: inherit; }
    TD.location { display: table-cell; }
    TD.name DIV.location { display: none; }
    TD.status { width: 150px; }
    DIV.top-bar DIV.me { padding: 0.15em 0em 0.1em 0.4em; }
}

DIV.site {
  margin: auto;
  background-color: #FFF;
}

.edit-button, .edit-button.medium {
    right: 5rem;
    top: .5rem;
    font-size: 1.35em;
    line-height: 1.5em;
    padding: 0 0.15rem;
}

.edit-button {
    position: absolute;
    color: #8a8a8a;
    cursor: pointer;
}

.edit-button:focus, .edit-button:hover {
    color: #0a0a0a;
}

.delete-button, .delete-button.medium {
  right: 2.5rem;
  top: .5rem;
  font-size: 1.35em;
  line-height: 1.5em;
  padding: 0 0.15rem;
}

.delete-button {
  position: absolute;
  color: #8a8a8a;
  cursor: pointer;
}

.delete-button:focus, .delete-button:hover {
  color: #0a0a0a;
}

.close-button {
  padding-left: 0.5rem;
}

DIV.invited > DIV.title > I:before, BUTTON.invited > I:before, I.invited:before { content: '\F128'; } /* fa-question */
DIV.available > DIV.title > I:before, BUTTON.available > I:before, I.available:before { content: '\F256'; } /* fa-hand-paper-o */
DIV.unavailable > DIV.title > I:before, BUTTON.unavailable > I:before, I.unavailable:before { content: '\F088'; } /* fa-thumbs-o-down */
DIV.maybe > DIV.title > I:before, BUTTON.maybe > I:before, I.maybe:before { content: '\F11A'; } /* fa-meh-o */
DIV.required > DIV.title > I:before, BUTTON.required > I:before, I.required:before { content: '\F00C'; } /* fa-check */
DIV.notrequired > DIV.title > I:before, BUTTON.notrequired > I:before, I.notrequired:before { content: '\F00D'; } /* fa-times */
DIV.attended > DIV.title > I:before, BUTTON.attended > I:before, I.attended:before { content: '\F058'; } /* fa-check-circle */
DIV.notattended > DIV.title > I:before, BUTTON.notattended > I:before, I.notattended:before { content: '\F057'; } /* fa-times-circle */
DIV.locked > DIV.title > I:before, BUTTON.locked > I:before, I.locked:before { content: '\F023'; } /* fa-lock */

I.grey { color: rgba( 255, 255, 255, 0.5 ); }
I.email, I.alpha, I.timestamp, I.list { cursor: pointer; }
I.email:hover, I.alpha:hover, I.timestamp:hover, I.list:hover { color: white; }

/* Attendance statistics (_user_stats.blade.php) on the account page and the user panel. */
TABLE.user-stats { font-size: 0.85em; margin: 1em auto 0; width: auto; max-width: 100%; }
TABLE.user-stats TR { background-color: transparent !important; border: none; }
TABLE.user-stats TH, TABLE.user-stats TD { padding: 0.2em 0.5em; vertical-align: top; line-height: 1.4; }
TABLE.user-stats TH { font-weight: normal; text-align: right; color: #8a8a8a; white-space: nowrap; }
TABLE.user-stats SPAN.muted { color: #8a8a8a; }
/* Three fixed-size ring charts. Every cell is exactly 100px wide and may neither
   grow nor shrink, so the rings stay the same size whatever the container does;
   on a very narrow screen the row wraps rather than squeezing them. */
DIV.donut-row { display: flex; flex-wrap: wrap; gap: 1em 1.5em; justify-content: center; align-items: flex-start; margin-top: 1.25em; }
DIV.donut-chart { flex: 0 0 100px; width: 100px; max-width: 100px; text-align: center; }
DIV.donut-chart SVG { width: 90px; height: 90px; max-width: none; display: block; margin: 0 auto; flex-shrink: 0; }
DIV.donut-chart P.donut-label { font-size: 0.8em; color: #8a8a8a; margin: 0.3em 0 0; line-height: 1.3; }
DIV.recurrence-switch { text-align: center; padding: 0.425em 0; }
DIV.recurrence { height: 0; overflow-y: hidden; }
I.recurrence { cursor: pointer; }

DIV.timestamp { text-align: center; line-height: 1.35em; }
/* RSVP-by-email pages (public, unauthenticated) */
DIV.rsvp { margin: 1em 0; }
DIV.rsvp P.lead { text-align: center; font-style: italic; margin: 1em 0; }
DIV.rsvp DIV.response { margin: 1em 0; }
DIV.rsvp DIV.actions .button { margin: 0 0.25em 0.5em; }
DIV.rsvp DIV.response > I { margin-bottom: 0.25em; }
DIV.rsvp DIV.response P.timestamp { font-size: 0.85em; color: #8a8a8a; }
DIV.myavailability.rsvp-choices > FORM { margin-bottom: 0; }
DIV.myavailability.rsvp-choices > FORM > BUTTON { display: block; width: 100%; text-align: center; padding: 1em 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
DIV.myavailability.rsvp-choices > FORM > BUTTON:hover { background-color: orange; color: white; }
DIV.myavailability.rsvp-choices > FORM > BUTTON > I { margin: 0.25em 0; }
DIV.myavailability.rsvp-choices > FORM > BUTTON > SPAN.choice { display: block; }
DIV.myavailability.rsvp-choices > FORM > BUTTON.current { background-color: #f1f1f1; font-weight: bold; }
DIV.rsvp DIV.next-event { margin-top: 1.5em; padding-top: 1.25em; border-top: 1px solid #e5e5e5; }
DIV.rsvp DIV.next-event DIV.kicker { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; color: #8a8a8a; }
DIV.rsvp DIV.next-event DIV.title { font-weight: bold; font-size: 1.1em; margin-top: 0.15em; }
DIV.rsvp DIV.next-event DIV.detail { color: #525252; font-size: 0.9em; margin-bottom: 0.75em; }