/* The calm redesign (Oct 16, 2026): Greg's Today (today/today.js, next-step.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css.
   One hero (Do this next); everything under it is smaller and quieter. The old .gt-* rules in styles.css (round 5: dark bands, big
   capitals) are written over here, every selector starting .screen.gt so it wins over theirs. */

/* The top: the greeting is the big title (foundation), the date and today's weather under it, then when the jobs were updated. */
.screen.gt { gap: 16px; }
.screen.gt .st.gt-head { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
.screen.gt .gt-hw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.screen.gt .gt-hw .gt-hello { flex: none; }
/* The greeting in mixed case, as Home's (home.css: 800 1.875rem Barlow Condensed; styles.css makes a data-lt title capitals). */
.screen.gt .st h1.gt-hello[data-lt] { font: 800 1.875rem/1.05 var(--rt-cond); letter-spacing: .01em; text-transform: none; color: var(--heading); overflow-wrap: anywhere; }
@media (min-width: 720px) { .screen.gt .st h1.gt-hello[data-lt] { font-size: 2.125rem; } }
.screen.gt .gt-date { font: 400 .9375rem/1.4 var(--rt-body); color: var(--text-2); }
.screen.gt .gt-head .fresh { font-size: .8125rem; color: var(--text-3); }
.screen.gt .gt-hr { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.screen.gt .gt-hr .help-q { margin-left: 0; }

/* The weather's call, under the hero: one quiet line (a tap opens the next day's forecast). */
.screen.gt .gt-weather { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 0 4px; color: var(--text-2); font: 500 .9375rem/1.4 var(--rt-body); }
.screen.gt .gt-weather > .ic, .screen.gt .gt-weather summary > .ic:first-child { flex: none; width: 20px; height: 20px; color: var(--text-3); }
.screen.gt .gt-weather.alert .ic:first-child { color: var(--alert); }
.screen.gt .gt-weather.alert .gt-wx-t { color: var(--text); }
.screen.gt .gt-wx-more summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.screen.gt .gt-wx-more summary::-webkit-details-marker { display: none; }
.screen.gt .gt-wx-more summary .chev { width: 16px; height: 16px; color: var(--text-3); }
.screen.gt .gt-wx-more[open] summary .chev { transform: rotate(180deg); }
.screen.gt .gt-wx-n { flex-basis: 100%; padding: 0 0 8px 30px; font-size: .8125rem; color: var(--text-3); }

/* A notice under the top (a list from another day, an invoice check that failed): one line, its button beside the words. */
.screen.gt .banner, .screen.gt .banner.bad { align-items: flex-start; }
.screen.gt .banner::before { margin-top: 8px; }
.screen.gt .banner .b-main { flex: 1; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.screen.gt .banner .b-main > strong { flex: 1 1 160px; }
.screen.gt .banner .b-main .btn.small { min-height: 44px; }

/* Small buttons for what's waiting, and the wrap-up line: quiet. */
.screen.gt .gt-chips { gap: 8px; }
.screen.gt .gt-chips .chip { border: 1px solid var(--border); background: var(--surface); }
.screen.gt .gt-nudge { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); }
.screen.gt .gt-nudge p { flex: 1; min-width: 0; margin: 0; font: 600 .9375rem/1.3 var(--rt-body); color: var(--text); }
.screen.gt .gt-nudge-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); }
.screen.gt .gt-nudge .btn.small { min-height: 44px; border-radius: var(--r-pill); }

/* The two columns on a computer (styles.css has the grid); a phone has one. */
.screen.gt .gt-grid { gap: 20px; }
.screen.gt .gt-col { gap: 20px; }
@media (min-width: 900px) { .screen.gt .gt-grid { gap: 24px; } }

/* Section titles: the jobs are the page, so their title is the biggest of them; the rest are quiet. */
.screen.gt .eb { margin: 0; font: 700 1.125rem/1.25 var(--rt-body); color: var(--text); }
.screen.gt .eb .n { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; font: 600 .9375rem/1.25 var(--rt-body); color: var(--text-3); }
.screen.gt .gt-low .eb, .screen.gt .gt-tom .eb { font: 600 .9375rem/1.3 var(--rt-body); color: var(--text-2); }
.screen.gt .gt-jobs { gap: 12px; }

/* A job: a quiet card. The top line says what and where; the name; the tree count at the right. */
.screen.gt .card.gt-job, .screen.gt .card.gt-job.late { gap: 0; padding: 0; overflow: visible; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.screen.gt .gt-hd { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 0; }
.screen.gt .gt-hdw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.screen.gt .gt-eb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 500 .8125rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.screen.gt .gt-eb .pill { min-height: 0; padding: 2px 8px; font-size: .75rem; }
.screen.gt .gt-late { padding: 2px 8px; border-radius: var(--r-pill); background: var(--alert); color: var(--on-alert); font: 700 .75rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; }
.screen.gt .gt-job .name { margin: 0; font: 700 1.25rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text); overflow-wrap: anywhere; }
.screen.gt .gt-job .name .meta, .screen.gt .gt-job .name .warnline { font: 400 .8125rem/1.2 var(--rt-body); }
.screen.gt .gt-tn { flex: none; display: flex; flex-direction: column; align-items: flex-end; font: 800 1.75rem/1 var(--rt-cond); color: var(--text-2); }
.screen.gt .gt-tn-u { font: 500 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.screen.gt .gt-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px 14px; }
.screen.gt .gt-body .addr { font-size: 1rem; line-height: 1.4; }
.screen.gt .gt-trees { font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.screen.gt .gt-job .note { gap: 2px; padding: 10px 12px; border: 0; border-radius: var(--r-box); background: var(--surface-2); font-size: .9375rem; line-height: 1.4; }
.screen.gt .gt-job .note .lab { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.screen.gt .gt-hside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.screen.gt .collect.gt-collect { flex-direction: column; align-items: flex-end; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.screen.gt .gt-collect .lbl { font: 500 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.screen.gt .gt-collect strong { font: 800 1.5rem/1 var(--rt-cond); }

/* The tools: Map, Call and Change as drawings at the left, Done (the one main action) at the right. */
.screen.gt .gt-acts { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; }
.screen.gt .gt-job .gt-acts { margin-top: 2px; }
.screen.gt .gt-tools { flex-wrap: nowrap; gap: 8px; }
.screen.gt .gt-done { flex: none; min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); font: 700 1rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; }
body.big-text .screen.gt .gt-done { min-height: 56px; }

/* The load and the yard: quiet folds ("Load · 19 trees"); tomorrow: one row a customer. */
.screen.gt .gt-fold { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.screen.gt .gt-fold .more-b { padding: 0 16px 8px; }
.screen.gt .gt-rows li { min-height: 44px; padding: 6px 0; }
.screen.gt .gt-rows .qty { min-width: 32px; font: 800 1.375rem/1 var(--rt-cond); color: var(--text); }
.screen.gt .gt-rn { font-size: .9375rem; }
.screen.gt .gt-lowbody { display: flex; flex-direction: column; gap: 8px; }
.screen.gt .gt-yard > li.srow { padding: 10px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.screen.gt .gt-yard .p-name { font: 600 .9375rem/1.3 var(--rt-body); }
.screen.gt .gt-yard .num { font: 800 1.25rem/1 var(--rt-cond); }
.screen.gt .gt-low .btn.link, .screen.gt .gt-ask .btn.link { gap: 4px; padding: 0 4px; color: var(--link); font-weight: 600; }
.screen.gt .gt-low .btn.link .ic { width: 16px; height: 16px; }
.screen.gt .gt-tom .eb { font: 600 .9375rem/1.3 var(--rt-body); color: var(--text-2); }
.screen.gt .gt-tom-list { gap: 8px; }
.screen.gt .card.gt-tcard { gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--surface); }
.screen.gt .gt-trow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
@media (min-width: 600px) { .screen.gt .gt-trow { flex-direction: row; align-items: center; gap: 12px; } }
.screen.gt .gt-tw { flex: 1; min-width: 0; }
.screen.gt .gt-tcard .name { font: 700 1rem/1.3 var(--rt-body); text-transform: none; letter-spacing: 0; }
.screen.gt .gt-tcard .gt-acts { flex: none; gap: 8px; }
.screen.gt .gt-tcard .gt-acts .btn.small { min-height: 44px; padding: 0 16px; border: 2px solid var(--btn-line); border-radius: var(--r-pill); background: transparent; color: var(--ink-strong); font: 600 .9375rem/1 var(--rt-body); }
.screen.gt .gt-tcard .gt-acts .btn.small:hover { background: var(--rt-hover); }

/* Print and copy: two quiet outline buttons side by side; Ask for a change under them. */
.screen.gt .utils.gt-utils { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.screen.gt .gt-utils .btn.small { flex: 1 1 150px; min-height: 48px; border: 2px solid var(--btn-line); border-radius: var(--r-pill); background: transparent; color: var(--ink-strong);
  font: 600 .9375rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; }
.screen.gt .gt-utils .btn.small:hover { background: var(--rt-hover); }
body.big-text .screen.gt .gt-utils .btn.small { min-height: 56px; flex-basis: 100%; }

/* On paper (Print today's jobs): black on white, only today's jobs and the load. Nothing here may add colour or hide words. */
@media print {
  .screen.gt .card.gt-job, .screen.gt .card.gt-job.late, .screen.gt .card.gt-tcard { overflow: visible; border: 1pt solid var(--border); border-left: 3pt solid var(--text); border-radius: 0; background: none; padding: 6pt 8pt; }
  .screen.gt .gt-hd { padding: 0; }
  .screen.gt .gt-body { padding: 0; }
  .screen.gt .gt-late { background: none; border: 1pt solid var(--text); color: var(--text); }
  .screen.gt .gt-tn, .screen.gt .gt-tn-u, .screen.gt .gt-eb, .screen.gt .gt-job .name, .screen.gt .gt-rows .qty { color: var(--text); }
  .screen.gt .gt-job .name { font-size: 13pt; }
  .screen.gt .gt-fold { border: 0; background: none; }
  .screen.gt .gt-fold .more-b { padding: 0; }
}

/* Collect sits at the card's top right now: no dot (styles.css draws one before it); Tomorrow's buttons sit together at the left. */
.screen.gt .gt-collect::before { display: none; }
.screen.gt .gt-tcard .gt-acts { justify-content: flex-start; }