/* SB-084. The public pages (privacy, terms, account deletion, support):
   one reading column on the app's own tokens. Part 2 (17 Oct): the Clippr
   system, from P4a and P4b on the Saveboard canvas's [Dev ready] Privacy --
   Familjen Grotesk titles, Work Sans body, the clip and the Bricolage
   wordmark, Vermillion for links and the one action. At 1024 and up the
   privacy page's contents sit beside the column; below that they fold. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sb-surface-ground); color: var(--sb-content-primary);
  font-family: var(--sb-font-body); font-size: 16px; line-height: 1.6;
}
.doc { max-width: 680px; margin: 0 auto; padding: 28px 16px 64px; }
.layout .doc { margin: 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 32px; color: var(--sb-content-primary); text-decoration: none; }
.brand .tile { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--sb-action-primary); color: var(--sb-content-on-action); }
.brand .wordmark { font-family: var(--sb-font-wordmark); font-weight: 800; font-size: 22px; letter-spacing: -0.04em; }
h1 { font-family: var(--sb-font-display); font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 8px; }
h2 { font-family: var(--sb-font-display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; margin: 40px 0 10px; }
p, li { color: var(--sb-content-primary); }
b { color: var(--sb-content-primary); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
a { color: var(--sb-action-primary); font-weight: 600; }
a:hover { color: var(--sb-action-primary-pressed); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--sb-focus-ring); outline-offset: 2px; }
.meta { font-size: 14px; color: var(--sb-content-secondary); margin: 0 0 20px; }
.draft {
  display: flex; gap: 8px; margin: 0; padding: 10px 16px;
  background: var(--sb-surface-sunken); color: var(--sb-content-primary); font-size: 14px; line-height: 1.45;
}
.doc > .draft { margin: -28px -16px 28px; }
.card {
  background: var(--sb-surface-raised); border: 1px solid var(--sb-surface-line);
  border-radius: 12px; padding: 16px; margin: 16px 0;
}
.card.short h2 { margin: 0; font-size: 20px; }
.ticks { list-style: none; padding: 0; margin: 12px 0 0; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
  border-left: 2.6px solid var(--sb-state-confirmed); border-bottom: 2.6px solid var(--sb-state-confirmed);
  transform: rotate(-45deg); }
.table { padding: 0 16px; }
.table .row { padding: 14px 0; border-bottom: 1px solid var(--sb-surface-line); }
.table .row:last-child { border-bottom: 0; }
.table .row > * { display: block; }
.table .row > span { font-size: 15px; line-height: 1.5; color: var(--sb-content-secondary); margin-top: 4px; }
.table .row > span:last-child { font-size: 14px; }
.table .head { display: none; }
.cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cards .card { margin: 0; padding: 14px 16px; }
.cards .card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sb-content-secondary); }
.cards .card .name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cards .card .name b { font-size: 16px; }
.cards .card .name span { font-size: 13.5px; }
.after { font-size: 15px; color: var(--sb-content-secondary); }
.contents, .contents-fold { font-size: 14.5px; }
.contents ol, .contents-fold ol { list-style: none; margin: 0; padding: 0; }
.contents a, .contents-fold a { display: flex; align-items: center; min-height: 40px; color: var(--sb-content-secondary); font-weight: 500; text-decoration: none; }
.contents { display: none; }
.contents-fold { margin: 16px 0 0; background: var(--sb-surface-raised); border: 1px solid var(--sb-surface-line); border-radius: 12px; }
.contents-fold summary { min-height: 52px; display: flex; align-items: center; padding: 0 16px; font-weight: 700; cursor: pointer; list-style: none; }
.contents-fold summary::-webkit-details-marker { display: none; }
.contents-fold ol { padding: 0 16px 8px; }
.foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--sb-surface-line); font-size: 14.5px; color: var(--sb-content-secondary); }
.danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--sb-action-primary-pressed); color: var(--sb-content-on-action); border: 0;
  border-radius: 12px; min-height: 50px; padding: 0 18px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.danger[disabled] { opacity: var(--sb-disabled-opacity); cursor: default; }
.secondary {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px;
  background: none; border: 0; box-shadow: inset 0 0 0 1.5px var(--sb-surface-line); border-radius: 12px;
  font: inherit; font-weight: 700; color: var(--sb-content-primary); cursor: pointer;
}
.spin { width: 16px; height: 16px; border-radius: var(--sb-radius-circle); border: 2px solid transparent;
  border-top-color: var(--sb-content-on-action); animation: spin var(--sb-motion-hold) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
input[type=text] {
  font: inherit; font-size: 16px; border: 1.5px solid var(--sb-content-primary); border-radius: 10px;
  padding: 10px 14px; min-height: 48px; width: 100%; background: var(--sb-surface-raised);
  color: var(--sb-content-primary);
}
.notice { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px;
  border-radius: 10px; background: var(--sb-surface-sunken); font-size: 14px; line-height: 1.45; }
.done { display: flex; gap: 10px; align-items: flex-start; }
.done .ic { flex: none; width: 28px; height: 28px; border-radius: var(--sb-radius-circle); display: flex; align-items: center; justify-content: center;
  background: var(--sb-state-confirmed); color: var(--sb-content-on-action); }
.err { color: var(--sb-content-primary); }

@media (min-width: 1024px) {
  .layout { display: flex; justify-content: center; gap: 64px; padding: 48px 24px 0; }
  .contents { display: block; width: 216px; flex: none; position: sticky; top: 24px; align-self: flex-start; padding-top: 230px; }
  .contents .label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--sb-content-secondary); }
  .contents ol { border-left: 1px solid var(--sb-surface-line); }
  .contents a { padding-left: 14px; margin-left: -1px; border-left: 2px solid transparent; min-height: 36px; }
  .contents a:hover { color: var(--sb-content-primary); border-left-color: var(--sb-action-primary); }
  .contents-fold { display: none; }
  .layout .doc { flex: 0 1 680px; padding-top: 0; }
  h1 { font-size: 56px; }
  .table .row { display: grid; grid-template-columns: 1.15fr 1fr 0.8fr; gap: 6px 20px; }
  .table .row > span { margin-top: 0; }
  .table .head { display: grid; font-size: 13px; font-weight: 600; color: var(--sb-content-secondary); }
}