/* The reading time calculator (TL4 in Paper, page "Blog"). tool.css comes first. Values come from the 1440 and 390 wide
   artboards: text, pages and phone. */
.rtc { padding-bottom: 128px; }
.rtc .tool-title h1 { max-width: 720px; }
.rtc input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.rtc input[type="number"]::-webkit-inner-spin-button, .rtc input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- The panel: what to time on the left, the result on the right ---------- */
.rt-panel { display: flex; gap: 24px; padding: 40px 56px; }
.rt-input { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: 24px; background: #FFFFFF; }

.rt-tabs { align-self: flex-start; display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--canvas); }
.rt-tabs button { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 12px; font-size: 16px; line-height: 22px; font-weight: 500; transition: background .15s; }
.rt-tabs button:hover { background: #FFFFFF99; }
.rt-tabs button[aria-selected="true"] { border-color: var(--ink); background: #FFFFFF; font-weight: 800; }

/* The frame around the text box or the fields, with the word count under it */
.rt-box { display: flex; flex-direction: column; border: 1.5px solid var(--hairline); border-radius: 16px; overflow: clip; }
.rt-box[hidden] { display: none; }
.rt-box textarea { display: block; width: 100%; height: 196px; padding: 18px 20px; border: 0; resize: none; background: none; font: inherit; font-size: 16px; line-height: 25px; color: var(--ink); outline: none; }
.rt-box textarea::placeholder { color: var(--pencil); opacity: 1; }
.rt-count { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--hairline); background: #FAFAF9; }
.rt-n { display: flex; align-items: baseline; gap: 6px; }
.rt-n b { font-size: 16px; line-height: 22px; font-weight: 800; }
.rt-n span, .rt-hint { font-size: 15px; line-height: 20px; color: var(--graphite); }
.rt-hint { text-align: right; }
.rt-clear { font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.rt-fields { display: flex; gap: 16px; padding: 22px 20px; }
.rt-field { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.rt-field label { font-size: 15px; line-height: 20px; font-weight: 700; }
.rt-field input { height: 56px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 14px; font-size: 22px; line-height: 28px; font-weight: 700; }
.rt-field input::placeholder { color: var(--pencil); font-weight: 400; opacity: 1; }
.rt-size { flex: 1; width: auto; min-width: 0; }
/* Words a page: the native select sits on top, unseen, so the closed field can show 300 in bold and Paperback in grey. */
.rt-select { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; padding: 0 16px; border: 1.5px solid var(--hairline); border-radius: 14px; }
.rt-select > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.rt-select b { font-size: 18px; line-height: 24px; font-weight: 700; }
.rt-select > span span { font-size: 16px; line-height: 22px; color: var(--graphite); }
.rt-select svg { flex-shrink: 0; }
.rt-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }

/* Speed: radio chips, then Custom and the link to the reading speed test */
.rt-speed { display: flex; flex-direction: column; gap: 12px; min-width: 0; border: 0; }
.rt-speed legend { float: left; width: 100%; padding: 0; }
.rt-speed legend + * { clear: both; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-chip { position: relative; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border: 1.5px solid var(--hairline); border-radius: 23px; background: #FFFFFF; cursor: pointer; transition: border-color .15s, background .15s; }
.rt-chip[hidden] { display: none; }
.rt-chip:hover { border-color: var(--pencil); }
.rt-chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.rt-chip .tick { display: none; flex-shrink: 0; }
.rt-chip b { font-size: 16px; line-height: 22px; font-weight: 600; }
.rt-chip span { font-size: 16px; line-height: 22px; color: var(--graphite); }
.rt-chip small { padding-left: 4px; font-size: 13px; line-height: 18px; color: var(--graphite); }
.rt-chip:has(input:checked) { padding-left: 12px; border-color: var(--ink); background: var(--lilac-soft); }
.rt-chip:has(input:checked) .tick { display: block; }
.rt-chip:has(input:checked) b { font-weight: 800; }
.rt-chip:has(input:checked) span { color: var(--ink); font-weight: 600; }
.rt-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 4px; }
.rt-custom { gap: 10px; padding-right: 6px; cursor: default; }
.rt-custom label { display: flex; align-items: center; gap: 6px; align-self: stretch; cursor: pointer; }
.rt-custom input[type="number"] { width: 72px; height: 34px; flex-shrink: 0; padding: 0 12px; border-radius: 17px; background: var(--canvas); font-size: 16px; line-height: 22px; color: var(--graphite); }
.rt-custom input[type="number"]::placeholder { color: var(--pencil); opacity: 1; }
.rt-custom:has(input:checked) input[type="number"] { background: #FFFFFF; color: var(--ink); font-weight: 600; }
.rt-test { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 15px; line-height: 20px; color: var(--graphite); }
.rt-test a { color: var(--violet); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.rt-tabs button:focus-visible, .rt-clear:focus-visible, .rt-field input:focus-visible, .rt-select:has(select:focus-visible),
.rt-chip:has(input[type="radio"]:focus-visible), .rt-custom input[type="number"]:focus-visible, .rt-test a:focus-visible,
.rt-box:has(textarea:focus-visible), .rt-day select:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.rt-clear:focus-visible, .rt-test a:focus-visible { border-radius: 4px; }

/* The result */
.rt-result { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 1px 0 #0000000A, 0 12px 32px #00000014; }
.rt-live { display: flex; flex-direction: column; gap: 18px; }
.rt-time { align-self: flex-start; display: flex; padding-top: 4px; }
/* Sizes and the highlight are in em, so the script can shrink a long time to fit the card and keep the drawing.
   104px with a 100px line, and 72px with a 76px line for hours. */
.rt-time .hl { display: block; font-size: 104px; line-height: .9615; letter-spacing: -0.055em; font-weight: 800; }
.rt-time .hl::before { left: -.0962em; right: -.0962em; bottom: .1731em; height: .3846em; border-radius: .0962em; }
.rt-time.long .hl { font-size: 72px; line-height: 1.0556; letter-spacing: -0.05em; }
.rt-time.long .hl::before { left: -.1111em; right: -.1111em; bottom: .1667em; height: .3889em; border-radius: .1111em; }
/* The empty state's 0 min is decoration (aria-hidden), so it can be as light as drawn. */
.rt-time.empty .hl { color: var(--pencil); }
.rt-time.empty .hl::after { content: "0 min"; }
.rt-time.empty .hl::before { display: none; }
.rt-line { font-size: 17px; line-height: 24px; color: var(--graphite); }
.rt-row { display: flex; gap: 12px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.rt-row[hidden] { display: none; }
.rt-row > svg { flex-shrink: 0; margin: 1px 2px 0 0; }
.rt-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rt-row b { font-size: 17px; line-height: 24px; font-weight: 700; }
.rt-row > div > span { font-size: 15px; line-height: 21px; color: var(--graphite); }
.rt-finish > div { gap: 8px; }
.rt-day { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; color: var(--graphite); }
.rt-day select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 34px 0 14px; border: 1.5px solid var(--hairline); border-radius: 12px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A0A0A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px; font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); cursor: pointer; }
/* The footnote sits at the bottom of the card, as tall as the input card next to it. */
.rt-foot { margin-top: auto; padding-top: 18px; font-size: 14px; line-height: 19px; color: var(--graphite); }

/* ---------- How long common lengths take ---------- */
.rt-lengths { display: flex; flex-direction: column; gap: 20px; padding: 80px 0 40px; }
.rt-lengths h2 { font-size: 34px; line-height: 40px; letter-spacing: -0.03em; font-weight: 800; }
.rt-table { width: min(880px, 100%); }
.rt-table table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.rt-table th, .rt-table td { padding: 16px; border-bottom: 1px solid var(--hairline); text-align: right; font-size: 17px; line-height: 24px; font-weight: 400; }
.rt-table thead th { width: 180px; padding: 12px 16px; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.rt-table thead th:first-child { width: auto; padding: 12px 0; text-align: left; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; color: var(--graphite); }
.rt-table thead b { display: block; font-size: 16px; line-height: 22px; font-weight: 700; }
.rt-table thead span { display: block; font-size: 14px; line-height: 19px; color: var(--graphite); }
.rt-table thead .avg b { font-weight: 800; }
.rt-table thead .avg span { color: var(--ink); }
.rt-table tbody th { padding: 16px 0; text-align: left; font-weight: 600; }
.rt-table .avg { background: var(--lilac-soft); }
.rt-table td.avg { font-weight: 700; }
.rt-table thead .avg { border-radius: 12px 12px 0 0; }
.rt-table tbody tr:last-child > * { border-bottom: 0; }
.rt-table tbody tr:last-child .avg { border-radius: 0 0 12px 12px; }
.rt-note { padding-top: 14px; font-size: 14px; line-height: 19px; color: var(--graphite); }

@media (max-width: 1180px) {
  .rt-panel { padding: 40px; }
  .rt-result { width: 380px; }
}
@media (max-width: 980px) {
  .rt-panel { flex-direction: column; padding: 32px; }
  .rt-result { width: auto; }
}
@media (max-width: 760px) {
  /* tool.css takes the grey frame off the reading test's start screen. The calculator keeps it, as drawn. */
  .tool.rtc .panel { margin-top: 24px; border-radius: 28px; background: var(--canvas); }
  .rt-panel { flex-direction: column; gap: 12px; padding: 12px; }
  .rt-input { gap: 18px; padding: 18px 16px; border-radius: 20px; }
  .rt-tabs { align-self: stretch; }
  .rt-tabs button { flex: 1 0 0; min-width: 0; padding: 0; }
  /* 16px, not the drawn 15px, so iOS doesn't zoom into the text box. */
  .rt-box textarea { height: 150px; padding: 14px 16px; font-size: 16px; line-height: 23px; }
  .rt-count { padding: 10px 16px; }
  .rt-fields { flex-direction: column; gap: 14px; padding: 16px; }
  .rt-field { width: auto; }
  .rt-hint { display: none; }
  .rt-more { flex-direction: column; align-items: flex-start; }
  .rt-result { gap: 14px; padding: 22px 20px; border-radius: 20px; }
  .rt-live { gap: 14px; }
  .rt-time .hl { font-size: 80px; line-height: 1; }
  .rt-time .hl::before { left: -.125em; right: -.125em; bottom: .175em; height: .375em; border-radius: .1em; }
  .rt-time.long .hl { font-size: 56px; line-height: 1.0556; }
  .rt-time.long .hl::before { left: -.1111em; right: -.1111em; bottom: .1667em; height: .3889em; border-radius: .1111em; }
  .rt-line { font-size: 16px; line-height: 23px; }
  .rt-row { padding-top: 14px; }
  .rt-row b { font-size: 16px; line-height: 22px; }
  .rt-row > div > span { font-size: 14px; line-height: 20px; }
  .rt-day select { font-size: 16px; }
  .rt-foot { margin-top: 0; padding-top: 0; }

  .rt-lengths { gap: 16px; padding: 48px 0 16px; }
  .rt-lengths h2 { font-size: 26px; line-height: 31px; }
  .rt-table th, .rt-table td { padding: 14px 3px; font-size: 14px; line-height: 20px; }
  .rt-table thead th { width: 84px; padding: 10px 3px; }
  .rt-table thead th:first-child { padding: 10px 0; }
  .rt-table thead b { font-size: 14px; line-height: 19px; }
  .rt-table thead span { font-size: 13px; line-height: 18px; }
  .rt-table tbody th { padding: 14px 6px 14px 0; font-size: 15px; line-height: 20px; }

  .rtc .tool-join + .tool-about { padding-top: 48px; }
  .rtc { padding-bottom: 88px; }
}