/* What the product adds on top of the approved mockup styles (brand/product/mockups/mix/*.css, taken as they are).
   Only things the mockup never had to show: a change that could not be saved, a link that opens no plan. */
.savebar { position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + 8px); z-index:40; display:flex; justify-content:center; padding:0 var(--gut); pointer-events:none; }
.savebar p { pointer-events:auto; max-width:440px; padding:10px 14px; background:var(--plum); color:var(--cream); border-radius:var(--soft); font:700 .95rem/1.35 var(--body); }
.outside { max-width:480px; margin:0 auto; padding:0 var(--gut) 48px; }
.outside h1 { margin:28px 0 12px; font-size:1.9rem; line-height:1.15; }
.outside p { margin:0 0 16px; }
.outside .btn { margin-top:8px; }

/* "Next" waits for an answer: it is there, and quiet, until the question has one. */
.btn[aria-disabled="true"] { background:var(--plum-dim); box-shadow:none; border-color:var(--plum-dim); cursor:default; transform:none; }
/* a date and a time field take the look of the text fields */
.field input[type="date"], .field input[type="time"], .field input[type="number"] { -webkit-appearance:none; appearance:none; display:block; }

/* The "Repeat" tag of a day: the owner's own mark, so it wears the dashed plum line of the things that are theirs
   to tick, and stays quiet beside the butter of "Today". */
.pill.flat.again { background:transparent; color:var(--plum); border:2px dashed var(--plum); padding:3px 10px 4px; font-size:.85rem; }
/* Under the thirty-day board, a day that is behind sits on plum: there the tag is drawn in the light ink that
   row's own small text has (plum on plum could not be read). */
.peek .row.is-done .pill.flat.again { color:var(--plum-dim); border-color:var(--plum-dim); }

/* An answer the plan did not take ("Change your answers", the times of the day planner): the one line under the
   fields that are back to what the plan holds. Quiet, like every small line. */
.nottaken { margin:10px 0 0; }
.opts + .nottaken { margin:2px 0 10px; }

/* An address to write to, in a sentence of a page outside a plan: a link, underlined like every text link. */
.outside p a { font-weight:700; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--coral); }
.outside button.btn { margin-top:8px; }

/* A long name (the field takes 40 characters, and a name can be one long word). A heading or a line that carries
   it breaks inside the word before it runs off the screen; and where the name sits beside something else in a
   row, it may shrink to do so. Words that fit are set exactly as before. */
h1, h2, h3, p, li, .lead, .row b, .row small, .btn, .lt, .opt, .tick .t, dt, dd, figcaption, .note-hand { overflow-wrap:break-word; }
.planhead h1, .cardhead > div, .row > span, .ladder-head .lt, .btn > span, .whynote li > span, .opt > span, .tick .t { min-width:0; }
/* the same, for a line that is laid out as a row of its own parts (a text link with its arrow, the head of a row
   of "Change your answers", the name on the photo's sheet and its button) */
.textlink, .ans-head .q, .ans-head .a, .ans-head > span, .sheet-head h2, .photo-acts .btn, .who-name { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.photo-acts .btn { white-space:normal; }