/*
    Mint Wash — the light theme (direction C of the theme study)

    The sheet keeps the colour and *today* becomes the clean white page, which is the
    inverse of how the dark build works: there the week is dark and today is the lighter
    green. Every rule that repaints something is scoped under `.theme-mint` on <html>, so
    style.css is never edited and the dark build stays exactly what it was — the whole
    change is one `git revert` wide.

    The class is stamped in the <head> before first paint (layout.html.twig); adding it on
    DOMContentLoaded would show a frame of the dark theme first.

    Three things style.css does that do not survive a light ground, and what replaces them:

      · hierarchy is opacity  white text at .5, completed at .2. On mint that fades toward
                              the page, and a done task at 20% is invisible rather than
                              quiet. Every level becomes an explicit ink token below;
                              opacity is left to hover and to the nav chrome only.

      · the sheet is a PNG    top-bg-days_v2.png / bottom-bg-days_v2.png stretched
                              100% 100%, with nothing in them to recolour. Both become
                              gradients, and so does the ruled grid: img/line.png is a 1x31
                              tile with its line on the first row, which is exactly the
                              31px row pitch, so a repeating-linear-gradient reproduces it
                              pixel for pixel.

      · alarm is a glow       the overdue badge pulses an outer red halo — legible on a dark
                              column, a smudge on white. The pulse moves into the ring and
                              the fill, and the text darkens to #A93027 so a passed deadline
                              still reads as an alarm at 10px.

    No new image assets. The sprites that stay on the green header band (menu.png,
    log-out.png, arrow-lang.png) are still white-on-green and need nothing; the
    ones that end up on the mint sheet — the navigation arrows in arrow.png / arrow_.png —
    are inverted rather than redrawn. images/icons.png is already coloured discs with white
    glyphs, so it reads on either ground untouched.

    The account drawer, the jQuery UI dialogs, the intro.js tour and the undo panel are all
    green overlays that sit *above* the sheet rather than on it; they are deliberately left
    alone, exactly as they are in the dark build.
*/

/*
                    theme toggle (both themes)
*/
/* Not scoped: the button lives in the header in the dark build too, where it sits on
   #112328 rather than on the green band. Translucent white works on both.

   position:relative is load-bearing, not cosmetic. header:before is an absolutely
   positioned 10%-black wash over the full height of the band, and a positioned element
   paints above static in-flow content however early it sits in the DOM — so it swallows
   every click aimed at a float underneath it. That is why .wrap-lang and .menu-btn are
   both position:relative in style.css. Making the button positioned puts it in the same
   layer, where being later in the DOM wins.

   Under .theme-mint that wash is re-used as a 1px hairline and stops covering anything,
   so the bug this avoids only ever showed on the way *back* from dark to light. */
.theme-toggle {
    position: relative;
    float: right;
    width: 31px;
    height: 31px;
    margin: 18px 16px 0 0;
    padding: 0;
    border: 0;
    border-radius: 100%;
    line-height: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    -webkit-transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.theme-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.theme-toggle:focus {outline: 0;}
.theme-toggle:focus-visible {outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px;}

/* 31px is under any usable touch minimum, and the ring is the whole target - there is no
   larger box around it to grow instead. Below the tablet tier it simply becomes 44.

   This lives here rather than in style.css's phone block with the rest of the header work,
   because the button is declared here and this file loads second: the same rule over there
   has the same specificity and loses. */
@media only screen and (max-width: 599px) {
    /* centred in a 56px band, which is what the phone header comes down to */
    .theme-toggle {width: 44px; height: 44px; margin: 6px 4px 0 0;}
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
    .theme-toggle {width: 44px; height: 44px; margin: 11px 10px 0 0;}
}

.theme-toggle-icon {
    display: none;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Keyed on the *mode* rather than on .theme-mint: in auto the resolved theme is either one,
   and the glyph has to say "following the system" instead of naming a colour. The half-lit
   disc is auto, the sun is pinned light, the moon is pinned dark. layout.html.twig ships
   data-sw-theme="auto" on <html> so one icon still shows if the script never runs. */
[data-sw-theme="auto"] .theme-toggle-auto,
[data-sw-theme="light"] .theme-toggle-sun,
[data-sw-theme="dark"] .theme-toggle-moon {display: block;}

/*
                    tokens
*/
.theme-mint {
    --sw-band-top: #0f5c3a;
    --sw-band-bottom: #17724a;
    --sw-sheet-top: #eaf4ec;
    --sw-sheet-bottom: #e4f0e7;
    --sw-perm: #dfede3;
    --sw-current: #ffffff;

    --sw-ink: #123024;
    --sw-mute: #4f6a5b;
    --sw-faint: #93ac9d;

    --sw-rule: #d3e4d8;
    --sw-div: #cbdfd1;

    --sw-badge-bg: #deebe1;
    --sw-badge-ink: #5c7566;
    --sw-badge-ring: #cde0d3;

    --sw-soon-bg: #f8ebd3;
    --sw-soon-ink: #8a5906;
    --sw-soon-ring: #e2c48a;

    --sw-over-bg: #f8e1dd;
    --sw-over-ink: #a93027;
    --sw-over-ring: #e7ada4;

    --sw-gmark: #3563c6;
    --sw-rec: #0c6e88;

    --sw-lift: 0 1px 2px rgba(18, 48, 36, 0.05), 0 14px 34px -20px rgba(18, 48, 36, 0.4);
}

/*
                    ground
*/
.theme-mint body {color: var(--sw-ink); background: var(--sw-sheet-bottom);}

/*
                    header + footer
*/
.theme-mint header {
    background: -webkit-linear-gradient(top, var(--sw-band-top), var(--sw-band-bottom));
    background: linear-gradient(180deg, var(--sw-band-top), var(--sw-band-bottom));
}
/* header:before is a full-bleed 10% black wash over the PNG. The gradient is already the
   exact colour it should be, so the pseudo-element is re-used as the hairline that keeps
   the band from bleeding into the sheet below it. */
.theme-mint header:before {top: auto; bottom: 0; height: 1px; opacity: 1; background: rgba(9, 42, 27, 0.4);}

/* logo0000.png is white "Simple" + #1cbd6c "Week". That green was picked against a
   near-black band and goes muddy on a green one; lifting and desaturating the whole sprite
   lands "Week" near #49d28d while white — already clipped — stays white. */
.theme-mint header .logo img {-webkit-filter: brightness(1.18) saturate(0.72); filter: brightness(1.18) saturate(0.72);}

.theme-mint footer {
    background: -webkit-linear-gradient(top, var(--sw-band-bottom), var(--sw-band-top));
    background: linear-gradient(180deg, var(--sw-band-bottom), var(--sw-band-top));
}
.theme-mint footer .footer-menu li a {opacity: 0.55;}
.theme-mint footer .footer-menu li a:hover {opacity: 0.9;}
.theme-mint footer .footer-menu li.version {color: rgba(255, 255, 255, 0.5);}
.theme-mint .soc-list li {color: rgba(255, 255, 255, 0.5);}

/* The switcher sits on the light band, where the dark build's black wash reads as a
   smudge and its muted text is too low-contrast. Same shape, warmer well, brighter text.
*/
.theme-mint header .workspace-switcher {background: rgba(9, 42, 27, 0.22);}
.theme-mint header .workspace-segment .workspace-name {color: rgba(255, 255, 255, 0.78);}
.theme-mint header .workspace-segment.active .workspace-name {color: #fff;}
.theme-mint header .workspace-segment.active {background: rgba(255, 255, 255, 0.22);}
.theme-mint header .workspace-segment .workspace-shortcut {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(9, 42, 27, 0.28);
}
.theme-mint header .workspace-segment .edit-workspace-name {color: rgba(255, 255, 255, 0.6);}
.theme-mint header .workspace-segment .edit-workspace-name:hover {color: #fff;}

/* The language dropdown hangs off the header, so it wants the band's warm green rather
   than the cold near-black it uses over the dark build. */
.theme-mint .lang-list li {background: var(--sw-ink);}
.theme-mint .lang-list li:hover {background: var(--sw-band-bottom);}

/*
                    the sheet
*/
.theme-mint .top-wrap {
    background: -webkit-linear-gradient(top, var(--sw-sheet-top), var(--sw-sheet-bottom));
    background: linear-gradient(180deg, var(--sw-sheet-top), var(--sw-sheet-bottom));
}
.theme-mint .bottom-wrap {background: var(--sw-perm); border-top: 1px solid var(--sw-div);}

/* Today is the clean page. The lift is the one thing here the token table does not
   describe: flat white against #eaf4ec is only a 4% step, and the shadow is what makes it
   read as a sheet of paper on top of the wash rather than a slightly paler column. */
.theme-mint .content-calendar section.current {background: var(--sw-current); box-shadow: var(--sw-lift);}
.theme-mint .calendar-scroll-wrap > section {border-left-color: var(--sw-div);}

.theme-mint .top-wrap h2, .theme-mint .bottom-wrap h2 {color: var(--sw-ink);}
.theme-mint .top-wrap h2 + p, .theme-mint .bottom-wrap h2 + p {opacity: 1; color: var(--sw-mute);}
.theme-mint .bottom-wrap h2 + input[type="text"] {color: var(--sw-ink);}
.theme-mint .bottom-wrap .column-buttons {color: var(--sw-faint);}
.theme-mint .bottom-wrap .column-buttons .fa-pencil:hover {color: var(--sw-mute);}

/* img/line.png is one transparent 1x31 column with white at 20% on its first row. Same
   pitch, same phase — the line sits at the top of each 31px band. */
.theme-mint .rules {
    background: repeating-linear-gradient(180deg, var(--sw-rule) 0, var(--sw-rule) 1px, transparent 1px, transparent 31px);
}
.theme-mint #permanent-wrapper .rules {
    background: repeating-linear-gradient(180deg, var(--sw-div) 0, var(--sw-div) 1px, transparent 1px, transparent 31px);
}
/* One rule colour cannot serve both grounds: #d3e4d8 is a soft line on the #eaf4ec wash and
   a hard one on today's white page, where it reads cooler and louder than its neighbours.
   The lighter tone puts the same perceived weight on white. */
.theme-mint .content-calendar section.current .rules {
    background: repeating-linear-gradient(180deg, #e3efe7 0, #e3efe7 1px, transparent 1px, transparent 31px);
}

/*
                    task rows
*/
.theme-mint .calendar-scroll-wrap .list-todo li, .theme-mint .ui-sortable-helper {border-top-color: var(--sw-rule);}
.theme-mint .calendar-scroll-wrap section.current .list-todo li {border-top-color: var(--sw-badge-ring);}

.theme-mint .calendar-scroll-wrap .list-todo li p, .theme-mint .ui-sortable-helper p {opacity: 1; color: var(--sw-mute);}
/* Gated for the same reason as its counterpart in style.css: :hover sticks to the last
   thing a finger touched, so on a phone the tapped row alone would sit at full ink. */
@media (hover: hover) {
    .theme-mint .calendar-scroll-wrap .list-todo li:hover p, .theme-mint .ui-sortable-helper:hover p {opacity: 1; color: var(--sw-ink);}
}
.theme-mint .calendar-scroll-wrap .list-todo li p.through, .theme-mint .ui-sortable-helper p.through {opacity: 1; color: var(--sw-faint);}
@media (hover: hover) {
    .theme-mint .calendar-scroll-wrap .list-todo li:hover p.through, .theme-mint .ui-sortable-helper:hover p.through {color: var(--sw-faint);}
}
.theme-mint .calendar-scroll-wrap .list-todo li p.repeat_week, .theme-mint .ui-sortable-helper p.repeat_week {color: var(--sw-rec);}

/* Task links are white in the dark build. Inheriting keeps them on whatever level the row
   is at, so a link in a completed task fades with the rest of it instead of staying loud. */
.theme-mint .todo-text a, .theme-mint .recurring .todo-text a {color: inherit;}

.theme-mint .description-dott {opacity: 1; color: var(--sw-faint);}
.theme-mint .through .description-dott {opacity: 1; color: #bacfc1;}

/* The blue is dark enough on mint that the halo it needed against the dark column is only
   noise; the bar carries it on its own. */
.theme-mint .google-event-mark {background: var(--sw-gmark); box-shadow: none; opacity: 0.8;}
.theme-mint .through .google-event-mark, .theme-mint .todo-wrapper.through .google-event-mark {opacity: 0.3;}

/* Long titles expand into a card on hover. #14292f is a hole in the page here; white with a
   ring and a shadow keeps the row legible on the mint sheet *and* on the white column,
   where a plain white card would have no edge at all. */
@media (hover: hover) {
    .theme-mint .calendar-scroll-wrap .list-todo li:hover .text-wrap.long,
    .theme-mint .ui-sortable-helper:hover .text-wrap.long {
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--sw-rule), var(--sw-lift);
    }
}

/* The input you type a new task straight into on a row, and its inline-edit twin. Both are
   `color: #fff` over `background: none`, so on the sheet they are white on mint and on
   today's column they are white on white — you cannot see what you are typing at all.
   Not the same element as the dialog's input, which carries its colour inline. */
.theme-mint .new-todo-input, .theme-mint .edit-input {color: var(--sw-ink);}
.theme-mint .new-todo-input::-webkit-input-placeholder, .theme-mint .edit-input::-webkit-input-placeholder {color: var(--sw-faint);}
.theme-mint .new-todo-input::-moz-placeholder, .theme-mint .edit-input::-moz-placeholder {color: var(--sw-faint);}

.theme-mint .sortable-ghost {border-color: var(--sw-band-bottom) !important;}
.theme-mint .todos-list .sortable-ghost p {color: var(--sw-ink) !important;}

/*
                    due dates
*/
.theme-mint .due-date-mark {
    background: var(--sw-badge-bg);
    color: var(--sw-badge-ink);
    box-shadow: inset 0 0 0 1px var(--sw-badge-ring);
}
.theme-mint .due-date-mark--soon {
    background: var(--sw-soon-bg);
    color: var(--sw-soon-ink);
    box-shadow: inset 0 0 0 1px var(--sw-soon-ring);
}
.theme-mint .due-date-mark--overdue {
    background: var(--sw-over-bg);
    color: var(--sw-over-ink);
    box-shadow: inset 0 0 0 1px var(--sw-over-ring);
    -webkit-animation: dueOverduePulseLight 2.6s ease-in-out infinite;
    animation: dueOverduePulseLight 2.6s ease-in-out infinite;
}
.theme-mint .due-date-mark--done,
.theme-mint .through .due-date-mark,
.theme-mint .todo-wrapper.through .due-date-mark {
    background: #e9f2eb;
    color: #a7bdaf;
    box-shadow: none;
    -webkit-animation: none;
    animation: none;
}

/* Same beat as dueOverduePulse, no outer glow: the ring tightens and the fill deepens. */
@-webkit-keyframes dueOverduePulseLight {
    0%, 100% {background: #f8e1dd; box-shadow: inset 0 0 0 1px #e7ada4;}
    50% {background: #f5d3cd; box-shadow: inset 0 0 0 1px #d68c81;}
}
@keyframes dueOverduePulseLight {
    0%, 100% {background: #f8e1dd; box-shadow: inset 0 0 0 1px #e7ada4;}
    50% {background: #f5d3cd; box-shadow: inset 0 0 0 1px #d68c81;}
}

/* The dark build dims an overdue title to .75 so the red does not shout. On mint the red is
   dark enough to sit at full strength, and dimming it would only muddy the hue. */
.theme-mint .calendar-scroll-wrap .list-todo li.due-overdue p.todo-text {opacity: 1; color: var(--sw-over-ink);}
.theme-mint .calendar-scroll-wrap .list-todo li.due-overdue:hover p.todo-text {color: var(--sw-over-ink);}
.theme-mint .calendar-scroll-wrap .list-todo li.due-overdue p.todo-text.through {color: var(--sw-faint);}

/*
                    navigation arrows
*/
/* arrow.png is a white plate in its top half and a green one in its bottom, which is what
   the :hover background-position swaps to. So the resting plate is inverted to read as a
   soft gutter shadow on the sheet, and the hover state drops the filter to let the brand
   green through untouched — inverting *that* would land on magenta. */
.theme-mint .navigation-arrow a.prev:after, .theme-mint .navigation-arrow a.next:after {
    -webkit-filter: invert(1); filter: invert(1); opacity: 0.07;
}
@media (hover: hover) {
    .theme-mint .navigation-arrow a.prev:hover:after, .theme-mint .navigation-arrow a.next:hover:after {
        -webkit-filter: none; filter: none; opacity: 1;
    }
}
/* The chevron is white: dark on the mint sheet at rest, and back to white once the green
   plate is under it. */
.theme-mint .navigation-arrow a.prev:before, .theme-mint .navigation-arrow a.next:before {
    -webkit-filter: invert(1); filter: invert(1); opacity: 0.45;
}
@media (hover: hover) {
    .theme-mint .navigation-arrow a.prev:hover:before, .theme-mint .navigation-arrow a.next:hover:before {
        -webkit-filter: none; filter: none;
    }
}
.theme-mint .navigation-arrow a.begin,
.theme-mint .navigation-arrow a.end,
.theme-mint .navigation-arrow a.home-link,
.theme-mint .navigation-arrow .picker {
    -webkit-filter: invert(1); filter: invert(1); opacity: 0.4;
}
@media (hover: hover) {
    .theme-mint .navigation-arrow a.begin:hover,
    .theme-mint .navigation-arrow a.end:hover,
    .theme-mint .navigation-arrow a.home-link:hover,
    .theme-mint .navigation-arrow .picker:hover {opacity: 0.85;}
}

.theme-mint .bullets li > a {border-color: var(--sw-ink); opacity: 0.35;}
@media (hover: hover) {
    .theme-mint .bullets li > a:hover:after {background: var(--sw-ink);}
}
.theme-mint .bullets li.active > a, .theme-mint .bullets li.selected > a {opacity: 1; background: var(--sw-ink);}
.theme-mint .bullets li.disable > a {opacity: 0.15;}

/*
                    create / edit dialog
*/
/* The dialog is a card on the page rather than a hole in it. Its two 10px end-caps are
   separate pseudo-elements, so all three carry the same fill and the same shadow — their
   top edges line up, which makes the shadow underneath continuous. */
.theme-mint .calendar-scroll-wrap .list-todo .dialog,
.theme-mint .calendar-scroll-wrap .list-todo .dialog:after,
.theme-mint .calendar-scroll-wrap .list-todo .dialog:before {
    background: #fff;
    box-shadow: 0 10px 28px -14px rgba(18, 48, 36, 0.45);
}
.theme-mint .calendar-scroll-wrap .list-todo .dialog li p {opacity: 1; color: var(--sw-mute);}
.theme-mint .calendar-scroll-wrap .list-todo .dialog:hover li p {opacity: 1;}
.theme-mint .calendar-scroll-wrap .list-todo .dialog:hover li p.with-input:hover {opacity: 1;}
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .time-block input {color: var(--sw-ink);}

/* The task input and the description textarea carry `color: #fff` as an inline style from
   the templates, which no ordinary rule can reach. */
.theme-mint .dialog .dialog-new-todo-input, .theme-mint .dialog textarea {color: var(--sw-ink) !important;}
.theme-mint .dialog textarea::-webkit-input-placeholder {color: var(--sw-faint);}
.theme-mint .dialog textarea::-moz-placeholder {color: var(--sw-faint);}

/* The bell and repeat glyphs come out of the same white arrow_.png sprite as the nav. */
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .remember-string:before,
.theme-mint .calendar-scroll-wrap .list-todo .dialog li .repeat-string:before {
    -webkit-filter: invert(1); filter: invert(1); opacity: 0.55;
}

.theme-mint .dialog-due-date-input {
    border-color: var(--sw-badge-ring);
    background: #f5faf6;
    color: var(--sw-ink);
    color-scheme: light;
}
.theme-mint .dialog-due-date-input:focus {border-color: #4fae82;}
.theme-mint .due-date-clear {color: var(--sw-mute); opacity: 0.5;}
.theme-mint .due-date-clear:hover {opacity: 1;}

/* The frequency dropdown. select2 appends its list to <body>, so it cannot be scoped by
   ancestor — but the account drawer's copy of it only exists while body.menu-opened is
   set, and that one stays green. */
.theme-mint .dialog .select2-container .select2-choice {color: var(--sw-mute);}
.theme-mint .dialog .select2-container .select2-choice .select2-arrow b {border-top-color: var(--sw-faint);}
.theme-mint body:not(.menu-opened) .select2-drop,
.theme-mint body:not(.menu-opened) .select2-drop-active,
.theme-mint body:not(.menu-opened) .select2-drop.select2-drop-above.select2-drop-active {
    color: var(--sw-mute);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--sw-rule), 0 10px 28px -14px rgba(18, 48, 36, 0.45);
}
.theme-mint body:not(.menu-opened) .select2-results li {opacity: 1;}
.theme-mint body:not(.menu-opened) .select2-results .select2-result-label {border-top-color: #e6f0e9;}
.theme-mint body:not(.menu-opened) .select2-results .select2-highlighted .select2-result-label {color: var(--sw-band-bottom);}

/* Checklists. The badge borrows the deadline badge's neutral pill so two marks on one row
   read as a pair, and takes a softer green than the accent used for "soon" and "overdue" —
   a checklist is progress, not a warning. The fill is a shade of the pill rather than a
   colour of its own: it has to stay quiet enough to read the count over. */
.theme-mint .checklist-mark {
    background: #dcefe3;
    color: #2f7a55;
    box-shadow: inset 0 0 0 1px #c2ddcc;
}
.theme-mint .checklist-mark--full {
    background: #cbe9d7;
    color: #1f6242;
    box-shadow: inset 0 0 0 1px #a9d5ba;
}
.theme-mint .through .checklist-mark,
.theme-mint .todo-wrapper.through .checklist-mark {
    background: #e9f2eb;
    color: #a7bdaf;
    box-shadow: none;
}
.theme-mint .checklist-mark-fill {background: #bfe3ce;}
.theme-mint .checklist-mark--full .checklist-mark-fill {background: #b3ddc4;}
.theme-mint .through .checklist-mark .checklist-mark-fill,
.theme-mint .todo-wrapper.through .checklist-mark .checklist-mark-fill {background: #dfeae2;}

/* The dialog is a light panel in this theme, so the editor's boxes and text follow the
   sheet's ink rather than the white the dark theme writes on the green column. */
.theme-mint .dialog .dialog-checklist-input {color: var(--sw-ink);}
.theme-mint .dialog .dialog-checklist-box {box-shadow: inset 0 0 0 1px var(--sw-badge-ring); background: #f5faf6;}
.theme-mint .dialog .dialog-checklist-box:hover {box-shadow: inset 0 0 0 1px #8fbfa2;}
.theme-mint .dialog .dialog-checklist-row.done .dialog-checklist-box {background: #4fae82; box-shadow: none;}
.theme-mint .dialog .dialog-checklist-row.done .dialog-checklist-box:after {border-color: #fff;}
.theme-mint .dialog .dialog-checklist-remove {color: var(--sw-mute); opacity: 0.5;}
.theme-mint .dialog .dialog-checklist-remove:hover {opacity: 1;}
.theme-mint .dialog .checklist-add {color: #2f7a55;}

/*
                    phone portrait

   Rows are 41px there, so style.css hides .rules - a 31px tile - and paints the ruled grid
   on the list itself at the row's pitch. That is a `background`, which means it replaces
   the mint one wholesale rather than tinting it, so each grid the desktop draws needs
   saying again here at the phone's pitch.

   `#calendar` and `#permanent-wrapper` are in the selectors because style.css paints
   through those ids, and an id is what it takes to answer one.

   The day board is the white page here, rather than one column of it.

   On a desktop the white page is how *today* is picked out of five columns standing side
   by side. A phone shows one day, so there is nothing to pick it out from - and the card
   cost something real: `.top-wrap` keeps its last 199px clear so the fixed strip and the
   floating add button have somewhere to be, and a card sized to its own content stops at
   the tenth ruled line and hands that clearance back to the wash. What you saw was a white
   sheet ending a fifth of the way up the screen and a band of mint under it, edged by the
   card's own lift - a card on a page on a floor, three grounds in a screen that has one
   thing on it.

   So the page runs to the strip: the white moves onto `.top-wrap`, which is already
   `100vh - 56px` tall with the clearance inside it, and the card and its shadow come off.
   Two grounds left - the page, and the green floor the strip is - with the hairline on
   `.phone-shell` between them.

   What said "today" is not lost with the card. The chip for the day you are on is the same
   white page in miniature, today's chip is the bold one, and the heading is the date
   itself; on a board of one day those are the things being read anyway.

   The rules go with the ground. #d3e4d8 is a soft line on the mint wash and a hard one on
   white, so the lighter tone that was today's alone is now every day's - the same swap the
   desktop makes per column, made once for the board.
*/
@media only screen and (max-width: 599px) {
    .theme-mint .top-wrap {background: var(--sw-current);}
    .theme-mint .content-calendar section.current {background: none; box-shadow: none;}

    .theme-mint #calendar .list-todo {
        background: repeating-linear-gradient(180deg,
            #e3efe7 0, #e3efe7 1px, transparent 1px, transparent 44px);
    }
    .theme-mint #permanent-wrapper .list-todo {
        background: repeating-linear-gradient(180deg,
            var(--sw-div) 0, var(--sw-div) 1px, transparent 1px, transparent 44px);
    }
}

/*
                    the phone shell (<= 599)

   The mint half of the strip under the thumb, the chips in it and the task sheet. The shape
   of all three is in style.css; what is here is only what a light ground changes, which is
   colour - with one exception: the sheet's grip and its shadow, which the mint dialog rules
   above would otherwise win with a white-on-white grip and a shadow drawn for a card that
   floats rather than a sheet that is anchored to the bottom edge.

   The dark build paints this chrome on #14292f, the same near-black the language dropdown
   and the task dialog use. On mint it is the permanent board's own green - the strip is the
   floor of the page, not a panel over it.
*/
@media only screen and (max-width: 599px) {
    .theme-mint .phone-shell {background: var(--sw-perm); border-top-color: var(--sw-div);}
    .theme-mint .phone-tabs {border-top-color: var(--sw-div);}

    .theme-mint .phone-week .phone-day-date {opacity: 1; color: var(--sw-faint);}
    .theme-mint .phone-week .phone-day-name {opacity: 1; color: var(--sw-mute);}
    /* Today is the white page on this theme, and the chip for the day you are on is the
       same page in miniature - the lift is what tells it from the wash behind it, exactly as
       it does for the column itself. */
    .theme-mint .phone-week .phone-day.active {background: var(--sw-current); box-shadow: var(--sw-lift);}
    .theme-mint .phone-week .phone-day.active .phone-day-date {color: var(--sw-mute);}
    .theme-mint .phone-week .phone-day.active .phone-day-name {color: var(--sw-ink);}

    .theme-mint .phone-pager .phone-page > a {border-color: var(--sw-faint); opacity: 1;}
    .theme-mint .phone-pager .phone-page.active > a,
    .theme-mint .phone-pager .phone-page.selected > a {background: var(--sw-ink); border-color: var(--sw-ink);}

    .theme-mint .phone-tab {color: var(--sw-mute);}
    .theme-mint .phone-tab.active {background: var(--sw-rule); color: var(--sw-ink);}
    .theme-mint .phone-tab:focus-visible {outline-color: var(--sw-band-bottom);}
    .theme-mint .phone-tab-menu {
        background: -webkit-linear-gradient(var(--sw-mute), var(--sw-mute));
        background: linear-gradient(var(--sw-mute), var(--sw-mute));
        background-size: 18px 2px; background-position: 50% 27px; background-repeat: no-repeat;
    }
    .theme-mint .phone-tab-menu:before, .theme-mint .phone-tab-menu:after {background: var(--sw-mute);}

    .theme-mint .phone-add {background: var(--sw-band-bottom); box-shadow: var(--sw-lift);}

    /* the sheet */
    .theme-mint .calendar-scroll-wrap .list-todo .dialog {
        box-shadow: 0 1px 2px rgba(18, 48, 36, 0.05), 0 -18px 40px -22px rgba(18, 48, 36, 0.5);
    }
    .theme-mint .calendar-scroll-wrap .list-todo .dialog:before {background: var(--sw-rule);}
    .theme-mint .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn.save {background-color: var(--sw-band-bottom);}
    .theme-mint .calendar-scroll-wrap .list-todo .dialog .btn-wrap-task .btn.delete {
        color: var(--sw-over-ink); background-color: transparent;
        box-shadow: inset 0 0 0 1px var(--sw-over-ring);
    }

    /* The sheet's rows are bands with a hairline between them and a 24px tick-box at the
       head of each checklist row (see the sheet block in style.css). Both are written there
       in white-on-dark, and both have to be said again here: a rule at 9% white and a ring at
       28% are not there at all on a white sheet. The geometry is not repeated - only the
       colour, which is what this file is for. */
    .theme-mint .calendar-scroll-wrap .list-todo .dialog > ul > li {border-top-color: var(--sw-rule);}
    .theme-mint .calendar-scroll-wrap .list-todo .dialog li .label,
    .theme-mint .calendar-scroll-wrap .list-todo .dialog li .repeat-string {color: var(--sw-mute);}
    .theme-mint .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-box {
        box-shadow: inset 0 0 0 2px var(--sw-badge-ring);
    }
    .theme-mint .calendar-scroll-wrap .list-todo .dialog .dialog-checklist-row.done .dialog-checklist-box {
        box-shadow: none;
    }

    .theme-mint .phone-sheet-scrim {background: rgba(18, 48, 36, 0.38);}
}