/*
 * The profile and Settings (profiles/show, settings/show), in the home's
 * pattern: the greeting band and gift-tag cards come from home.css
 * (.account-band, .tag-card); here are the pieces of these two pages. Every
 * choice acts at once. Under 600px everything is one column.
 */
.app {
  .shell:has(> .page.account) { grid-template-columns: minmax(0, 1120px); }
  .page.account { gap: 28px; }
  .account-band .intro { min-width: 0; }

  /* The profile's band: the big picture, the name, a few facts */
  .who { display: flex; gap: 22px; align-items: center; }
  .big-picture { position: relative; flex: none; border-radius: 50%; }
  .big-picture .avatar { width: 112px; height: 112px; font-size: 44px; box-shadow: 0 0 0 5px var(--paper), 0 18px 30px -16px rgba(0, 0, 0, .4); }
  .big-picture .pen { position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper);
    box-shadow: 0 0 0 3px var(--paper); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
  .big-picture:hover .pen { transform: rotate(-12deg) scale(1.1); }
  .who + .summary { margin-top: 20px; }
  .who .hello { margin: 10px 0 0; }
  .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .fact { display: inline-flex; gap: 7px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; }
  .fact svg.icon { color: var(--accent); }

  /* The gift tag beside it: how friends see you, or what is set now */
  .friend-view { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius-sm); background: var(--soft-bg); }
  .friend-view .avatar { width: 56px; height: 56px; font-size: 22px; }
  .friend-view b { display: block; font-size: 18px; }
  .lines { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
  .lines > span { display: flex; gap: 8px; align-items: center; }
  .lines b { color: var(--ink); }
  .lines svg.icon { color: var(--accent); }

  /* Two columns of cards */
  .account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  @media (max-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
  .account-main, .account-side { display: grid; gap: 24px; min-width: 0; align-content: start; }
  .page.account .card h2 { font-size: 22px; }
  .page.account .card { gap: 16px; }
  .card.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
  .card.danger h2 { color: var(--danger); }
  details.reveal > summary { list-style: none; cursor: pointer; justify-self: start; display: inline-flex; }
  details.reveal > summary::-webkit-details-marker { display: none; }
  details.reveal[open] > summary { display: none; }
  .reveal-body { padding: 16px; border-radius: var(--radius-sm); background: var(--soft-bg); animation: home-rise .45s cubic-bezier(.2, .8, .2, 1); }
  .card.danger details.reveal > summary { color: var(--danger); }

  /* The picture: colours, "only the initial", then the drawings of one group
     at a time. The tabs are radios outside the form; one rule per group in
     config/avatars.yml. */
  .avatar-card .title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .avatar-status { color: var(--ok); font-weight: 700; }
  .avatar-status:empty { display: none; }
  .avatar-picker .swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .letter-choice { display: inline-flex; align-items: center; margin-left: 6px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); }
  .letter-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .letter-choice:has(input:checked) { background: var(--ink); color: var(--paper); box-shadow: none; }
  .letter-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .group-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .group-tab { padding: 6px 13px; border-radius: 999px; background: var(--soft-bg); color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
  .group-tab:has(input:checked) { background: var(--ink); color: var(--paper); }
  .group-tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .avatar-card .picks { display: none; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
  .avatar-card:has(.group-tab input[value="animals"]:checked) .picks[data-group="animals"],
  .avatar-card:has(.group-tab input[value="gifts"]:checked) .picks[data-group="gifts"],
  .avatar-card:has(.group-tab input[value="things"]:checked) .picks[data-group="things"],
  .avatar-card:has(.group-tab input[value="nature"]:checked) .picks[data-group="nature"] { display: grid; }
  .pick { justify-self: center; position: relative; cursor: pointer; border-radius: 50%; }
  .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .pick:hover .tile { transform: translateY(-3px) rotate(-4deg); }
  .pick:has(input:checked) .tile { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
  .pick:has(input:focus-visible) .tile { outline: 2px solid var(--accent); outline-offset: 6px; }

  /* The birthday: a tear-off calendar page */
  .birthday { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
  .calendar { width: 108px; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1.5px var(--line), 0 14px 24px -18px rgba(0, 0, 0, .5); text-align: center; display: grid; }
  .calendar .month { background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 0; }
  .calendar .day { font-family: var(--serif); font-variation-settings: var(--axes); font-size: 48px; font-weight: 700; line-height: 1; padding: 10px 0 12px; font-variant-numeric: tabular-nums; }
  .birthday-note { display: grid; gap: 10px; min-width: 0; }
  .birthday-note .date { font-weight: 700; font-size: 17px; }
  .lock { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-weight: 600; }

  /* Settings: big choices; the current one is pressed */
  .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .choices .button_to { display: grid; }
  .page.account .choice { display: grid; gap: 10px; justify-items: start; text-align: left; padding: 12px; border-radius: var(--radius-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line);
    font-size: 15px; font-weight: 700; color: var(--ink); height: 100%; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
  .page.account .choice:hover { transform: translateY(-2px); background: var(--paper); }
  .page.account .choice:disabled { opacity: 1; cursor: default; box-shadow: inset 0 0 0 2.5px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); transform: none; }
  .choice small { display: block; font-weight: 600; color: var(--muted); font-size: 12px; }
  .langs .choice { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .code-tag { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 800; padding: 4px 7px; border-radius: 6px; background: var(--soft-bg); }
  .mode-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-bg); }
  .mini { display: block; width: 100%; height: 60px; border-radius: 8px; position: relative; overflow: hidden; }
  .mini i { position: absolute; display: block; border-radius: 4px; }
  .mini i:nth-child(1) { left: 8px; top: 8px; width: 46%; height: 8px; }
  .mini i:nth-child(2) { left: 8px; top: 22px; width: 30%; height: 14px; }
  .mini i:nth-child(3) { right: 10px; bottom: 8px; width: 24px; height: 24px; }
  /* Each theme's own colours, whatever theme the page is in */
  .mini-ameixa { background: #F6F8FA; box-shadow: inset 0 0 0 1px #D1D9E0; }
  .mini-ameixa i:nth-child(1) { background: #1F2328; }
  .mini-ameixa i:nth-child(2) { background: #8250DF; }
  .mini-ameixa i:nth-child(3) { background: #0969DA; }
  .mini-vinho { background: #F8EADF; box-shadow: inset 0 0 0 1px rgba(59, 26, 36, .14); }
  .mini-vinho i { border-radius: 99px; }
  .mini-vinho i:nth-child(1) { background: #3B1A24; }
  .mini-vinho i:nth-child(2) { background: #8F2747; }
  .mini-vinho i:nth-child(3) { background: #6E8E75; border-radius: 9px; }

  /* Photo storage: a shelf that fills with boxes */
  .storage-shelf { height: 76px; border-radius: var(--radius-sm); background: var(--soft-bg); display: flex; gap: 6px; align-items: flex-end; padding: 0 10px;
    border-bottom: 5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .storage-shelf .tag-box { position: static; width: 46px; height: 46px; animation: none; background: none; }
  .storage-shelf .tag-box:nth-child(odd) { height: 56px; width: 50px; }
  #photo-storage meter { width: 100%; height: 8px; }
  .storage-text { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
  .storage-text b { color: var(--ink); }

  /* Connected devices */
  .page.account ul.sessions { list-style: none; padding: 0; display: grid; gap: 8px; }
  .page.account ul.sessions li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 0; border-radius: var(--radius-sm); background: var(--soft-bg); }
  .page.account ul.sessions li > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
  .device { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--accent); }
  .device svg.icon { width: 20px; height: 20px; }
  .chip.this-device { color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
}

@media (max-width: 600px) {
  .app {
    .page.account { gap: 22px; }
    .who { gap: 16px; }
    .big-picture .avatar { width: 84px; height: 84px; font-size: 34px; }
    .big-picture .pen { width: 28px; height: 28px; }
    .who .hello { font-size: 34px; }
    .fact { font-size: 13px; padding: 5px 10px; }
    .account-main, .account-side { gap: 20px; }
    .avatar-card .picks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .avatar-picker .tile.avatar { width: 50px; height: 50px; }
    .birthday { grid-template-columns: minmax(0, 1fr); }
    .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #mode .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    #mode .choice { padding: 10px 8px; }
    .page.account ul.sessions li { grid-template-columns: 36px minmax(0, 1fr); }
    .page.account ul.sessions li > :last-child:not(div) { grid-column: 1 / -1; justify-self: start; }
  }
}