/* ============================================================================
   Cacatoid — the Android app's record page, and its privacy policy.

   The app has no live figures to report, so instead of padding the first
   viewport with a claim this page opens on the three fixed facts a visitor
   weighs before installing anything — price, data collected, permissions
   asked for — and then itemises what the app does and which three permissions
   it requests. Every line is checkable against the store listing or the policy
   on the second route.

   Orange is spent exactly once, on the install button: it is the one thing
   this page most wants clicked. The platform tag is a neutral raised label,
   not a green chip — green in this system means solved, and "Android" is a
   category, not a state. The Google Play mark stays where the store is named,
   under the same third-party-brand licence Solana's purple gets, and inherits
   the accent ink of the button it sits in.

   Namespaced under `.cid` and loaded per view: the sheet this replaced
   declared `.about-card`, `.privacy-card`, `.download-actions` and
   `.download-meta` at the top level on every page in the site.
   ========================================================================= */

.cid {
  padding-block: var(--sp-8) var(--sp-16);
}

/* --- Head ---------------------------------------------------------------- */

.cid__head {
  margin-block-end: var(--sp-6);
}

.cid__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
}

/* The platform: an identity tag in the ink ramp, the same treatment the CB
   ticker gets. A semantic state hue would have to mean a state. */
.cid__tag {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-300);
  background: var(--ink-800);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
}

.cid__lede {
  margin: 0;
  max-width: 58ch;
  color: var(--ink-300);
}

.cid__ledger {
  margin-block-end: var(--sp-5);
}

/* Elsewhere a hung sub-line is a converted figure, so it rides the mono rail
   it inherits from the `.num` cell above it and keeps the figure's `nowrap` —
   a converted prize is one atom and must not break mid-number. Here the sub is
   prose qualifying a count ("sem conta, sem análise de uso"), so it takes the
   UI face back and is allowed to wrap. Without the wrap it sets the cell's
   min-content width to the whole sentence, `flex-shrink` cannot go under that,
   and the strip runs off the side of a phone. */
.cid__ledger .ledger-strip__sub {
  font-family: var(--font-ui);
  font-variant-numeric: normal;
  letter-spacing: normal;
  white-space: normal;
}

.cid__h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
}

/* --- The one action ------------------------------------------------------ */

.cid__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin-block-end: var(--sp-10);
}

/* The package id beside the button, because the listing it opens is a record
   with a name and the visitor should be able to check the one against the
   other. Stacked key over value, the data-pair idiom. */
.cid__package {
  margin: 0;
  min-width: 0;
}

.cid__package-id {
  display: block;
  padding-block-start: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-200);
  overflow-wrap: anywhere;
}

/* --- What the app does — four records ------------------------------------
   The strip idiom: cells over a 1px rule-coloured gap, so separators resolve
   on both axes and in both writing directions. Explicit 1/2 columns — four
   cells must never land as three-plus-one beside a stray rule-coloured block.
   ------------------------------------------------------------------------ */

.cid-does {
  margin-block-end: var(--sp-10);
}

.cid-does__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .cid-does__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cid-fact {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--ink-850);
  color: var(--ink-300);
}

.cid-fact .icon {
  margin-block-end: var(--sp-3);
}

.cid-fact__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-050);
}

.cid-fact__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-300);
}

/* --- The three permissions ----------------------------------------------- */

/* The list holds no padding of its own: each row carries it, so the hairline
   between two rows runs the full width of the panel. */
.cid-perms__list {
  margin: 0;
}

.cid-perm {
  padding: var(--sp-4) var(--sp-5);
}

.cid-perm + .cid-perm {
  border-top: 1px solid var(--line);
}

.cid-perm__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-050);
}

.cid-perm__why {
  margin: 0;
  padding-block-start: 2px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-300);
  max-width: 58ch;
}

.cid-perms__note {
  padding: var(--sp-4) var(--sp-5);
}

.cid-perms__note p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

/* Undecorated links are the rule everywhere layout says what is clickable;
   inside a sentence there is no such context, so this one underlines. */
.cid-link {
  color: var(--ink-200);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease);
}

.cid-link:hover {
  color: var(--ink-050);
}

/* --- The policy ---------------------------------------------------------- */

.cid-doc__back {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
}

.cid-doc__updated {
  margin: var(--sp-4) 0 0;
}

.cid-doc__updated-date {
  display: block;
  padding-block-start: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-200);
}

.cid-doc__section {
  padding: var(--sp-5);
}

.cid-doc__h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
}

/* `base.css` zeroes list padding globally, which puts outside markers past the
   clipping edge. A policy that enumerates what the app does not do needs its
   markers back. */
.cid-doc__list {
  margin: var(--sp-3) 0 0;
  padding-inline-start: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: disc;
}

.cid-doc__list li::marker {
  color: var(--ink-500);
}

.cid-doc__list strong {
  color: var(--ink-050);
  font-weight: 600;
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 767px) {
  .cid {
    padding-block: var(--sp-6) var(--sp-12);
  }

  .cid__head {
    margin-block-end: var(--sp-5);
  }

  .cid__title {
    font-size: var(--fs-2xl);
  }

  .cid-does {
    margin-block-end: var(--sp-8);
  }

  .cid-perm,
  .cid-perms__note,
  .cid-doc__section {
    padding: var(--sp-4);
  }
}

/* An install is the one thing this page asks for; on a phone it gets the whole
   thumb width, with the package id seated under it rather than beside it. */
@media (max-width: 479px) {
  .cid__actions {
    display: grid;
    gap: var(--sp-3);
  }

  .cid__actions .btn {
    justify-content: center;
  }
}