/* Closet. The look follows Apple's Human Interface Guidelines so the app reads as part of the phone:
   the system font, system colors, grouped inset lists with hairline separators, translucent bars
   that respect the safe areas, a large title that collapses into the bar on scroll, and light or
   dark following the device. One accent color, the Personal arena's blue green, as the tint. */

:root{
  color-scheme: light dark;
  --bg:#F2F2F7;              /* systemGroupedBackground */
  --card:#FFFFFF;            /* secondarySystemGroupedBackground */
  --card2:#F2F2F7;           /* tertiarySystemGroupedBackground */
  --text:#000000;            /* label */
  --text2:rgba(60,60,67,.6); /* secondaryLabel */
  --text3:rgba(60,60,67,.3); /* tertiaryLabel */
  --sep:rgba(60,60,67,.29);  /* separator */
  --fill:rgba(120,120,128,.2);   /* systemFill */
  --fill2:rgba(120,120,128,.12); /* tertiarySystemFill */
  --tint:#2FA6B8;            /* the accent, a teal in Apple's own range */
  --tint-ink:#FFFFFF;
  --red:#FF3B30;             /* systemRed */
  --bar:rgba(249,249,249,.82);
  --bar-line:rgba(0,0,0,.18);
  --hair:0.5px;
  --tab-h:49px;
  --nav-h:44px;
  --radius:10px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --card:#1C1C1E;
    --card2:#2C2C2E;
    --text:#FFFFFF;
    --text2:rgba(235,235,245,.6);
    --text3:rgba(235,235,245,.3);
    --sep:rgba(84,84,88,.6);
    --fill:rgba(120,120,128,.36);
    --fill2:rgba(118,118,128,.24);
    --tint:#4CC2D4;
    --tint-ink:#00262B;
    --red:#FF453A;
    --bar:rgba(22,22,24,.78);
    --bar-line:rgba(255,255,255,.16);
    --shadow:0 8px 24px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html,body{margin:0;color:var(--text);
  font:17px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg)}
body{min-height:100dvh;-webkit-font-smoothing:antialiased;overscroll-behavior-y:auto}
button,input,select,textarea{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
button{cursor:pointer;touch-action:manipulation}
img{display:block;max-width:100%}
h1,h2{margin:0}
p{margin:0}

/* Type scale, from Apple's text styles */
.large-title{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.37px;margin:0 0 4px}
h2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:.35px;margin:28px 0 10px}
.muted{color:var(--text2);margin:0}
.small{font-size:13px;line-height:18px;letter-spacing:-.08px}
.label{font-size:13px;line-height:18px;color:var(--text2);text-transform:uppercase;letter-spacing:-.08px;margin:20px 16px 6px}
.mono{font-variant-numeric:tabular-nums}
.error{color:var(--red);min-height:1.4em;margin:10px 0 0;font-size:15px;text-align:center}
.note{color:var(--text2);font-size:13px;line-height:18px;margin:8px 0 0}

/* The top bar. Transparent while the large title shows, translucent once it collapses. */
.navbar{position:fixed;top:0;left:0;right:0;z-index:15;height:calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:center;
  background:transparent;border-bottom:var(--hair) solid transparent;
  transition:background .2s,border-color .2s}
.navbar .nav-title{font-size:17px;font-weight:600;letter-spacing:-.41px;opacity:0;transform:translateY(6px);
  transition:opacity .18s,transform .18s;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.collapsed .navbar{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--bar-line)}
body.collapsed .nav-title{opacity:1;transform:none}
.nav-back{position:absolute;left:8px;top:env(safe-area-inset-top);height:var(--nav-h);display:flex;align-items:center;gap:2px;
  padding:0 8px;border:0;background:transparent;color:var(--tint);font-size:17px;letter-spacing:-.41px;max-width:45%}
.nav-back svg{width:12px;height:21px;flex:none}
.nav-back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-back:active{opacity:.4}
.nav-side{position:absolute;right:8px;top:env(safe-area-inset-top);height:var(--nav-h);display:flex;align-items:center}
.nav-side .plain{padding:0 8px}

/* Gate */
.gate{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top) + max(56px,14vh)) 16px 32px}
.gate-box{width:100%;max-width:400px;text-align:center}
.gate-icon{width:84px;height:84px;border-radius:19px;margin:0 auto 18px;box-shadow:var(--shadow)}
.gate .large-title{text-align:center}
.gate .muted{margin:6px 0 28px;font-size:15px}
.gate .group{text-align:left}
.gate .btn{margin-top:16px}

/* Grouped inset list, the Settings pattern */
.group{background:var(--card);border-radius:var(--radius);overflow:hidden;margin:0 0 20px}
.cell{display:flex;align-items:center;gap:12px;min-height:44px;padding:11px 16px;position:relative;text-align:left;width:100%;border:0;background:transparent;color:var(--text)}
.cell+.cell::before,.group>*+*::before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--sep)}
.group>*{position:relative}
.cell .ct{flex:1;min-width:0}
.cell .cv{color:var(--text2);text-align:right;white-space:nowrap}
.cell .chev{width:8px;height:14px;flex:none;color:var(--text3)}
button.cell:active{background:var(--fill2)}

/* Fields: each one is a grouped cell with a small caption above the control */
.field{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;flex:1;background:var(--card);border-radius:var(--radius);padding:9px 16px 8px}
.field span{font-size:13px;line-height:18px;color:var(--text2);letter-spacing:-.08px}
.field input,.field select,.field textarea{width:100%;border:0;background:transparent;outline:none;padding:0;min-height:28px;font-size:17px;color:var(--text)}
.field textarea{min-height:56px;resize:none;line-height:1.35}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);
  background-position:calc(100% - 10px) 12px,calc(100% - 5px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:24px}
.field input::placeholder,.field textarea::placeholder{color:var(--text3)}
.field:focus-within{box-shadow:inset 0 0 0 1.5px var(--tint)}

/* Buttons */
.btn{min-height:50px;padding:0 20px;border-radius:12px;border:0;background:var(--fill2);color:var(--tint);font-size:17px;font-weight:600;letter-spacing:-.41px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;transition:transform .08s,opacity .08s}
.btn:active{transform:scale(.98);opacity:.75}
.btn.primary{background:var(--tint);color:var(--tint-ink)}
.btn.danger{background:var(--card);color:var(--red)}
.btn.ghost{background:transparent;font-weight:400}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:default}
.file-btn{margin-top:4px}
.plain{border:0;background:transparent;color:var(--tint);font-size:17px;letter-spacing:-.41px;padding:0;min-height:44px}
.plain:active{opacity:.4}

/* App frame */
#app{padding:calc(var(--nav-h) + env(safe-area-inset-top) + 6px) 16px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom));max-width:1100px;margin:0 auto}
#app.setup{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.screen-title{margin:0 0 4px}
.top{margin-bottom:12px}
.summary{color:var(--text2);margin:2px 0 12px;font-size:15px;line-height:20px}
.view{max-width:1100px}
.empty{color:var(--text2);padding:36px 16px;text-align:center;font-size:15px;line-height:20px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.row-between .btn{min-height:36px;padding:0 14px;border-radius:999px;font-size:15px}
.row-gap{display:flex;gap:12px;flex-wrap:wrap}
.view>h2:first-child,.view>.back+h2{margin-top:8px}
.top-gap{margin-top:12px}
.back{display:none}

/* Chips: capsule filters, like the pills in Photos and Fitness */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{min-height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--fill2);color:var(--text);font-size:15px;letter-spacing:-.23px;position:relative}
.chip::after{content:"";position:absolute;inset:-4px 0}   /* keeps the tap area at 44 points */
.chip.on{background:var(--tint);color:var(--tint-ink);font-weight:600}
.chip:active{opacity:.7}
#cat-filter{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:0}
#cat-filter::-webkit-scrollbar{display:none}

/* Grid of clothes: square photos, rounded, with the name and one line under */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:520px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){.grid{grid-template-columns:repeat(5,1fr)}}
.tile{background:var(--card);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.tile .pic{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--card2);cursor:pointer}
.tile .name{padding:8px 12px 0;font-size:15px;font-weight:600;letter-spacing:-.23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .when,.tile .why{padding:1px 12px 9px;font-size:13px;line-height:18px;color:var(--text2)}
.tile .act{min-height:44px;border:0;background:transparent;color:var(--tint);font-size:15px;font-weight:600;letter-spacing:-.23px;position:relative;margin-top:auto}
.tile .act::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--hair);background:var(--sep)}
.tile .act:active{background:var(--fill2)}
.tile .act.primary{color:var(--tint)}
.acts{display:grid;grid-template-columns:1fr 1fr}
.acts .act+.act::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--hair);background:var(--sep)}

/* Laundry: the figures as a grouped list, label left and value right */
.stat-block{background:var(--card);border-radius:var(--radius);overflow:hidden;margin:0 0 16px}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:9px 16px 8px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--sep)}
.stat-label{font-size:13px;line-height:18px;color:var(--text2);letter-spacing:-.08px}
.stat-value{font-size:17px;line-height:22px;letter-spacing:-.41px;font-variant-numeric:tabular-nums}
.log{list-style:none;padding:0;margin:0;background:var(--card);border-radius:var(--radius);overflow:hidden}
.log li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 16px;position:relative}
.log li+li::before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--sep)}
.log li span:last-child{color:var(--text2);font-size:15px;text-align:right;font-variant-numeric:tabular-nums}

/* The More screen: a grouped list with chevrons */
.menu{background:var(--card);border-radius:var(--radius);overflow:hidden}
.menu-btn{width:100%;min-height:58px;padding:11px 44px 11px 16px;border:0;background:transparent;color:var(--text);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:1px;position:relative}
.menu-btn+.menu-btn::before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--sep)}
.menu-btn::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--text3);border-top:2px solid var(--text3);transform:translateY(-50%) rotate(45deg)}
.menu-btn:active{background:var(--fill2)}
.menu-btn .mt{font-size:17px;letter-spacing:-.41px}
.menu-btn .md{color:var(--text2);font-size:13px;line-height:18px;min-height:1px}

/* Rows with a text box and a button */
.addrow{display:flex;gap:10px;align-items:stretch;margin:0 0 14px}
.addrow .field{margin:0}
.addrow .btn{flex:none;min-height:0;align-self:stretch;padding:0 10px;background:transparent;color:var(--tint)}

/* Add queue */
.queue{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0}
@media (min-width:700px){.queue{grid-template-columns:1fr 1fr}}
.q{display:grid;grid-template-columns:88px 1fr;gap:12px;background:var(--card);border-radius:var(--radius);padding:12px}
.q-pic{position:relative;width:88px;height:88px}
.q img{width:88px;height:88px;object-fit:cover;border-radius:8px;background:var(--card2);display:block}
.q-remove{position:absolute;top:-6px;left:-6px;width:24px;height:24px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer}
.q-remove::after{content:"";position:absolute;inset:-10px}
.q .field{margin:0 0 8px;background:var(--card2)}
.q .chips{margin:0 0 8px}
.q .chip{min-height:32px;padding:0 12px;font-size:14px}
.q .label{margin:8px 0 6px}

/* Bottom tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;justify-content:center;
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:var(--hair) solid var(--bar-line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;max-width:220px;min-width:0;height:var(--tab-h);padding:5px 2px 2px;border:0;background:transparent;color:#8E8E93;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
.tab svg{width:26px;height:26px;flex:none}
.tab .tl{font-size:10px;line-height:12px;font-weight:500;letter-spacing:.12px}
.tab.active{color:var(--tint)}
.tab:active{opacity:.6}
.tab .count{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;line-height:17px;font-weight:600;text-align:center}
.tab .count:empty{display:none}
#tab-clean{display:none}

/* Item sheet, the native card style */
.sheet{position:fixed;inset:0;z-index:20}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sheet-card{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;overflow:auto;background:var(--bg);border-radius:12px 12px 0 0;
  padding:26px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
@media (prefers-color-scheme: dark){.sheet-card{--bg:#1C1C1E;--card:#2C2C2E;--card2:#3A3A3C;--fill2:rgba(118,118,128,.32)}}
.sheet-card{padding-top:52px}
.sheet-card>.btn.ghost[data-close]{position:absolute;top:10px;right:8px;width:auto;min-height:36px;padding:0 10px;font-weight:600}
.sheet-card::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:5px;border-radius:3px;background:var(--text3);transform:translateX(-50%)}
@media (min-width:700px){.sheet-card{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:520px;border-radius:14px;max-height:90dvh}}
#sheet-photo{width:100%;max-height:34dvh;object-fit:contain;border-radius:var(--radius);background:var(--card2);margin-bottom:14px}
.sheet-actions{display:grid;gap:10px;margin:14px 0}
.sheet-card .label{margin:12px 16px 6px}
#sheet-meta{font-size:13px;line-height:18px;margin:0 16px}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 20px + env(safe-area-inset-bottom));max-width:min(92vw,420px);
  background:var(--card);color:var(--text);border-radius:999px;padding:12px 20px;z-index:30;font-size:15px;line-height:20px;box-shadow:var(--shadow);text-align:center}

/* Outfit days */
.days{display:grid;gap:12px;margin-top:12px}
@media (min-width:860px){.days{grid-template-columns:1fr 1fr}}
.day{background:var(--card);border-radius:var(--radius);padding:0 16px;overflow:hidden}
.day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0}
.day-head .btn{min-height:34px;padding:0 14px;border-radius:999px;font-size:15px}
.day-title{font-weight:600;font-size:17px;letter-spacing:-.41px}
.prow{display:flex;align-items:center;gap:12px;padding:8px 0;position:relative}
.prow::before{content:"";position:absolute;left:0;right:-16px;top:0;height:var(--hair);background:var(--sep)}
.prow img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--card2);cursor:pointer;flex:none}
.ptxt{flex:1;min-width:0}
.ptxt .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;letter-spacing:-.41px}
.ptxt .when{font-size:13px;line-height:18px;color:var(--text2)}
.prow .btn{min-height:34px;padding:0 14px;border-radius:999px;font-size:15px;flex:none}

/* Shopping */
.shop-list{display:grid;gap:10px;margin:0 0 8px}
.shop-line{background:var(--card);border-radius:var(--radius);padding:12px 16px;font-size:15px;line-height:20px}
.shop-row{display:flex;align-items:center;gap:4px;background:var(--card);border-radius:var(--radius);padding:2px 8px 2px 4px}
.shop-row .txt{flex:1;min-width:0;padding:10px 0;font-size:17px;letter-spacing:-.41px}
.shop-row.done .txt{color:var(--text2);text-decoration:line-through}
.check{width:48px;height:48px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;flex:none}
.check .box{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--text3);display:block;position:relative}
.check[aria-checked="true"] .box{background:var(--tint);border-color:var(--tint)}
.check[aria-checked="true"] .box::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border-right:2px solid var(--tint-ink);border-bottom:2px solid var(--tint-ink);transform:rotate(45deg)}
.shop-row .btn{min-height:36px;padding:0 10px;font-size:15px;flex:none}

/* Go through the closet */

/* Motion: keep it quiet, and none at all when the device asks */
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* Drop photos: a zone on the Add page for the Mac, hidden where there is no pointer, and a veil over the page while a drag is in the air */
.dropzone{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;padding:18px 16px;border-radius:var(--radius);
  border:1.5px dashed var(--sep);color:var(--text2);text-align:center;background:var(--card)}
.dropzone svg{width:30px;height:30px;color:var(--tint);margin-bottom:4px}
.dz-title{font-size:17px;font-weight:600;letter-spacing:-.41px;color:var(--text)}
.dz-sub{font-size:13px;line-height:18px}
@media (hover:hover) and (pointer:fine){.dropzone{display:flex}}
.drop-veil{display:none;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:center;justify-content:center;pointer-events:none}
.drop-veil-card{background:var(--card);color:var(--tint);font-size:22px;font-weight:700;letter-spacing:.35px;padding:28px 40px;border-radius:16px;box-shadow:var(--shadow);border:2px dashed var(--tint)}
body.dropping .drop-veil{display:flex}
body.dropping .dropzone{border-color:var(--tint);background:var(--fill2)}

.q-auto{font-size:15px;line-height:20px;color:var(--text2);margin:2px 0 8px}
.q-auto b{color:var(--text);font-weight:600}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--tint);cursor:pointer}
#add-actions{position:sticky;bottom:calc(49px + env(safe-area-inset-bottom) + 10px);z-index:5;padding:8px 0;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.q .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.q .chips::-webkit-scrollbar{display:none}
.q .chip{flex:0 0 auto}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;margin:0 6px -2px 0;border:0.5px solid var(--sep)}
#view-closet,#view-outfits,#view-basket,#view-laundry,#view-more,#view-add{max-width:720px;margin-left:auto;margin-right:auto}
.tabs{padding-left:max(0px,calc((100% - 720px)/2));padding-right:max(0px,calc((100% - 720px)/2))}
.q>div{min-width:0}
.q-auto{overflow-wrap:anywhere}
.q{grid-template-columns:112px 1fr;align-items:start}
.q-pic{width:112px;height:150px}
.q img{width:112px;height:150px;object-fit:contain;background:var(--card2)}

/* Rows of chips that wrap, never a sideways scroll */
.q .chips,.chiprow{flex-wrap:wrap;overflow:visible;gap:8px;margin:0 0 8px}
.q .chip{flex:0 0 auto}
.q-count{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:var(--text2);margin:2px 0 10px}
.sheet-count{margin:0 16px 12px;font-size:17px;color:var(--text)}
.stepper{display:inline-flex;align-items:center;border-radius:8px;background:var(--fill2)}
.stepper button{width:40px;height:32px;border:0;background:transparent;color:var(--tint);font-size:22px;line-height:1;padding:0}
.stepper span{min-width:30px;text-align:center;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.q-suggest{font-size:15px;line-height:20px;color:var(--text2);margin:-4px 0 8px}
.q-suggest b{color:var(--text);font-weight:600}
.sheet-color{margin:0 16px 10px}
#sheet-cats .chiprow{margin:0 0 8px}
#sheet-photo{cursor:zoom-in}
.q-pic img{cursor:zoom-in}
/* Photo viewer */
#viewer{position:fixed;inset:0;z-index:200;background:#000;overflow:auto;-webkit-overflow-scrolling:touch}
#viewer .vwrap{min-height:100%;display:flex;align-items:center;justify-content:center}
#viewer img{display:block;width:100%;max-width:100%;cursor:zoom-in}
#viewer img.zoomed{width:260%;max-width:none;cursor:zoom-out}
#viewer .viewer-done{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:201;background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.viewing{overflow:hidden}
/* Color palette */
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:22px 12px;padding:30px 12px 26px;border-radius:var(--radius);background:#0a0a0c}
.pal-item{text-align:center}
.orb{width:58px;height:58px;border-radius:50%;margin:0 auto 14px}
.pal .pname{color:#f2f2f7;font-size:14px;font-weight:600;letter-spacing:-.15px}
.pal .pcount{color:#8e8e93;font-size:12px;margin-top:2px}
.strip{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-radius:var(--radius);background:var(--card);margin:0 0 16px}
.strip-dot{width:22px;height:22px;border-radius:50%;border:0.5px solid var(--sep)}

/* Photo and name side by side, the chips under both at full width */
.q{grid-template-columns:112px 1fr;grid-template-areas:"pic head" "body body"}
.q-pic{grid-area:pic}
.q-head{grid-area:head;min-width:0}
.q-body{grid-area:body;min-width:0;margin-top:4px}

/* Google sign in */
.google-btn{display:flex;justify-content:center;min-height:44px;margin:0 0 14px}
#google-box{margin-top:6px}
.gate .error{margin-top:14px}
.menu-btn.account{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;cursor:default}
.menu-btn.account .md{grid-column:1}
.menu-btn.account .act{grid-row:1 / span 2;grid-column:2;width:auto;padding:0 14px}