/* Study planner. Colours, spacing and type come from the Web Awesome theme
   (matter / mild / purple, as in the Meadows researcher interface), so this
   file mostly does layout. */

/* light only, like the Meadows researcher interface */
:root {
    color-scheme: light;
    --wa-font-family-body: 'Lato', sans-serif;
    --wa-font-family-heading: 'Lato', sans-serif;
    --page-width: 72rem;
    --form-width: 26rem;
}

/* Web Awesome components set their own display, which beats [hidden] */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--wa-color-surface-lowered);
    color: var(--wa-color-text-normal);
    font-family: var(--wa-font-family-body);
}

.site-header,
main,
.site-footer {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--wa-space-l);
    box-sizing: border-box;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--wa-space-m);
    padding-bottom: var(--wa-space-m);
}

/* the Meadows logo is white artwork; use it as a mask so it takes the text colour */
.logo {
    display: block;
    height: 1.6rem;
    aspect-ratio: 391 / 92;
    background: var(--wa-color-text-normal);
    mask: url(logo.svg) no-repeat left center / contain;
}

.intro {
    max-width: 44rem;
    margin-bottom: var(--wa-space-xl);
}

.intro h1 {
    margin: var(--wa-space-m) 0 var(--wa-space-s);
}

.intro p {
    margin: 0;
    color: var(--wa-color-text-quiet);
    line-height: var(--wa-line-height-normal);
}

.intro .intro-note {
    margin-top: var(--wa-space-s);
    font-size: var(--wa-font-size-s);
}

/* form on the left, results on the right; stacked on narrow screens */
.layout {
    display: grid;
    grid-template-columns: minmax(0, var(--form-width)) minmax(0, 1fr);
    gap: var(--wa-space-2xl);
    align-items: start;
}

@media (max-width: 56rem) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

wa-card h2 {
    margin: 0;
    font-size: var(--wa-font-size-l);
}

.option-hint {
    display: block;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.field-note {
    margin: 0;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    line-height: var(--wa-line-height-normal);
}

.field-pair {
    --min-column-size: 8rem;
}

/* results stay in view while the form scrolls, on wide screens */
#results {
    position: sticky;
    top: var(--wa-space-l);
}

@media (max-width: 56rem) {
    #results {
        position: static;
    }
}

/* the output gets the same white card as the form, so it doesn't look
   muted next to the inputs */
.results-card {
    display: block;
}

.placeholder {
    color: var(--wa-color-text-quiet);
    line-height: var(--wa-line-height-normal);
}

.placeholder p {
    margin: 0;
}

#problem-list {
    margin: 0;
    padding-left: var(--wa-space-l);
}

/* the plan: one big number, then the sentences that qualify it */
.plan-number {
    font-size: var(--wa-font-size-4xl);
    font-weight: var(--wa-font-weight-bold);
    line-height: 1.1;
    margin: 0;
}

.plan-number-label {
    font-size: var(--wa-font-size-l);
    margin: var(--wa-space-2xs) 0 var(--wa-space-m);
}

.plan-text {
    max-width: 40rem;
    line-height: var(--wa-line-height-normal);
}

.plan-text p {
    margin: 0 0 var(--wa-space-s);
}

.batch-list {
    margin: var(--wa-space-xs) 0 var(--wa-space-m);
    padding-left: var(--wa-space-xl);
    line-height: var(--wa-line-height-normal);
}

.chart-figure {
    position: relative;
    margin: var(--wa-space-xl) 0 var(--wa-space-m);
}

.chart-figure figcaption {
    font-weight: var(--wa-font-weight-bold);
    margin-bottom: var(--wa-space-xs);
}

.chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart .axis-line,
.chart .tick line {
    stroke: var(--wa-color-surface-border);
    stroke-width: 1;
}

.chart text {
    fill: var(--wa-color-text-quiet);
    font-size: 12px;
    font-family: var(--wa-font-family-body);
}

.chart .dot {
    fill: var(--wa-color-brand-fill-loud);
    stroke: var(--wa-color-surface-default);
    stroke-width: 2;
}

/* studies that needed more than the recommended total: grey, but still at
   least 3:1 against the white card */
.chart .dot.is-over {
    fill: var(--wa-color-gray-60);
}

.chart .curve {
    fill: none;
    stroke: var(--wa-color-brand-fill-loud);
    stroke-width: 2;
}

.chart .marker-line {
    stroke: var(--wa-color-text-normal);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.chart .marker-label {
    fill: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-bold);
}

.chart .hit {
    fill: transparent;
    cursor: default;
}

.chart .hit:focus-visible {
    outline: none;
    stroke: var(--wa-color-focus);
    stroke-width: 2;
}

.chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--wa-color-surface-raised);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    box-shadow: var(--wa-shadow-m);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    font-size: var(--wa-font-size-s);
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 8px));
}

#chart-table table {
    border-collapse: collapse;
    font-size: var(--wa-font-size-s);
}

#chart-table th,
#chart-table td {
    text-align: right;
    padding: var(--wa-space-3xs) var(--wa-space-s);
    border-bottom: 1px solid var(--wa-color-surface-border);
}

/* the plan as a paragraph to copy, and what to do next */
.method-text {
    margin: var(--wa-space-l) 0;
    padding: var(--wa-space-m);
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    max-width: 40rem;
}

.method-text p {
    margin: 0 0 var(--wa-space-s);
    line-height: var(--wa-line-height-normal);
}

.method-text .method-label {
    font-weight: var(--wa-font-weight-bold);
    font-size: var(--wa-font-size-s);
}

.copy-status {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.next-step {
    margin-bottom: var(--wa-space-m);
}

.next-step p {
    margin: 0 0 var(--wa-space-s);
}

.explainer {
    line-height: var(--wa-line-height-normal);
    max-width: 40rem;
}

.explainer p:first-child {
    margin-top: 0;
}

.site-footer {
    margin-top: var(--wa-space-3xl);
    padding-bottom: var(--wa-space-xl);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}