/* The grocery list, for one hand in a store aisle.
   One loud thing: section names sit on shelf-edge tags, the yellow strips
   prices hang on. Everything else stays quiet so the rows read fast. */

:root {
    color-scheme: light dark;
    --paper: #f6f7f2;
    --row: #ffffff;
    --ink: #1b1f1d;
    --soft: #646b66;
    --line: #dfe2da;
    --tag: #ffd23f;
    --tag-ink: #1b1f1d;
    --go: #1f7a4d;
    --go-ink: #ffffff;
    --stop: #b3261e;
    --tap: 56px;
    font:
        17px/1.4 system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #141714;
        --row: #1d211e;
        --ink: #eef0ea;
        --soft: #a3aba4;
        --line: #2e342f;
        --go: #4cc38a;
        --go-ink: #0d1a13;
        --stop: #ff8a80;
    }
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

button,
input {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--go);
    outline-offset: 2px;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.error {
    color: var(--stop);
    margin: 0;
}

/* ---------- sign in ---------- */

.signin {
    max-width: 24rem;
    margin: 0 auto;
    padding: 18vh 20px 40px;
}

.signin > p {
    color: var(--soft);
    margin: 8px 0 28px;
}

.signin form {
    display: grid;
    gap: 6px;
}

.signin label {
    font-weight: 600;
    margin-top: 10px;
}

.signin input {
    min-height: var(--tap);
    padding: 0 14px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--row);
}

.signin button {
    margin-top: 18px;
    min-height: var(--tap);
    border: 0;
    border-radius: 10px;
    background: var(--go);
    color: var(--go-ink);
    font-weight: 700;
}

.signin button:disabled {
    opacity: 0.6;
}

/* ---------- the list ---------- */

.list {
    max-width: 34rem;
    margin: 0 auto;
    /* Room for the add bar, which is fixed to the bottom edge. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: calc(18px + env(safe-area-inset-top)) 16px 10px;
}

.top h1 {
    margin-right: auto;
}

.edit {
    margin-right: -10px;
    padding: 0 10px;
    color: var(--ink);
    font-weight: 600;
}

.count {
    margin: 0;
    color: var(--soft);
    font-variant-numeric: tabular-nums;
}

.status,
.notice {
    margin: 0 16px 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.94rem;
}

.status {
    background: var(--line);
}

.notice {
    border: 2px solid var(--stop);
    color: var(--stop);
}

.empty {
    margin: 22vh 24px 0;
    text-align: center;
    color: var(--soft);
}

.empty strong {
    display: block;
    color: var(--ink);
    font-size: 1.25rem;
    margin-bottom: 4px;
}

/* A shelf-edge tag: flat yellow, squared at the left where it meets the
   shelf, cut at the right. */
.tag {
    display: inline-block;
    margin: 22px 0 6px;
    padding: 5px 18px 5px 16px;
    background: var(--tag);
    color: var(--tag-ink);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.rows {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--row);
    border-block: 1px solid var(--line);
}

.rows li + li {
    border-top: 1px solid var(--line);
}

/* The whole row is the target: a thumb does not aim for a checkbox. */
.item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--tap);
    padding: 8px 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.item:active {
    background: var(--paper);
}

.box {
    width: 26px;
    height: 26px;
    border: 2px solid var(--soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.item[aria-pressed="true"] .box {
    border-color: var(--go);
    background: var(--go);
}

.item[aria-pressed="true"] .box::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 3px solid var(--go-ink);
    border-bottom: 3px solid var(--go-ink);
    transform: translateY(-1px) rotate(-45deg);
}

.name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.item[aria-pressed="true"] .name {
    font-weight: 400;
    color: var(--soft);
    text-decoration: line-through;
}

.note {
    display: block;
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--soft);
}

.amount {
    font-variant-numeric: tabular-nums;
    color: var(--soft);
    white-space: nowrap;
}

/* Editing: the row is no longer a button, and Remove sits beside it. */
.editing {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.editing .item {
    cursor: default;
}

/* Nothing to tick here: the empty circle steps back. */
.editing .item:not(.bought) .box {
    opacity: 0.3;
}

.item.bought .box {
    border-color: var(--go);
    background: var(--go);
}

.item.bought .name {
    font-weight: 400;
    color: var(--soft);
    text-decoration: line-through;
}

.remove {
    min-height: var(--tap);
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--stop);
    font-weight: 600;
    cursor: pointer;
}

/* Not sent yet: the box is dashed until the database has it. */
.item.unsent .box {
    border-style: dashed;
}

/* ---------- in the cart ---------- */

.cart {
    margin-top: 30px;
}

.cart summary {
    padding: 12px 16px;
    min-height: 48px;
    color: var(--soft);
    font-weight: 600;
    cursor: pointer;
}

.foot {
    padding: 28px 16px 8px;
    text-align: center;
}

.quiet {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--soft);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- add ---------- */

.add {
    position: fixed;
    inset: auto 0 0 0;
    display: grid;
    grid-template-columns: 1fr 6.2rem auto;
    gap: 8px;
    max-width: 34rem;
    margin: 0 auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.add input {
    min-width: 0;
    min-height: 50px;
    padding: 0 12px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--row);
}

.add button {
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--go);
    color: var(--go-ink);
    font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
    .box {
        transition:
            background-color 120ms,
            border-color 120ms;
    }
}