/*
avail.css
Part of avail.day, a web-based decision-making aid.
Copyright © 2026 Triskaideka <https://triskaideka.net/>
This program is licensed under the terms of the GNU Affero General Public
License, version 3 or any later version.  Please see the accompanying README.md
and COPYING files for full details about licensing.
 */

@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 {
  color-scheme: light dark;

  /* Most colors should be defined here, using the light-dark() function,
  and then referred to elsewhere by their variable name. */
  --attention-color: light-dark(#f00, #0ff);
  --bg-color: light-dark(#ffebcd, #210700);
  --cmt-0-shade: light-dark(#fbb, #500);
  --cmt-1-shade: light-dark(#ffb, #550);
  --cmt-2-shade: light-dark(#bfb, #050);
  --control-group-border: light-dark(#e9e9ed, #646461);
  --error-color: light-dark(#f00, #0ff);
  --highlight-color: light-dark(#fff, #333);
  --popularity-color-none: light-dark(#deebf7, #081421);
  --popularity-color-some: light-dark(#c6dbef, #102439);
  --popularity-color-most: light-dark(#9ecae1, #1e3561);
  --popularity-color-all:  light-dark(#6baed6, #295194);
  --text-color: light-dark(#222, #ddd);
  --unvisited-link-color: light-dark(#0000ff, #00cadb);
  --visited-link-color: light-dark(#800080, #ffadff);

  /* Variables not relating to colors. */
  --inline-element-padding: 0.25em;
  --optimal-line: 70ch;
}

a, a:active {
  text-color: var(--unvisited-link-color);
}

a:visited {
  text-color: var(--visited-link-color);
}

/* Used for a button that is intended to be the final action in its section. */
.action_button {
  margin-top: 1em;
  text-align: right;
}

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;
}

/* A nudge to the browser to keep related groups of buttons together. */
.button_set {
  display: inline-block;
}

/* Color-coding for commitments in the table. */
.cmt0 { background-color: var(--cmt-0-shade); }
.cmt1 { background-color: var(--cmt-1-shade); }
.cmt2 { background-color: var(--cmt-2-shade); }

/* 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;
}

/* Line these controls up along the invisible dividing line between the two
columns. */
#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-color: var(--control-group-border);
  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;
}

dialog {
  background-color: var(--bg-color);
  border-radius: 0.5em;
  color: var(--text-color);
  max-height: 90vh;
  max-width: 90vw;
  padding-top: 0;
  width: var(--optimal-line);
}

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

.dialog h2 {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

.dialog_controls {
  text-align: right;
}

/* The "editor" dialog is opened any time the user has to edit some text in the
table. */
#editor {
  line-height: 200%;
}

#editor form {
  padding: 0;
}

#error {
  border-color: var(--error-color);
  padding-top: 0;
}

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

#hash_illustration {
  display: grid;
  grid-template-columns: min-content auto;
  max-width: 100%;
}

#hash_illustration div {
  text-align: center;
  text-wrap: nowrap;
}

.hash_illustration_attention {
  color: var(--attention-color);
}

/* We know the hash is going to be too long to fit, and the reader doesn't
actually need to see all of it to get the point of this illustration. */
#hash_illustration #hash_illus_hash {
  overflow-x: hidden;
}

/* The help text contains some buttons that are just for illustration purposes.
This lessens their impact on the flow of the sentences. */
#help ol button, #help ul button {
  alignment-baseline: middle;
  font-size: smaller;
}

/* Indent non-heading text in the help dialog to make it a little clearer where
the section divisions are. */
#help > div, #help > ol, #help > p, #help > ul {
  margin-left: 1.5em;
}

/* Space out list items to make reading easier. */
#help > ol > li {
  margin-bottom: 1em;
}

#help ol ol {
  list-style-type: lower-alpha;
}

.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;
}

#meta_buttons {
  margin-bottom: 0.75em;
  margin-top: 1.5em;
  text-align: center;
}

#header_lists {
  display: grid;
  grid-template-areas:
    "a a a b b b"
    "c d d d d e";
}

/* Row header list. */
#header_lists div:nth-child(1) {
  grid-area: a;
  padding-right: 0.5em;
}
/* Column header list. */
#header_lists div:nth-child(2) {
  grid-area: b;
  padding-left: 0.5em;
}
/* Button with arrow pointing to the row header list. */
#header_lists div:nth-child(3) {
  grid-area: c;
  text-align: center;
}
/* Controls for choosing how many & which upcoming days. */
#header_lists div:nth-child(4) {
  grid-area: d;
  text-align: center;
}
/* Button with arrow pointing to the column header list. */
#header_lists div:nth-child(5) {
  grid-area: e;
  text-align: center;
}

/* Popularity classes. */
.pop_none { background-color: var(--popularity-color-none); }
.pop_some { background-color: var(--popularity-color-some); }
.pop_most { background-color: var(--popularity-color-most); }
.pop_all  { background-color: var(--popularity-color-all); }

/* A loading icon, that gets dismissed as soon as the app loads. */
#spinner {
  animation-name: spin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-size: 400%;
  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); }
}

/*
A container for the spinner that helps make it more obvious that if you can
see it, the page isn't ready to be used yet.
 */
#spinner-backdrop {
  /* Most colors are set as variables so it's easy to make them different in
  light and dark mode, but it's okay for this one to be the same, because it's
  a veil over the whole page. */
  background-color: #999;
  height: 100%;
  left: 0;
  line-height: 100vh;  /* This trick works to vertically center the contents
                          of an element that only has one line of text. */
  position: fixed;
  opacity: 75%;
  text-align: center;
  top: 0;
  width: 100%;
}

/* The "main attraction" table gets the ID 'a' just in case we ever need to have
another, more normal table on the page. */
table#a {
  border-collapse: collapse;
  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);
  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:not(.total_row):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;
}

table#a col.total_col {
  border-right: 2px solid var(--text-color);
}

table#a tr.total_row {
  border-bottom: 2px solid var(--text-color);
}

/*
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;
}