/*
 * Styles for responsive web layout.
 *
 * The design of these styles is closely based on W3 Schools' guide to
 * Responsive Web Design at https://www.w3schools.com/css/css_rwd_intro.asp
 * and the W3.CSS framework. However, the Appointinator has chosen not use
 * W3.CSS (or Bootstrap etc.) so as to (a) avoid dependence on third-party
 * libraries and (b) separate layout components from logical styling.
 *
 * (c) 2021, 2023, 2026 Society for Creative Anachronism Ltd (Australia).
 *     See the file LICENSE for details.
 */

/* include the padding and border in the box size */
* { box-sizing: border-box; }

/* font size */
body { font-size: 16pt; }
@media only screen and (min-width: 601px) {
    body { font-size: 12pt; }
}

/* column definitions for small screens */
[class*="layout-col-"] {
  width: 100%;
}

/* column definitions for medium and large screens */
@media only screen and (min-width: 601px) {
    .layout-col-1t { width: 33%; }
    .layout-col-2t { width: 66%; }
    .layout-col-3t { width: 100%; }
    .layout-col-1q { width: 25%; }
    .layout-col-2q { width: 50%; }
    .layout-col-3q { width: 75%; }
    .layout-col-4q { width: 100%; }
    [class*="layout-col-"] {
        display: inline-block;
        padding: 1px;
    }
}

/* the remainder of a row */
.layout-col-rest { overflow: hidden; }

/* alignment */
.layout-align-center { text-align: center; }

/* a container for a form, block of text, etc. */
.layout-container {
    display: block;
    margin: 1ex auto 1ex;
}

/* a single input element */
.layout-input {
    display: inline-block;
}

/* a single button */
.layout-input-button {
    height: 5ex;
    width: 18ex;
}

/* annotation after an input field */
.layout-input-annotation-after {
    display: block;
    height: 12pt;
    font-size: small;
}

/* hidden inputs */
.layout-input-hidden {
    display: none;
}

/* the div containing the label associated with an input element */
.layout-label {
    padding: 3px 1ex 1px 0;
    text-align: left;
    vertical-align: top;
}
@media only screen and (min-width: 601px) {
    .layout-label {
        text-align: right;
    }
}

/* lists */
.layout-list {
    display: inline-block;
    text-align: left;
}
.layout-list-item {
    margin-bottom: 1ex;
}

/* a panel within a container */
.layout-panel {
    margin: 1ex auto 1ex;
    padding: 1ex;
    text-align: center;
    width: 75%;
}

/* a row */
.layout-row {
    padding: 0;
    margin: 0 0 10px 0;
}
.layout-row::after {
  content: "";
  clear: both;
  display: table;
}
@media only screen and (max-width: 500px) {
    /* break rows at any character on very narrow screens */
    .layout-row { word-break: break-all }
}

/* a (horizontal) separator within a container */
.layout-separator {
    margin: 3ex 1ex 1ex 1ex;
    text-align: center;
}
.layout-separator::after {
  content: "";
  clear: both;
  display: table;
}

/* an unbreakable span */
.layout-span-nowrap {
    white-space: nowrap;
}

/* a tab */
.layout-tab {
    display: block;
    margin: 2px 2px 0 0;
    padding: 2px;
    width: 18ex;
}
@media only screen and (min-width: 601px) {
    .layout-tab {
        display: inline-block;
    }
}

/* a text area */
.layout-textarea {
    height: 60ex;
    margin-bottom: 2ex;
    width: 100%;
}
@media only screen and (min-width: 601px) {
    .layout-textarea {
        height: 80ex;
        margin: 0ex auto 2ex;
        width: 80ex;
    }
}