/*
 * plot-my-garden.co.uk
 *
 * Loaded after styles.css on the planner and after site.css on everything else,
 * so it only states what changes.
 *
 * The idea: the back of a seed packet. A vegetable packet is a piece of design
 * that has survived unchanged for a century because it works: cheap kraft board,
 * one or two inks, the variety name large, and a sowing chart of twelve narrow
 * columns telling you what to do in which month. It is the exact information
 * this site deals in, already solved, and it looks nothing like a SaaS planner.
 *
 * So the ground is kraft, the ink is one spot vermilion, the plate behind the
 * masthead is an actual printed sowing chart, and the planting schedule is set
 * as the twelve-column chart it has always been rather than as a list of cards.
 *
 * What it replaces: a line-icon sidebar over off-white, a page whose h1 was
 * "Plot Settings", and "Complete Guide to Planning Your Garden in the UK".
 */

/* --------------------------------------------------------------- tokens */

:root {
    --step-6: 3rem;
    --step-7: 4rem;

    --font-packet: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-plain: 'Source Sans 3', system-ui, sans-serif;
    --font-figure: ui-monospace, 'SF Mono', Menlo, monospace;

    /* One spot ink, as a seed packet has. 4.56:1 on kraft even as body text. */
    --spot: #A8401C;
    --spot-deep: #7E2F13;

    /* Cheap kraft board, and the band brown the packet is printed on. */
    --kraft: #E7DDC6;
    --panel: #F6F1E3;
    --band: #3A3122;
    --ink: #231C11;
    --ink-soft: #4C4230;
    --muted: #6B6049;
    --rule: #CFC2A4;
    --rule-strong: #AC9D7C;
}

body {
    background: var(--kraft);
    color: var(--ink);
    font-family: var(--font-plain);
}

h1, h2, h3, h4 {
    font-family: var(--font-packet);
    letter-spacing: -0.015em;
    color: var(--ink);
}

/*
 * Month abbreviations, section marks, panel labels. The one mannerism, doing
 * the job the old design gave to bold 13px sans next to a line icon.
 */
.packet-label,
.masthead-kicker,
.section-title,
.sidebar h3,
.chart-months th {
    font-family: var(--font-plain);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* ----------------------------------------------------------------- navs */

.site-nav {
    background: var(--band);
    border-bottom: 3px solid var(--spot);
}

.site-nav .nav-brand {
    color: #fff;
    font-family: var(--font-packet);
    font-weight: 700;
    text-transform: uppercase;
}

.site-nav .nav-links a {
    color: #fff;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a[aria-current='page'] {
    background: transparent;
    border-bottom-color: var(--spot);
}

.site-nav svg.icon {
    stroke: #fff;
}

/*
 * The planner's own toolbar sits directly under the site nav. It is set as a
 * rule and a row of controls rather than a second branded bar: two mastheads
 * stacked was most of why the tool felt bolted onto a different website.
 */
.top-nav {
    background: var(--panel);
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: none;
}

.top-nav .brand-name,
.top-nav .nav-brand {
    display: none;
}

.current-plot-badge {
    font-family: var(--font-plain);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spot);
    background: none;
    border: 0;
    border-radius: 0;
}

/* ------------------------------------------------------------- masthead */

/*
 * The plate is a printed sowing chart on kraft, greyscale and multiplied over
 * the band brown so it can only darken: white type measures 12.79:1 on the flat
 * brown and better everywhere over the chart.
 *
 * On the planner the band is deliberately shallow. The plot is the answer on
 * that page and pushing it under a tall hero would be the wrong trade.
 */
.masthead {
    background-color: var(--band);
    background-image: url('/img/sowing-chart.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    border-bottom: 4px solid var(--spot);
    padding-block: clamp(1.75rem, 4.5vw, 3rem) clamp(1.5rem, 3.5vw, 2.25rem);
}

.masthead-inner {
    max-width: 64rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.masthead-kicker {
    display: block;
    color: #fff;
    opacity: 0.78;
    margin-bottom: 0.9rem;
}

.masthead h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4.8vw, var(--step-5, 2.488rem));
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
    max-width: 22ch;
    margin: 0;
    text-wrap: balance;
}

.masthead-standfirst {
    margin-top: 0.9rem;
    max-width: 48ch;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #fff;
    opacity: 0.9;
}

.masthead.masthead-app {
    padding-block: 1.1rem;
}

.masthead.masthead-app h1 {
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    max-width: none;
}

.masthead.masthead-app .masthead-kicker {
    margin-bottom: 0.4rem;
}

/* ---------------------------------------------------- the content pages */

/*
 * site.css collapses fourteen class names into one white 10px-radius box with a
 * soft shadow. Retired, so the pages are held by rules and space.
 */
.content-card,
.info-card,
.article-card,
.blog-card,
.faq-card,
.card,
.result-box,
.history-item,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.balance-card,
.highlight-box {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

body > .container {
    max-width: 64rem;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
    counter-reset: sowing;
}

body > .container > .content-card,
body > .container > section {
    counter-increment: sowing;
    display: grid;
    gap: 0.4rem clamp(0.75rem, 2vw, 2rem);
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
    border-top: 1px solid var(--rule);
}

/* Numbering, not content, so it is generated and never read out. */
body > .container > .content-card::before,
body > .container > section::before {
    content: counter(sowing, decimal-leading-zero);
    font-family: var(--font-figure);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--spot);
}

@media (min-width: 64rem) {
    body > .container > .content-card,
    body > .container > section {
        grid-template-columns: 6rem minmax(0, 1fr);
        align-items: start;
    }

    body > .container > .content-card > *,
    body > .container > section > * {
        grid-column: 2;
    }

    body > .container > .content-card::before,
    body > .container > section::before {
        grid-column: 1;
        grid-row: 1 / -1;
        text-align: right;
        border-top: 3px solid var(--spot);
        padding-top: 0.35rem;
        margin-top: -0.35rem;
    }
}

body > .container h2 {
    font-size: var(--step-4, 2.074rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 0.6rem;
    max-width: 24ch;
}

body > .container h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.4rem 0 0.3rem;
}

body > .container p,
body > .container li {
    color: var(--ink-soft);
    max-width: 68ch;
}

.highlight-box {
    border-left: 4px solid var(--spot);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 1.5rem 0;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------- the planner */

/*
 * The sidebar was a column of line icons over off-white, which is the single
 * most interchangeable component in the estate. It becomes the printed panel on
 * the back of the packet: kraft, ruled, no icons, labels in small caps.
 */
#sidebar,
.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--rule-strong);
    box-shadow: none;
}

#sidebar h1,
#sidebar h2,
#sidebar h3,
.sidebar h1,
.sidebar h2,
.sidebar h3 {
    font-family: var(--font-plain);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--spot);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

#sidebar label,
.sidebar label {
    font-family: var(--font-plain);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

#sidebar input,
#sidebar select,
.sidebar input,
.sidebar select {
    border: 0;
    border-bottom: 2px solid var(--rule-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    box-shadow: none;
}

#sidebar input:focus-visible,
#sidebar select:focus-visible,
.sidebar input:focus-visible,
.sidebar select:focus-visible {
    border-bottom-color: var(--spot);
    outline: 3px solid var(--spot);
    outline-offset: 3px;
}

button,
.btn {
    border-radius: 0;
    font-family: var(--font-plain);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
}

.btn-primary,
#create-grid-btn,
#save-btn {
    background: var(--spot);
    border: 0;
    color: #fff;
}

.btn-primary:hover,
#create-grid-btn:hover,
#save-btn:hover {
    background: var(--spot-deep);
}

.btn-secondary,
#load-btn,
#clear-btn,
#export-btn,
#print-btn,
#new-plot-btn,
#rename-plot-btn,
#delete-plot-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
}

.btn-secondary:hover,
#load-btn:hover,
#export-btn:hover,
#print-btn:hover {
    border-color: var(--spot);
    color: var(--spot);
}

/*
 * Plot statistics: four figures that were four tinted tiles. They are a short
 * ruled table, because that is what four related numbers are.
 */
#grid-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

#grid-stats > * {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0.4rem 0;
    border-top: 1px solid var(--rule);
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---------------------------------------------------- the sowing chart */

/*
 * Neither stylesheet defined a visually-hidden class, so the chart's month names
 * and cell labels would have printed on the page. Defined here, clip-path
 * rather than display:none so they are still read out.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sowing-chart {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.chart-months th {
    color: var(--muted);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0;
    border-bottom: 2px solid var(--spot);
    text-align: center;
}

.chart-months th:first-child {
    width: 38%;
    border-bottom-color: var(--spot);
}

.chart-row th {
    text-align: left;
    font-family: var(--font-plain);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.3rem 0.75rem 0.3rem 0;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-count {
    color: var(--muted);
    font-family: var(--font-figure);
    font-size: 0.75rem;
    font-weight: 400;
}

.chart-row td {
    border-bottom: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    padding: 0;
    height: 1.5rem;
}

.chart-cell {
    display: block;
    width: 100%;
    height: 1.5rem;
}

/*
 * Sow, harvest and both. The two singles are a solid fill in each ink; the
 * overlap is a stripe of the two rather than a third colour, so it reads as
 * both rather than as a separate category, and it survives a mono print.
 */
.chart-cell.is-sow {
    background: var(--spot);
}

.chart-cell.is-harvest {
    background: var(--band);
}

.chart-cell.is-both {
    background: repeating-linear-gradient(
        45deg,
        var(--spot) 0 4px,
        var(--band) 4px 8px
    );
}

.chart-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.9rem;
    font-family: var(--font-plain);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.chart-key-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.chart-key .chart-cell {
    width: 1.5rem;
    height: 0.8rem;
}

.schedule-empty {
    color: var(--muted);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------- focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--spot);
    outline-offset: 2px;
}

.site-nav a:focus-visible,
.masthead a:focus-visible,
footer a:focus-visible,
.editorial-footer a:focus-visible {
    outline-color: #fff;
}

/* -------------------------------------------------------------- footer */

footer,
.editorial-footer {
    background: var(--band);
    border-top: 4px solid var(--spot);
    color: #fff;
    margin-top: clamp(2rem, 5vw, 4rem);
}

footer a,
.editorial-footer a {
    color: #fff;
}

/* --------------------------------------------------------------- print */

/*
 * The plot gets printed and taken outside, which the toolbar already has a
 * button for. Everything that is not the plot comes off.
 */
@media print {
    .site-nav,
    .top-nav,
    #sidebar,
    .sidebar,
    footer,
    .editorial-footer,
    .book-plug,
    .adsbygoogle {
        display: none !important;
    }

    .masthead {
        background: none;
        color: #000;
        border-bottom: 2px solid #000;
    }

    .masthead h1,
    .masthead-kicker,
    .masthead-standfirst {
        color: #000;
        opacity: 1;
    }
}

/* ------------------------------------------------------ page furniture */

/*
 * Nine pages put the hero straight on the body as a div, and the safety net
 * in site.css only reaches body > section and body > article. Below 600px the
 * standfirst ran edge to edge with no gutter at all.
 */
body > .hero {
    width: 100%;
    max-width: var(--page, 68rem);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200;
    transform: translateY(-120%);
    background: var(--band);
    color: var(--kraft);
    padding: 0.7rem 1.15rem;
    font-family: var(--font-plain);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--spot);
    outline-offset: 2px;
}

/* --------------------------------------------- the grid, from a keyboard */

/*
 * Rows exist so the grid reports a shape to assistive tech. display: contents
 * keeps the cells as direct children of the CSS grid, so the layout is the
 * one it always was.
 */
.grid-row {
    display: contents;
}

.grid-cell:focus-visible {
    outline: 3px solid var(--spot);
    outline-offset: -3px;
    z-index: 20;
}

/* ------------------------------------------------------- the plant lists */

/*
 * The entries were divs with click handlers, so nothing in either list could
 * be reached without a mouse. They are buttons now, which needs the button
 * defaults taking back off.
 */
button.plant-item {
    font: inherit;
    color: inherit;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

button.plant-item .plant-color,
button.plant-item .plant-name,
button.plant-item .plant-type {
    display: block;
}

button.plant-item .plant-color {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.plant-list-empty {
    text-align: center;
    color: var(--muted);
    padding: 2rem;
    margin: 0;
}

/*
 * The close control and the cookie control were a span and a link to "#".
 * Both are buttons now, so the button chrome comes back off and they keep the
 * look they had.
 */
button.modal-close {
    background: none;
    border: 0;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.cookie-settings {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
}

.cookie-settings:hover {
    color: var(--spot);
    text-decoration: underline;
}

/*
 * The closing panel on the guide and the FAQs.
 *
 * Its background named var(--primary), which is defined nowhere, so the whole
 * declaration was dropped and the panel rendered as white type on the page
 * ground: 1.04:1, invisible. styles.css now names the colour that exists, and
 * the ground is set here in the packet's own language rather than the green
 * gradient, which would be the only gradient left on the site.
 *
 * Kraft on the band measures 9.47:1.
 */
.faq-cta {
    background: var(--band);
    color: var(--kraft);
    border-radius: 0;
    border-top: 4px solid var(--spot);
}

.faq-cta h2 {
    color: var(--kraft);
}

.faq-cta p {
    color: var(--kraft);
    opacity: 1;
}

/* ------------------------------------------------------------ brand mark */

/*
 * The mark is not an icon from the shared set and never will be, so it does
 * not carry svg.icon: the design build refreshes those from a registry and
 * would rewrite this one back to whatever it holds. Same sizing and weight,
 * its own class.
 */
.brand-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.brand-mark-lg {
    width: 1.35em;
    height: 1.35em;
}