/* The changes page (templates/changes.html). Classes start with cg- so they
   never collide with site CSS. Every color comes from the scheme tokens. */
.cg {
    /* Secondary text that stays at AA on the page and panel grounds. */
    --meta: color-mix(in srgb, var(--text) 40%, var(--text-dim));
    /* the height of what stays at the top of a phone, for anchor jumps */
    --cg-top: 0px;
    display: flex; flex-direction: column; gap: 26px;
    width: 100%; max-width: 980px; margin: 0 auto;
    font-size: 14.5px; line-height: 1.55; color: var(--text);
}
.cg p, .cg h1, .cg h2, .cg h3, .cg ol, .cg ul { margin: 0; padding: 0; }
.cg ol, .cg ul { list-style: none; }
.cg section { min-width: 0; }
.cg :focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.cg h2 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--text-bright); }
.cg .cg-head h1 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text-bright); text-wrap: balance; }
.cg .cg-head .cg-deck { margin-top: 6px; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--meta); text-wrap: pretty; }
.cg .cg-fine { font-size: 13px; line-height: 1.5; color: var(--meta); }
.cg-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); min-width: 0; }
.cg-sechead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; }
.cg .cg-none { padding: 26px 20px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; color: var(--meta); }

/* ---- the years ---- */
.cg-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.cg-tabs a {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--bg-secondary); font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none;
}
.cg-tabs a:hover { background: var(--bg-hover); color: var(--text-bright); }
.cg-tabs a[aria-current="page"] { border-color: var(--border-hover); background: var(--bg-active); color: var(--text-bright); font-weight: 700; }
.cg-tabs b { margin-left: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--meta); }

/* ---- the calendar of the year: a column a week, Monday at the top ---- */
.cg-cal { padding: 16px 18px 14px; }
.cg-cal-scroll { overflow-x: auto; padding: 2px 2px 4px; }
.cg-cal-grid { display: grid; grid-template-columns: 30px auto; grid-template-rows: 16px auto; row-gap: 4px; width: max-content; }
.cg-cal-ms { grid-column: 2; display: grid; column-gap: 3px; font-size: 11.5px; line-height: 16px; color: var(--meta); }
.cg-cal-ms span { white-space: nowrap; }
/* the names of the days stay in view while a narrow calendar scrolls */
.cg-cal-ws {
    grid-column: 1; grid-row: 2; position: sticky; left: 0; z-index: 1; display: grid; grid-template-rows: repeat(7, 12px); row-gap: 3px;
    background: var(--bg-secondary); font-size: 11px; line-height: 12px; color: var(--meta);
}
.cg-cal-cells { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.cg-cell { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--bg-active); }
.cg-cell.l1 { background: color-mix(in srgb, var(--accent) 32%, var(--bg-active)); }
.cg-cell.l2 { background: color-mix(in srgb, var(--accent) 55%, var(--bg-active)); }
.cg-cell.l3 { background: color-mix(in srgb, var(--accent) 78%, var(--bg-active)); }
.cg-cell.l4 { background: var(--accent); }
.cg-cell.is-pad { visibility: hidden; }
.cg-cell.is-later { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
.cg-cell.is-today { outline: 1px solid var(--highlight); outline-offset: 1px; }
a.cg-cell:hover { outline: 1px solid var(--text-bright); outline-offset: 1px; }
.cg .cg-cell:focus-visible { outline: 2px solid var(--highlight); outline-offset: 1px; }
.cg-cal-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; color: var(--meta); }
.cg-scale { display: inline-flex; align-items: center; gap: 3px; }
.cg-scale .cg-cell:first-child { margin-left: 4px; }
.cg-scale .cg-cell:last-of-type { margin-right: 4px; }

/* ---- a month of days: the date on the left, the changes on the right ---- */
.cg-days > li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px 20px; padding: 14px 18px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--cg-top) + 16px); }
.cg-days > li:first-child { border-top: 0; }
.cg-days > li:first-child:target { border-radius: 9px 9px 0 0; }
.cg-days > li:last-child:target { border-radius: 0 0 9px 9px; }
.cg-days > li:target { background: color-mix(in srgb, var(--highlight) 9%, transparent); box-shadow: inset 3px 0 0 var(--highlight); }
.cg-when { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: start; align-items: center; gap: 1px 4px; }
.cg .cg-date { font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.cg-wday { grid-column: 1 / -1; font-size: 12.5px; color: var(--meta); }
.cg-copy {
    appearance: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; min-width: 22px; margin: 0; padding: 0 4px;
    border: 1px solid transparent; border-radius: 5px; background: none; box-shadow: none;
    font: inherit; font-size: 12px; font-weight: 500; color: var(--meta); cursor: pointer; opacity: 0; transition: opacity var(--t-base);
}
.cg-copy svg { flex: none; width: 13px; height: 13px; }
.cg-copy:hover { border-color: var(--border); background: var(--bg-hover); color: var(--text-bright); }
.cg-days > li:hover .cg-copy, .cg-copy:focus-visible, .cg-copy.is-done, .cg-copy.is-fail { opacity: 1; }
.cg-copied { display: none; white-space: nowrap; }
.cg-copy.is-done, .cg-copy.is-fail { color: var(--text-bright); }
.cg-copy.is-done { color: var(--accent); }
.cg-copy.is-done .cg-copied, .cg-copy.is-fail .cg-copied { display: inline; }
@media (hover: none) { .cg-copy { opacity: 1; } }

/* the changes of a day */
.cg-list { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cg-list > li { position: relative; max-width: 78ch; padding-left: 15px; color: var(--text-bright); overflow-wrap: anywhere; text-wrap: pretty; }
.cg-list > li::before { content: ""; position: absolute; left: 1px; top: .64em; width: 5px; height: 5px; border-radius: 50%; background: var(--meta); }
.cg-list ul { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 13.5px; color: var(--text); }
.cg-list ul li { position: relative; padding-left: 14px; }
.cg-list ul li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 7px; height: 1px; background: var(--meta); }
.cg-list img { max-width: 100%; height: auto; }

/* the line over the newest day the reader has seen, as on the front page */
.cg-days > li.cg-last { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-top: 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.cg-last::before, .cg-last::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.cg-days > li.cg-last + li { border-top: 0; }

.cg-older { display: flex; justify-content: center; }

/* ---- narrow screens ---- */
@media (max-width: 860px) {
    .cg { --cg-top: 55px; }
}
@media (max-width: 700px) {
    .cg .cg-head h1 { font-size: 24px; }
    .cg-days > li { grid-template-columns: minmax(0, 1fr); padding: 13px 14px; }
    .cg-days > li.cg-last { padding: 9px 14px; }
    .cg-when { grid-template-columns: auto auto auto; gap: 0 8px; }
    .cg-wday { grid-column: 2; grid-row: 1; }
    .cg-when .cg-copy { grid-column: 3; grid-row: 1; }
    .cg-cal { padding: 14px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cg-copy { transition: none; } }