/*
avail.css
 */

@font-face {
  font-family: "Inclusive Sans";
  src:
    local("Inclusive Sans"),
    url("./fonts/Inclusive-Sans/InclusiveSans-Regular.woff2") format("woff2"),
    url("./fonts/Inclusive-Sans/InclusiveSans-Italic.woff2") format("woff2"),
    url("./fonts/Inclusive-Sans/InclusiveSans-Bold.woff2") format("woff2");
}

:root {
  --bg-color: BlanchedAlmond;
  --highlight-color: #fff;
  --inline-element-padding: 0.25em;
  --optimal-line: 70ch;
  --text-color: #222;
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: "Inclusive Sans", sans-serif;
  font-size: 1.5rem;
}

button, input, select {
  font-size: 100%;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

/* Color-coding for commitments in the table. */
.cmt0 { background-color: #fbb; }
.cmt1 { background-color: #ffb; }
.cmt2 { background-color: #bfb; }

/* Where the hash code is shown. */
.copy_candidate {
  border: 1px dotted var(--text-color);
  font-family: monospace;
  max-inline-size: 100%;
  overflow-x: hidden;
  text-wrap: nowrap;
}

#copying_controls {
  display: grid;
  grid-template-columns: max-content 1fr;
}

#copying_controls div:nth-of-type(odd) {
  text-align: right;
}

#controls {
  padding-top: 1.5rem;
  margin: auto;
  max-width: var(--optimal-line);
}

#controls fieldset {
  border-radius: 0.5em;
  /* This gives the buttons and other controls some space from each other when
  they're on separate lines. */
  line-height: 200%;
}

#controls fieldset textarea {
  width: 99%;
}

#controls summary {
  cursor: pointer;
  font-style: italic;
}

#dev_controls {
  text-align: center;
}

/*
An aid for debugging.
 */
#dev_mode_hash_code {
  font-family: monospace;
  word-break: break-word;
}

#editor {
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 200%;
}

#editor form {
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

input#new_schedule_caption {
  width: 10ch;
}

.in_table_controls {
  white-space: pre;
}

.in_table_controls button {
  margin-left: 0.1em;
  margin-right: 0.1em;
}

label {
  border-radius: 0.25em;
  padding: var(--inline-element-padding);
}

label:hover {
  background-color: var(--highlight-color);
}

main {
  margin: auto;
  max-width: fit-content;
}

/*
By "radio pair" I mean a set of two radio buttons (including their labels) next
to one another, offering some either/or choice.
 */
.radio_pair {
  padding-bottom: var(--inline-element-padding);
  padding-top: var(--inline-element-padding);
  white-space: nowrap;
}

.radio_pair label {
  padding-left: var(--inline-element-padding);
  padding-right: var(--inline-element-padding);
}

.radio_pair label:has(input:checked) {
  background-color: #efdbbd;
}

/*
A loading icon.
Get dismissed as soon as the app loads, so really, if you ever see this, either
you have a slow connection or the app is broken.
 */
#spinner {
  animation-name: spin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-size: larger;
  text-align: center;
}
@keyframes spin {
    0% { transform: rotate(0); }
   25% { transform: rotate(90deg); }
   50% { transform: rotate(180deg); }
   75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

table#a {
  margin: auto;
}

table#a caption {
  font-size: 125%;
  padding: 0.2rem 0.4rem;
}

table#a #cell_with_add_buttons {
  border: none;  /* The cell gets a double border if I don't do this.  No idea why, but Firefox and Chromium agree. */
  display: grid;
  grid-template-columns: 1fr 1fr;
}
table#a #cell_with_add_buttons div:first-of-type {
  text-align: left;
}
table#a #cell_with_add_buttons div:last-of-type {
  text-align: right;
}

table#a, table#a th, table#a td {
  border: 1px solid var(--text-color);
  border-collapse: collapse;
  padding: 0.2rem 0.4rem;
}

/* Align the headers in the top row. */
table#a thead th {
  text-align: center;
  vertical-align: bottom;
}

/* Align the headers in the left column. */
table#a tbody th {
  text-align: right;
  vertical-align: middle;
}

/* Center all data cells. */
table#a td {
  text-align: center;
  vertical-align: middle;
}

/* Make each table cell into one big link. */
table#a td a {
  color: var(--text-color);
  display: block;
  height: 100%;
  text-decoration: none;
  width: 100%;
}

table#a tbody tr:has(td:hover) th {
  background-color: var(--highlight-color);
}

/*
Hide in-table controls that would be meaningless to use.
We do this with CSS instead of Vue because "visiblity:hidden" lets the button
still displace the space it would have taken up if it were visible, thus
maintaining a consistent placement for the other buttons.
 */
table#a thead                   th:nth-of-type(2) .in_table_controls button:first-of-type,
table#a thead                   th:last-of-type   .in_table_controls button:last-of-type,
table#a tbody tr:nth-of-type(2) th                .in_table_controls button:first-of-type,
table#a tbody tr:last-of-type   th                .in_table_controls button:last-of-type  {
  visibility: hidden;
}

/*
For text that may be helpful to screenreader users but is thought not to be
necessary for sighted users.
I copied this code from https://kittygiraudel.com/snippets/sr-only-class/ and
I'm just trusting it.
 */
.visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}