/* Find the Figure sentence interface — the question is the calculator. */
.sentence-number{display:inline-block;width:3ch;min-width:30px;max-width:160px;height:1.45em;border:0;border-bottom:2px solid #aaa69d;border-radius:0;background:transparent;color:var(--ink);padding:0 .12em .04em;font:inherit;font-weight:inherit;line-height:1;text-align:center;letter-spacing:inherit;outline:0;box-shadow:none;vertical-align:baseline;transition:border-color .14s ease,background .14s ease,width .08s ease}
.sentence-number.wide{width:5ch;max-width:220px}.sentence-number:hover{border-color:#68645d}.sentence-number:focus{border-color:var(--accent);background:rgba(255,255,255,.65)}

.sentence-choice{position:relative;display:inline-flex;align-items:baseline;vertical-align:baseline}
.sentence-choice-trigger{display:inline-flex;align-items:center;gap:.28em;height:1.45em;border:0;border-bottom:2px solid #aaa69d;border-radius:0;background:transparent;color:var(--ink);padding:0 .12em .04em;font:inherit;font-weight:inherit;line-height:1;letter-spacing:inherit;white-space:nowrap;outline:0;transition:border-color .14s ease,background .14s ease}
.sentence-choice-trigger:hover,.sentence-choice-trigger:focus-visible,.sentence-choice.is-open .sentence-choice-trigger{border-color:var(--accent);background:rgba(255,255,255,.65)}
.sentence-choice-chevron{font-size:.45em;color:#76726a;transform:translateY(-.05em)}
.sentence-choice-menu{position:absolute;z-index:90;top:calc(100% + 8px);left:0;min-width:150px;padding:5px;background:#fffefb;border:1px solid #c9c4b9;border-radius:8px;box-shadow:0 16px 42px rgba(29,27,23,.14);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease}
.sentence-choice.is-open .sentence-choice-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sentence-choice-option{width:100%;min-height:40px;border:0;border-radius:5px;background:transparent;padding:8px 10px;text-align:left;color:#403d38;font-family:var(--text,var(--sans));font-size:13px;font-weight:650}
.sentence-choice-option:hover,.sentence-choice-option:focus-visible{outline:0;background:#eeece5;color:var(--ink)}
.sentence-choice-option.is-selected{background:var(--ink);color:#fff}

/* Guided date: Month Day Year are editable pieces of the sentence, not a form field. */
.sentence-date{position:relative;display:inline-flex;align-items:baseline;gap:.14em;white-space:nowrap;vertical-align:baseline;max-width:100%}
.sentence-date-segment{width:auto;min-width:28px;max-width:190px;height:1.45em;border:0;border-bottom:2px solid #aaa69d;border-radius:0;background:transparent;color:var(--ink);padding:0 .08em .04em;font:inherit;font-weight:inherit;line-height:1;text-align:center;letter-spacing:inherit;outline:0;box-shadow:none;transition:border-color .14s ease,background .14s ease,width .08s ease}
.sentence-date-segment:hover{border-color:#68645d}.sentence-date-segment:focus{border-color:var(--accent);background:rgba(255,255,255,.65)}
.sentence-date-month{width:8ch;text-align:left}.sentence-date-day{width:2.3ch}.sentence-date-year{width:4.2ch}
.sentence-date-comma{margin-left:-.1em}
.sentence-calendar-toggle{width:34px;height:34px;display:inline-grid;place-items:center;align-self:center;flex:none;border:0;border-radius:50%;background:transparent;color:#77736b;padding:0;margin-left:1px;outline:0;transition:background .14s ease,color .14s ease}
.sentence-calendar-toggle:hover,.sentence-calendar-toggle:focus-visible{background:#e5e2da;color:var(--accent)}
.sentence-calendar-toggle svg{width:17px;height:17px}
.sentence-date.is-invalid .sentence-date-segment:focus{border-color:#b44b42}

/* Month suggestions appear only while the user is typing the month. */
.sentence-month-suggestions{position:absolute;z-index:110;top:calc(100% + 8px);left:0;min-width:150px;padding:5px;background:#fffefb;border:1px solid #c9c4b9;border-radius:8px;box-shadow:0 16px 42px rgba(29,27,23,.14);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease;font-family:var(--text,var(--sans));font-size:13px;letter-spacing:normal;white-space:normal}
.sentence-date.is-month-suggesting .sentence-month-suggestions{opacity:1;visibility:visible;transform:translateY(0)}
.sentence-month-suggestion{display:block;width:100%;min-height:38px;border:0;border-radius:5px;background:transparent;padding:7px 10px;text-align:left;color:#403d38;font:inherit;font-weight:650;cursor:pointer}
.sentence-month-suggestion:hover,.sentence-month-suggestion:focus-visible{outline:0;background:#eeece5;color:var(--ink)}

/* Calendar is deliberately simple because precise date entry lives in the sentence. */
.sentence-calendar{position:absolute;z-index:100;top:calc(100% + 10px);left:0;width:324px;max-width:calc(100vw - 32px);padding:12px;background:#fffefb;border:1px solid #c9c4b9;border-radius:10px;box-shadow:0 20px 55px rgba(29,27,23,.16);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease;font-family:var(--text,var(--sans));font-size:14px;letter-spacing:normal;white-space:normal}
.sentence-date.is-calendar-open .sentence-calendar{opacity:1;visibility:visible;transform:translateY(0)}
.sentence-calendar-head{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sentence-calendar-nav{width:38px;height:38px;border:0;border-radius:7px;background:transparent;color:#65615a;font-size:17px;display:grid;place-items:center}
.sentence-calendar-nav:hover,.sentence-calendar-nav:focus-visible{outline:0;background:#eeece5;color:var(--ink)}
.sentence-calendar-title{text-align:center;font-family:var(--display,var(--sans));font-size:15px;font-weight:720;letter-spacing:-.02em}
.sentence-calendar-weekdays,.sentence-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sentence-calendar-weekdays{padding:8px 0 3px}.sentence-calendar-weekdays span{height:22px;display:grid;place-items:center;color:#97938b;font-family:var(--mono);font-size:8px;font-weight:700;text-transform:uppercase}
.sentence-calendar-day{aspect-ratio:1;border:0;border-radius:6px;background:transparent;color:#35322e;font-size:12px;font-weight:620;display:grid;place-items:center;cursor:pointer}
.sentence-calendar-day:hover,.sentence-calendar-day:focus-visible{outline:0;background:#eeece5}.sentence-calendar-day.is-outside{color:#bbb7af;font-weight:500}.sentence-calendar-day.is-selected{background:var(--ink);color:#fff}.sentence-calendar-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.sentence-calendar-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sentence-calendar-foot button{height:32px;border:0;border-radius:6px;background:transparent;padding:0 8px;color:#67635d;font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.sentence-calendar-foot button:hover,.sentence-calendar-foot button:focus-visible{outline:0;background:#f0eee8;color:var(--accent)}

.question-result{background:var(--dark);color:#fff;border-left:3px solid var(--accent);padding:17px 19px;min-height:112px}
.question-result-label{color:#999994}.question-result-value{color:#fff}.question-result-note{color:#b8b8b3}.question-result-meta{color:#aaa9a4}
.question-line{gap:.26em .3em}
/* Punctuation belongs to the token before it. Give it zero layout width so commas/question marks cannot become orphan flex items. */
.question-punctuation,.question-line>span:last-child:not(.question-word):not(.sentence-date):not(.sentence-choice){flex:0 0 0;width:0;overflow:visible;white-space:nowrap;margin-left:-.3em}
.question-line-break{flex-basis:100%;width:100%}
.secondary-sentence{display:flex;align-items:baseline;flex-wrap:wrap;gap:.28em;font-family:var(--display,var(--sans));font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}

@media(max-width:900px){
  .question-result{border-left:3px solid var(--accent);border-top:0;margin-top:8px;padding:18px 19px}
  .sentence-calendar{width:320px}
}
@media(max-width:620px){
  .sentence-number,.sentence-choice-trigger,.sentence-date-segment{min-height:1.5em}
  .sentence-number{max-width:120px}.sentence-number.wide{max-width:165px}
  .sentence-date{flex:0 0 auto;width:auto;margin:.05em 0 .08em}
  .sentence-calendar-toggle{width:32px;height:32px}.sentence-calendar-toggle svg{width:16px;height:16px}
  .sentence-month-suggestions{top:calc(100% + 6px);min-width:140px}
  .sentence-calendar{position:fixed;left:10px;right:10px;top:auto;bottom:max(10px,env(safe-area-inset-bottom));width:auto;max-width:none;padding:13px;border-radius:12px;transform:translateY(8px)}
  .sentence-date.is-calendar-open .sentence-calendar{transform:translateY(0)}
  .sentence-calendar-nav{width:42px;height:42px}.sentence-calendar-title{font-size:16px}.sentence-calendar-day{font-size:14px}.sentence-calendar-weekdays span{font-size:9px}
  .secondary-sentence{font-size:17px}
}
@media(max-width:390px){
  .sentence-date{font-size:.96em}.sentence-calendar-toggle{width:30px;height:30px}
}
