/* Pages written for the Paprika 3 site that take the Paprika 4 site's layout once Store:Paprika4IsLive is
   true (see Paprika4Page): every page but the homepage, the news and the Paprika 4 user guides, which have
   their own. They keep their Bootstrap markup, so its classes are given the homepage's look here, on top of
   home4.css. */

/* The page's column, under the navigation and any banner above it. A short page, as most forms are, keeps
   the footer at the bottom of the window, with the spare height left above the footer. */
body:has(> .row):has(> .foot) { display: flex; flex-direction: column; min-height: 100vh; }
body > .foot { margin-top: auto; }
body > .wrap, body > .row { width: 100%; }
body > .row { max-width: 800px; margin: 0 auto; padding: 24px 24px 88px; }
@media (max-width: 600px) { body > .row { padding-inline: 16px; } }

/* Privacy, Terms and the recommended sites: the whole text in one white card, as a news post is */
body > .row > .col-xs-12 { min-width: 0; padding: 36px 40px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; font-size: 1.02rem; line-height: 1.7; overflow-wrap: anywhere; }
.page-header h3 { margin-bottom: 18px; font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.col-xs-12 > * + * { margin-top: 1em; }
.col-xs-12 > p:empty { display: none; }
/* A section's heading is a paragraph that is all bold */
.col-xs-12 > p:has(> strong:only-child) { margin-top: 1.8em; font-family: var(--f-display); font-size: 1.2rem; }
.col-xs-12 > p > strong:only-child { font-weight: 600; }
.col-xs-12 > hr + p:has(> strong:only-child) { margin-top: 0; }
.col-xs-12 ul { padding-left: 1.3em; }
.col-xs-12 li + li { margin-top: .35em; }
.col-xs-12 li::marker { color: var(--muted); }
.col-xs-12 a { color: var(--accent); text-underline-offset: 2px; }
.col-xs-12 hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.col-xs-12 > hr:last-child { display: none; }
@media (max-width: 600px) { body > .row > .col-xs-12 { padding: 24px 20px 22px; border-radius: 18px; } }

/* The Cloud Sync pages: one form, or what happened, in a white card */
.panel { max-width: 560px; margin: 8px auto 0; padding: 32px 36px 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.panel-title { margin-bottom: 14px; font-size: clamp(1.6rem, 3.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; }
.panel-body > p { color: var(--muted); }
.panel-body > p + p { margin-top: .8em; }
.panel-body form { margin-top: 22px; }
.alert { max-width: 560px; margin: 8px auto 14px; padding: 12px 16px; border-radius: 14px; font-weight: 500; }
.alert-danger { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 600px) { .panel { padding: 24px 20px 26px; border-radius: 18px; } }

.form-group { display: grid; gap: 6px; margin-bottom: 18px; }
.form-group:last-child { margin: 26px 0 0; }
.control-label { font-size: .92rem; font-weight: 600; }
.control-label:empty { display: none; }
.form-control { width: 100%; min-width: 0; padding: 11px 14px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.has-error .form-control { border-color: var(--accent); }
.help-block { color: var(--muted); font-size: .86rem; }
.help-block:empty, .error-block:empty { display: none; }
.error-block, .text-danger { color: var(--accent); font-size: .88rem; font-weight: 500; }
.text-danger ul { margin: 0 0 14px; padding-left: 1.2em; }
/* Delete Account's acknowledgement: the box, with the sentence it agrees to beside it */
.col-sm-6:has(> .checkbox) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.col-sm-6:has(> .checkbox) > :not(.checkbox) { grid-column: 2; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.checkbox + .help-block { color: var(--ink); font-size: .95rem; }

/* The password field's Show button, joined to its right-hand side */
.input-group { display: flex; }
.input-group .form-control { border-radius: 11px 0 0 11px; }
.input-group-btn { display: flex; }
.input-group-btn .btn { padding: 0 16px; font: 600 .9rem/1 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-left: 0; border-radius: 0 11px 11px 0; cursor: pointer; }
.input-group-btn .btn:hover { background: var(--line); }
.input-group-btn .btn { white-space: nowrap; transform: none; }

/* The bookmarklet. Its 2012 browser screenshot is left out; the button to drag is the homepage's red. */
#bookmarklet #example { display: none; }
#bookmarklet .panel-body > * + * { margin-top: .8em; }
#bookmarklet .panel-body > .clear { display: none; }
#bookmarklet .panel-body > form { margin-top: 22px; }
#bookmarklet .panel-body > h4 { margin-top: 1.7em; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; }
#bookmarklet .panel-body > h4 + p { margin-top: .4em; }
#bookmarklet #script { display: inline-flex; align-items: center; padding: 10px 18px; font-weight: 600; line-height: 1.1; color: #fff; text-decoration: none; background: var(--accent); border-radius: 999px; cursor: grab; }
#bookmarklet pre { max-height: 220px; overflow: auto; margin-block: .8em 0; padding: 14px 16px; font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
#bookmarklet .panel-body a:not(#script):not(.help) { color: var(--accent); text-underline-offset: 2px; }
.form-group:last-child > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-group a.help { color: var(--ink); font-size: .92rem; }

/* The licence pages: links in their text, a coupon or licence key to copy, and a button that leaves the
   page (to checkout, say) */
.panel-body p a:not(.btn) { color: var(--accent); text-underline-offset: 2px; }
.panel-body > pre { margin: .8em 0; padding: 12px 16px; font: 600 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.panel-body > p.text-danger { color: var(--accent); font-size: .95rem; }
.panel-body > .btn { display: inline-flex; align-items: center; margin: 6px 0 18px; padding: 12px 22px; font-weight: 600; line-height: 1.1; color: #fff; text-decoration: none; background: var(--accent); border-radius: 11px; transition: transform .15s ease, background-color .15s; }
.panel-body > .btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* Submit: the homepage's red button */
.form-group :is(button, input)[type="submit"]:not(.btn-default) { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; font: 600 1rem/1.1 var(--f-body); color: #fff; background: var(--accent); border: 0; border-radius: 11px; cursor: pointer; transition: transform .15s ease, background-color .15s; }
.form-group :is(button, input)[type="submit"]:not(.btn-default):hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ---------- Pages someone is sent to from the app, an email or Alexa (single: no menus or footer) ---------- */

/* The Paprika 3 icon above the card: the name and icon in the bar above say it now */
img[src^="/static/images/icons/96PR"] { display: none; }
.text-center { text-align: center; }

/* Buttons Bootstrap drew, in the homepage's: red for the one to press, white for the rest */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font: 600 1rem/1.1 var(--f-body); color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; transition: transform .15s ease, background-color .15s, border-color .15s; }
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-lg { padding: 13px 26px; font-size: 1.05rem; }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.btn-link { padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }

/* Signing up from an invitation or a subscription: a box to accept the terms, with their links */
.checkbox label { display: block; position: relative; padding-left: 30px; font-weight: 400; }
.checkbox label input { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.form-group > input[type="submit"] { justify-self: start; }
.checkbox a, .panel-body form p a { color: var(--accent); text-underline-offset: 2px; }
.panel-body form > p { margin-top: 16px; color: var(--muted); font-size: .95rem; }
span.text-danger:empty { display: none; }

/* Linking Alexa or Google Assistant: the account, and Authorize or Cancel, in a card of their own */
.col-lg-10 > .text-center:has(> form) { max-width: 560px; margin: 8px auto 0; padding: 32px 36px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.col-lg-10 > .text-center > h3 { margin-bottom: 14px; font-size: clamp(1.6rem, 3.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; }
.text-center form > p:empty { display: none; }
.text-center form > p, .text-center form + form p { color: var(--muted); }
#authorize-email { margin: 14px 0 22px; padding: 12px 16px; font: 600 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.text-center .form-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.text-center form + form { margin-top: 18px; font-size: .95rem; }

/* After accepting an invitation: thanks, then a card for each platform */
body > .row:has(> .col-lg-10 > .text-center:only-child > img:only-child) { display: none; }
body > hr { width: min(800px, 100% - 48px); margin: 0 auto; border: 0; border-top: 1px solid var(--line); }
body > .row:has(.download), body > .row:has(> .col-xs-12 > .text-center) { padding-block: 32px; }
body > .row > .col-xs-12:has(> .text-center) { padding: 24px 28px; font-size: 1.05rem; text-align: center; }
#downloads { display: grid; gap: 18px; }
#downloads > .col-xs-12 { padding: 0; background: none; border: 0; }
#downloads .heading { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
#downloads > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.download a { display: grid; justify-items: center; gap: 10px; padding: 22px 12px 18px; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: border-color .15s; }
.download a:hover { border-color: var(--ink); }
.download img { height: 64px; width: auto; }
.download h4 { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 600px) { #downloads > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Downloads after subscribing or joining the beta: this visitor's platform first, with its steps */
.platform-downloads { margin-top: 18px; }
.platform-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.platform-download:first-child { border-top: 0; }
.platform-download-image { flex: 0 0 28px; line-height: 0; }
.platform-download-image img { width: 28px; height: 28px; }
.platform-download-name { flex: 1; min-width: 0; }
.platform-download-name h4 { font-size: 1.1rem; font-weight: 600; }
.platform-download-name p { color: var(--muted); font-size: .92rem; }
.platform-download-name ol { margin: 8px 0 0; padding-left: 1.3em; font-size: .95rem; }
.platform-download-detected .platform-download { margin-bottom: 8px; padding: 18px 20px; background: var(--bg); border: 0; border-radius: 16px; }

/* Bootstrap 5's cards: the shared-recipe page and the error page */
.card { max-width: 560px; margin: 8px auto 0; padding: 32px 36px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.card-body > * + * { margin-top: .8em; }
.card-header + .card-body { margin-top: 10px; }
.card-title { font-size: clamp(1.5rem, 3.4vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; }
.text-body-secondary { color: var(--muted); }
.card .btn + .btn { margin-top: 0; }
.card .w-100 { width: 100%; }
.card .me-2 { margin-right: 6px; }
.card-body.text-center > a.btn:not(.w-100) { margin-top: 6px; }
.card-body > p a { color: var(--accent); text-underline-offset: 2px; }
@media (max-width: 600px) { .card { padding: 24px 20px; border-radius: 18px; } }

/* ---------- The recommended sites, which the apps' browsers open to ---------- */

.col-xs-12 h4 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; }
/* Its first heading, Getting Started, is the page's title */
body > .row > .col-xs-12 > h4:first-of-type { font-size: clamp(2rem, 4.4vw, 2.7rem); letter-spacing: -.03em; line-height: 1.12; }
.col-xs-12 .row { margin-top: 1em; }
.col-xs-12 .col-xs-12 { max-width: 420px; }
.col-xs-12 input[type="search"], .col-xs-12 .input-group .form-control { width: 100%; padding: 11px 14px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
/* Every category open: there is no Bootstrap script here to open them, and a list of sites reads best
   all at once */
.panel-group .panel { max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.panel-group .panel + .panel { margin-top: 1.2em; }
.panel-group .panel-heading a { color: var(--ink); text-decoration: none; pointer-events: none; }
.panel-group .panel-title { margin-bottom: .4em; font-size: 1.15rem; }
.panel-group .collapse { display: block; }
.panel-group .panel-body { padding: 0; }
ul.sites { columns: 3 200px; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
ul.sites li { break-inside: avoid; padding-block: 3px; }
.col-xs-12 ul.sites a { color: var(--ink); text-decoration: none; }
.col-xs-12 ul.sites a:hover { color: var(--accent); text-decoration: underline; }

/* Bootstrap 3's labels, for buttons named in the text: here and in the Paprika 3 guides */
.label { display: inline-block; padding: 3px 7px; font: 600 .78em/1.1 var(--f-body); color: var(--ink); vertical-align: 1px; background: var(--tag); border-radius: 6px; }
.label-info { color: var(--info-ink); background: var(--info-bg); }
.label-success { color: var(--ok-ink); background: var(--ok-bg); }
.label-primary { color: var(--accent); background: var(--accent-soft); }

/* ---------- The Paprika 3 user guides: one long page of sections, set on white like the Paprika 4 guides' text ---------- */

body:has(> .help) { background: var(--surface); }
body > .help { display: flow-root; max-width: 880px; margin: 0 auto; padding: 8px 24px 40px; line-height: 1.65; overflow-wrap: break-word; }
body > .help + .help { padding-top: 36px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { body > .help { padding-inline: 16px; } }
.help p, .help ul, .help ol, .help pre, .help table, .help .well, .help .alert { margin: 0 0 1em; }
.help ul, .help ol { padding-left: 1.4em; }
.help li + li { margin-top: .25em; }
.help ol ol { list-style: lower-alpha; }
.help ol ol ol { list-style: lower-roman; }
.help .page-header { margin-bottom: .8em; padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.help h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 600; letter-spacing: -.03em; }
.help h1 small, .help h2 small { font-size: .55em; font-weight: 500; color: var(--muted); }
.help h2 { font-size: clamp(1.7rem, 3.6vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.help h3 { margin: 1.5em 0 .4em; font-size: 1.4rem; font-weight: 600; }
.help h4 { margin: 1.3em 0 .3em; font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; }
.help a:not(.btn) { color: var(--link); font-weight: 500; text-underline-offset: 2px; }
.help img { height: auto; margin: .3em 0 1em; }
.help img.left { float: left; max-width: 45%; margin: .2em 22px 14px 0; }
.help img.right { float: right; max-width: 45%; margin: .2em 0 14px 22px; }
.help .clear, .help hr { clear: both; }
.help hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.help .well { padding: 16px 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.help .alert { max-width: none; padding: 12px 16px; border-radius: 12px; }
.help .alert-info { color: var(--info-ink); background: var(--info-bg); }
.help .alert-link { font-weight: 600; }
.help .table { width: 100%; font-size: .95rem; border-collapse: collapse; }
.help .table td, .help .table th { padding: 8px 12px; text-align: left; vertical-align: top; border: 1px solid var(--line); }
.help .table .heading > * { font-weight: 600; background: var(--bg); }
.help pre { max-height: 340px; overflow: auto; padding: 12px 16px; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.help .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; }
@media (max-width: 600px) {
  .help img.left, .help img.right { float: none; max-width: 100%; margin: .3em 0 1em; }
  .help .table { display: block; overflow-x: auto; }
}