/* GearDomain app UI kit, v2 "Camera tape".
   The app's screens drawn in HTML, used by the site's product scenes and by the
   design mockups in docs/design/looks/v2. Every size is in em: 1em = 10px on a
   390px-wide phone, so a phone scales by setting --w on .phone. */

.gd {
  --g-bg: #F4EEE3;
  --g-surface: #FFFAF1;
  --g-sunk: #EAE1D2;
  --g-ink: #231B19;
  --g-ink2: #5F554E;
  --g-ink3: #8C8076;
  --g-line: #DDD2C1;
  --g-wine: #5A1A22;
  --g-wine-top: #712533;
  --g-wine-edge: #3A0F15;
  --g-onwine: #FFF7EA;
  --g-link: #5A1A22;
  --g-kraft: #B08D62;
  --g-ok: #2C5E45;
  --g-ok-bg: #DCE7D2;
  --g-out: #9A4A22;
  --g-out-bg: #F2DCC8;
  --g-res: #26526E;
  --g-res-bg: #D8E4E8;
  --g-rep: #B42318;
  --g-rep-bg: #F6DDD3;
  --g-tile-a: #EFE4D3;
  --g-tile-b: #E2D5C0;
  --g-tile-ink: #6B4A3A;
  --g-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 .1em .2em rgba(60,34,26,.06), 0 .8em 2em -1em rgba(60,34,26,.22);
  --g-bezel: #1E1617;
  --g-view: #17110F;
  --logo-depth: #3E1117; --logo-face: #5A1A22; --logo-core: #9A7D5A;
  --g-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.gd[data-scheme="dark"] {
  --g-bg: #1A1012;
  --g-surface: #261719;
  --g-sunk: #140C0D;
  --g-ink: #FFF4E4;
  --g-ink2: #CDBDB4;
  --g-ink3: #9A8A82;
  --g-line: #3E2A2D;
  --g-wine: #EAE2D6;
  --g-wine-top: #F6F0E6;
  --g-wine-edge: #B5A998;
  --g-onwine: #1F1315;
  --g-link: #DDBB91;
  --g-kraft: #C8A57C;
  --g-ok: #BFE0B0;
  --g-ok-bg: #26402D;
  --g-out: #F4BE93;
  --g-out-bg: #4E3020;
  --g-res: #B9D9EC;
  --g-res-bg: #24404F;
  --g-rep: #FF9A8B;
  --g-rep-bg: #4D2623;
  --g-tile-a: #3A2528;
  --g-tile-b: #2C1B1E;
  --g-tile-ink: #E2C7A6;
  --g-shadow: 0 1px 0 rgba(255,246,231,.05) inset, 0 .8em 2em -1em rgba(0,0,0,.7);
  --g-bezel: #0B0607;
  --g-view: #0D0808;
  --logo-depth: #7A2230; --logo-face: #C43B4A; --logo-core: #E9E1D6;
}
@media (prefers-color-scheme: dark) {
  .gd[data-scheme="auto"] {
    --g-bg: #1A1012; --g-surface: #261719; --g-sunk: #140C0D; --g-ink: #FFF4E4; --g-ink2: #CDBDB4; --g-ink3: #9A8A82;
    --g-line: #3E2A2D; --g-wine: #EAE2D6; --g-wine-top: #F6F0E6; --g-wine-edge: #B5A998; --g-onwine: #1F1315;
    --g-link: #DDBB91; --g-kraft: #C8A57C; --g-ok: #BFE0B0; --g-ok-bg: #26402D; --g-out: #F4BE93; --g-out-bg: #4E3020;
    --g-res: #B9D9EC; --g-res-bg: #24404F; --g-rep: #FF9A8B; --g-rep-bg: #4D2623; --g-tile-a: #3A2528; --g-tile-b: #2C1B1E;
    --g-tile-ink: #E2C7A6; --g-shadow: 0 1px 0 rgba(255,246,231,.05) inset, 0 .8em 2em -1em rgba(0,0,0,.7);
    --g-bezel: #0B0607; --g-view: #0D0808;
    --logo-depth: #7A2230; --logo-face: #C43B4A; --logo-core: #E9E1D6;
  }
}

/* ---------- phone ---------- */
.gd.phone, .gd .phone {
  --w: 390px;
  position: relative;
  width: var(--w);
  font-size: calc(var(--w) / 39);
  aspect-ratio: 390 / 844;
  border-radius: 5.4em;
  background: var(--g-bezel);
  padding: 1.1em;
  box-shadow: 0 0 0 .15em rgba(255,255,255,.08) inset, 0 4em 7em -3em rgba(40,18,16,.5), 0 1.5em 3em -1.5em rgba(40,18,16,.35);
  flex: none;
}
.gd .scr {
  position: relative;
  height: 100%;
  border-radius: 4.4em;
  overflow: hidden;
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: var(--g-sans);
  font-size: 1.5em; /* 15px body */
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.gd .scr * { box-sizing: border-box; margin: 0; }
.gd .island { position: absolute; z-index: 5; top: .8em; left: 50%; width: 8.4em; height: 2.4em; margin-left: -4.2em; border-radius: 2em; background: #000; }
.gd .status { flex: none; height: 3.6em; padding: 1.2em 2.2em 0; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .98em; letter-spacing: -.01em; }
.gd .status.over { position: absolute; z-index: 4; top: 0; left: 0; right: 0; color: #FFF7EA; }
.gd .status .sig { display: flex; gap: .35em; align-items: center; }
.gd .status .sig i { display: block; width: 1.5em; height: .75em; border-radius: .2em; border: .09em solid currentColor; position: relative; opacity: .9; }
.gd .status .sig i::after { content: ""; position: absolute; inset: .1em; right: .35em; background: currentColor; border-radius: .08em; }
.gd .status .sig b { display: block; width: 1.05em; height: .7em; background: linear-gradient(90deg, currentColor 18%, transparent 18% 27%, currentColor 27% 45%, transparent 45% 54%, currentColor 54% 72%, transparent 72% 81%, currentColor 81%); clip-path: polygon(0 100%, 0 60%, 18% 60%, 18% 100%, 27% 100%, 27% 40%, 45% 40%, 45% 100%, 54% 100%, 54% 20%, 72% 20%, 72% 100%, 81% 100%, 81% 0, 100% 0, 100% 100%); }
.gd .body { flex: 1; min-height: 0; overflow: hidden; padding: .6em 1.2em 0; display: flex; flex-direction: column; gap: 1em; }

/* ---------- type ---------- */
.gd .top { display: flex; align-items: center; justify-content: space-between; gap: .8em; min-height: 2.6em; }
.gd .org { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; font-size: .93em; color: var(--g-ink2); }
.gd .org svg { width: 1.25em; height: 1.25em; }
.gd .lt { font-size: 2.13em; line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
.gd .lt .cap { display: block; margin-bottom: .9em; font-size: .33em; line-height: 1; }
.gd .lt small { display: block; margin-top: .45em; font-size: .47em; line-height: 1.3; letter-spacing: -.005em; font-weight: 500; color: var(--g-ink2); }
.gd .h { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; font-size: 1.07em; font-weight: 700; letter-spacing: -.015em; }
.gd .h a, .gd .lnk { font-size: .87em; font-weight: 600; color: var(--g-link); text-decoration: none; letter-spacing: 0; }
.gd .mono { font-family: var(--g-mono); letter-spacing: .02em; }
.gd .cap { font-family: var(--g-mono); font-size: .7em; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--g-ink3); }
.gd .dim { color: var(--g-ink2); }
.gd .i { width: 1.45em; height: 1.45em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- pieces ---------- */
.gd .avatar { flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center; font-size: .8em; font-weight: 700; color: var(--g-onwine); background: var(--g-wine); letter-spacing: 0; }
.gd .avatar.blue { background: #26526E; color: #F1F7FA; }
.gd .avatar.cop { background: #9A4A22; color: #FFF3E6; }
.gd .avatar.grn { background: #2C5E45; color: #EEF6E8; }
.gd .avatar.sm { width: 1.9em; height: 1.9em; font-size: .68em; }
.gd .iconbtn { flex: none; width: 2.75em; height: 2.75em; border-radius: 50%; display: grid; place-items: center; background: var(--g-surface); color: var(--g-ink); box-shadow: var(--g-shadow); border: .07em solid var(--g-line); }
.gd .iconbtn .i { width: 1.3em; height: 1.3em; }

.gd .card { background: var(--g-surface); border: .07em solid var(--g-line); border-radius: 1.45em; box-shadow: var(--g-shadow); }
.gd .card.pad { padding: 1em 1.05em; }
.gd .list { display: flex; flex-direction: column; }
.gd .row { display: flex; align-items: center; gap: .85em; padding: .78em .95em; position: relative; }
.gd .row + .row::before { content: ""; position: absolute; top: 0; left: 4.85em; right: .95em; height: .07em; background: var(--g-line); }
.gd .row .b { flex: 1; min-width: 0; }
.gd .row .n { font-weight: 600; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd .row .m { font-size: .85em; color: var(--g-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd .row .m .avatar { display: inline-grid; vertical-align: middle; margin-right: .5em; }
.gd .row .e { flex: none; text-align: right; font-size: .82em; color: var(--g-ink2); display: flex; flex-direction: column; align-items: flex-end; gap: .3em; }

.gd .thumb { flex: none; width: 3.2em; height: 3.2em; border-radius: .9em; display: grid; place-items: center; color: var(--g-tile-ink); background: linear-gradient(150deg, var(--g-tile-a), var(--g-tile-b)); box-shadow: 0 0 0 .07em rgba(90,60,40,.12) inset; overflow: hidden; }
.gd .thumb .i { width: 1.7em; height: 1.7em; stroke-width: 1.5; }
.gd .thumb.lg { width: 4em; height: 4em; border-radius: 1.1em; }
.gd .thumb.wine { background: linear-gradient(150deg, #7A2A38, #4A141B); color: #F3DDBF; }
.gd .thumb.blue { background: linear-gradient(150deg, #33617E, #1E4259); color: #E3F0F6; }
.gd .thumb.ink { background: linear-gradient(150deg, #3A302D, #1F1917); color: #EBDCC6; }
.gd .thumb.kraft { background: linear-gradient(150deg, #D9BC93, #B8946A); color: #4A2E1C; }
.gd .thumb.sage { background: linear-gradient(150deg, #C9D8BD, #A6BC98); color: #23452F; }

/* status = a strip of coloured tape */
.gd .pill { display: inline-flex; align-items: center; gap: .42em; padding: .28em .62em .3em; border-radius: .42em; font-size: .78em; font-weight: 600; letter-spacing: -.003em; white-space: nowrap; }
.gd .pill::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.gd .pill.ok { color: var(--g-ok); background: var(--g-ok-bg); }
.gd .pill.out { color: var(--g-out); background: var(--g-out-bg); }
.gd .pill.res { color: var(--g-res); background: var(--g-res-bg); }
.gd .pill.rep { color: var(--g-rep); background: var(--g-rep-bg); }
.gd .pill.plain { color: var(--g-ink2); background: var(--g-sunk); }
.gd .pill.plain::before { display: none; }


/* the tape gauge: the whole inventory as one strip */
.gd .gauge { display: flex; gap: .22em; height: 1.05em; border-radius: .35em; overflow: hidden; }
.gd .gauge i { display: block; height: 100%; min-width: .5em; border-radius: .14em; }
.gd .gauge .ok { background: var(--g-ok); }
.gd .gauge .out { background: var(--g-out); }
.gd .gauge .res { background: var(--g-res); }
.gd .gauge .rep { background: var(--g-rep); }
.gd .legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.gd .legend div { display: flex; flex-direction: column; gap: .1em; }
.gd .legend b { font-size: 1.55em; line-height: 1; letter-spacing: -.03em; font-weight: 700; }
.gd .legend span { font-size: .74em; color: var(--g-ink2); display: flex; align-items: center; gap: .35em; }
.gd .legend span::before { content: ""; width: .55em; height: .55em; border-radius: .14em; background: var(--c); }

.gd .alert { display: flex; align-items: center; gap: .8em; padding: .8em .95em; border-radius: 1.2em; background: var(--g-rep-bg); color: var(--g-rep); }
.gd .alert .b { flex: 1; min-width: 0; }
.gd .alert .n { font-weight: 700; letter-spacing: -.01em; }
.gd .alert .m { font-size: .85em; opacity: .9; }

.gd .search { display: flex; align-items: center; gap: .6em; height: 2.9em; padding: 0 .95em; border-radius: 1.05em; background: var(--g-sunk); color: var(--g-ink3); font-size: .97em; }
.gd .search .i { width: 1.2em; height: 1.2em; }
.gd .chips { display: flex; gap: .45em; overflow: hidden; margin-right: -1.2em; }
.gd .chip { flex: none; display: inline-flex; align-items: center; gap: .4em; height: 2.2em; padding: 0 .85em; border-radius: 1.1em; font-size: .87em; font-weight: 600; color: var(--g-ink2); background: var(--g-surface); border: .07em solid var(--g-line); }
.gd .chip b { font-weight: 600; color: var(--g-ink3); }
.gd .chip.on { background: var(--g-ink); border-color: var(--g-ink); color: var(--g-bg); }
.gd .chip.on b { color: inherit; opacity: .65; }
.gd .chip .dot { width: .5em; height: .5em; border-radius: 50%; background: var(--c); }

.gd .btn { display: flex; align-items: center; justify-content: center; gap: .55em; height: 3.45em; padding: 0 1.3em; border-radius: 1.2em; font-weight: 700; letter-spacing: -.01em; color: var(--g-onwine); background: linear-gradient(var(--g-wine-top), var(--g-wine)); box-shadow: 0 .22em 0 var(--g-wine-edge), 0 .9em 1.4em -.7em rgba(58,15,21,.55); }
.gd .btn.ghost { color: var(--g-ink); background: var(--g-surface); border: .07em solid var(--g-line); box-shadow: 0 .16em 0 var(--g-line); }
.gd .btn.sm { height: 2.5em; border-radius: .9em; font-size: .9em; padding: 0 1em; }
.gd .btn .i { width: 1.3em; height: 1.3em; }
.gd .actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.gd .act { display: flex; flex-direction: column; align-items: center; gap: .45em; font-size: .78em; font-weight: 600; color: var(--g-ink2); text-align: center; }
.gd .act span { width: 3.6em; height: 3.6em; border-radius: 1.3em; display: grid; place-items: center; background: var(--g-surface); border: .07em solid var(--g-line); color: var(--g-link); box-shadow: var(--g-shadow); }

/* tab bar with the raised scan button */
.gd .tabbar { flex: none; position: relative; display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr; align-items: end; padding: .55em .7em 1.5em; background: color-mix(in srgb, var(--g-surface) 92%, transparent); border-top: .07em solid var(--g-line); }
.gd .tab { display: flex; flex-direction: column; align-items: center; gap: .22em; font-size: .68em; font-weight: 600; color: var(--g-ink3); }
.gd .tab .i { width: 1.9em; height: 1.9em; stroke-width: 1.6; }
.gd .tab.on { color: var(--g-link); }
.gd .tab.scan { color: var(--g-ink2); }
.gd .tab.scan span { width: 4.9em; height: 4.9em; margin-top: -2.5em; border-radius: 50%; display: grid; place-items: center; color: var(--g-onwine); background: linear-gradient(var(--g-wine-top), var(--g-wine)); box-shadow: 0 .28em 0 var(--g-wine-edge), 0 1em 1.6em -.6em rgba(58,15,21,.6), 0 0 0 .45em var(--g-bg); }
.gd .tab.scan .i { width: 2.3em; height: 2.3em; }
.gd .homebar { position: absolute; bottom: .55em; left: 50%; width: 9em; height: .34em; margin-left: -4.5em; border-radius: .2em; background: var(--g-ink); opacity: .85; z-index: 6; }

/* item record */
.gd .hero-pic { position: relative; flex: none; height: 15.5em; background: radial-gradient(120% 90% at 30% 20%, #8A3442, #4A141B 70%); color: #F3DDBF; display: grid; place-items: center; }
.gd .hero-pic.ink { background: radial-gradient(120% 90% at 30% 20%, #4A3F3B, #1F1917 70%); color: #EBDCC6; }
.gd .hero-pic > .i { width: 7em; height: 7em; stroke-width: .9; opacity: .92; }
.gd .hero-pic .hbar { position: absolute; top: 3.9em; left: 1.1em; right: 1.1em; display: flex; justify-content: space-between; }
.gd .hero-pic .iconbtn { background: rgba(255,248,236,.16); border-color: rgba(255,248,236,.22); color: #FFF7EA; box-shadow: none; backdrop-filter: blur(6px); }
.gd .hero-pic .count { position: absolute; right: 1.1em; bottom: 1em; padding: .25em .6em; border-radius: .6em; background: rgba(0,0,0,.35); color: #fff; font-size: .75em; font-weight: 600; }
.gd .facts { display: grid; grid-template-columns: 1fr 1fr; gap: .9em 1em; }
.gd .facts div span { display: block; }
.gd .facts .v { font-weight: 600; margin-top: .15em; }
.gd .label { display: flex; align-items: center; gap: 1em; padding: .9em; border-radius: 1.3em; background: var(--g-sunk); }
.gd .label .qr { flex: none; width: 5.2em; height: 5.2em; padding: .4em; border-radius: .7em; background: #fff; color: #17110F; }
.gd .label .qr svg { display: block; width: 100%; height: 100%; }
.gd .label .code { font-family: var(--g-mono); font-size: 1.3em; font-weight: 600; letter-spacing: .1em; }
.gd .days { display: grid; grid-template-columns: repeat(14, 1fr); gap: .25em; }
.gd .days i { display: grid; place-items: center; height: 2.5em; border-radius: .55em; font-style: normal; font-size: .72em; font-weight: 600; background: var(--g-ok-bg); color: var(--g-ok); }
.gd .days i.res { background: var(--g-res-bg); color: var(--g-res); }
.gd .days i.out { background: var(--g-out-bg); color: var(--g-out); }
.gd .dock { flex: none; display: grid; grid-template-columns: 1fr 2fr; gap: .6em; padding: .8em 1.2em 2em; background: color-mix(in srgb, var(--g-bg) 92%, transparent); border-top: .07em solid var(--g-line); }

.gd .tl { display: flex; flex-direction: column; gap: .85em; }
.gd .tl div { display: grid; grid-template-columns: 1.6em 1fr auto; gap: .6em; align-items: start; font-size: .9em; }
.gd .tl div::before { content: ""; width: .6em; height: .6em; margin: .35em auto 0; border-radius: 50%; background: var(--c, var(--g-ink3)); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--c, var(--g-ink3)) 22%, transparent); }
.gd .tl b { font-weight: 600; }
.gd .tl time { color: var(--g-ink3); font-size: .9em; }

/* scan */
.gd .view { position: relative; flex: 1; min-height: 0; background: radial-gradient(90% 60% at 50% 38%, #4A3B33, var(--g-view) 75%); color: #FFF7EA; display: flex; flex-direction: column; align-items: center; }
.gd .view .hint { margin-top: 5.2em; padding: .5em 1em; border-radius: 2em; background: rgba(0,0,0,.38); font-size: .87em; font-weight: 600; backdrop-filter: blur(6px); }
.gd .reticle { position: relative; width: 15.5em; height: 15.5em; margin-top: 2.6em; border-radius: 2.2em; box-shadow: 0 0 0 100em rgba(8,4,4,.42); }
.gd .reticle::before, .gd .reticle::after { content: ""; position: absolute; inset: -.2em; border-radius: 2.4em; border: .3em solid #FFF7EA; clip-path: polygon(0 0, 28% 0, 28% 12%, 12% 12%, 12% 28%, 0 28%, 0 72%, 12% 72%, 12% 88%, 28% 88%, 28% 100%, 0 100%); }
.gd .reticle::after { transform: scaleX(-1); }
.gd .reticle .sticker { position: absolute; inset: 22%; border-radius: .7em; background: #FFFDF8; color: #17110F; padding: .55em; transform: rotate(-4deg); box-shadow: 0 .6em 1.4em rgba(0,0,0,.5); display: flex; flex-direction: column; gap: .3em; align-items: center; }
.gd .reticle .sticker svg { width: 100%; height: auto; display: block; }
.gd .reticle .sticker b { font-family: var(--g-mono); font-size: .56em; letter-spacing: .12em; }
.gd .tools { position: absolute; top: 3.9em; left: 1.1em; right: 1.1em; display: flex; justify-content: space-between; }
.gd .tools .iconbtn { background: rgba(255,248,236,.14); border-color: rgba(255,248,236,.2); color: #FFF7EA; box-shadow: none; }
.gd .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: .7em 1.2em 2.2em; border-radius: 2em 2em 0 0; background: var(--g-bg); color: var(--g-ink); box-shadow: 0 -1.2em 3em rgba(0,0,0,.35); display: flex; flex-direction: column; gap: .9em; }
.gd .sheet::before { content: ""; align-self: center; width: 2.6em; height: .32em; border-radius: .2em; background: var(--g-line); }
.gd .who { display: flex; gap: .5em; }
.gd .who .p { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .65em .3em; border-radius: 1.05em; border: .07em solid var(--g-line); background: var(--g-surface); font-size: .8em; font-weight: 600; }
.gd .who .p.on { border-color: var(--g-wine); box-shadow: 0 0 0 .13em var(--g-wine); }
.gd .field { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .8em 1em; border-radius: 1.05em; background: var(--g-surface); border: .07em solid var(--g-line); font-size: .93em; }
.gd .field b { font-weight: 600; }
.gd .sign { position: relative; height: 6.2em; border-radius: 1.05em; border: .1em dashed var(--g-line); background: var(--g-surface); }
.gd .sign svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--g-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gd .sign span { position: absolute; left: .9em; bottom: .5em; }

/* kits */
.gd .kit { padding: 1em 1.05em; display: flex; flex-direction: column; gap: .8em; }
.gd .kit .hd { display: flex; align-items: center; justify-content: space-between; gap: .85em; }
.gd .kit .hd b { font-size: 1.07em; font-weight: 700; letter-spacing: -.02em; }
.gd .kit .in { display: flex; align-items: center; gap: .8em; font-size: .87em; color: var(--g-ink2); }
.gd .stack { display: flex; }
.gd .stack .thumb { width: 2.5em; height: 2.5em; border-radius: .75em; box-shadow: 0 0 0 .16em var(--g-surface); }
.gd .stack .thumb + .thumb { margin-left: -.7em; }
.gd .stack .more { background: var(--g-sunk); color: var(--g-ink2); font-size: .75em; font-weight: 700; }
.gd .meter { height: .5em; border-radius: .3em; background: var(--g-sunk); overflow: hidden; }
.gd .meter i { display: block; height: 100%; border-radius: inherit; background: var(--g-ok); }
.gd .meter i.part { background: var(--g-out); }

/* talk to inventory */
.gd .said { padding: 1em 1.1em; border-radius: 1.3em 1.3em 1.3em .4em; background: var(--g-sunk); font-size: 1.02em; line-height: 1.5; }
.gd .said mark { background: none; color: var(--g-ink); font-weight: 700; box-shadow: inset 0 -.55em 0 var(--g-out-bg); }
.gd .qty { display: inline-flex; align-items: center; gap: .7em; padding: .2em .35em; border-radius: .8em; background: var(--g-sunk); font-weight: 700; font-size: .93em; }
.gd .qty u { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .6em; background: var(--g-surface); text-decoration: none; color: var(--g-ink2); box-shadow: 0 .07em 0 var(--g-line); }

/* calendar */
.gd .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em .1em; text-align: center; font-size: .9em; }
.gd .cal .d { color: var(--g-ink3); font-size: .72em; font-weight: 600; font-family: var(--g-mono); letter-spacing: .06em; }
.gd .cal span { height: 2.5em; display: grid; place-items: center; border-radius: .8em; font-weight: 600; position: relative; }
.gd .cal span.off { color: var(--g-ink3); font-weight: 500; }
.gd .cal span.sel { background: var(--g-res-bg); color: var(--g-res); border-radius: 0; }
.gd .cal span.s0 { border-radius: .8em 0 0 .8em; }
.gd .cal span.s1 { border-radius: 0 .8em .8em 0; }
.gd .cal span.today { box-shadow: 0 0 0 .12em var(--g-wine) inset; }
.gd .cal span.busy::after { content: ""; position: absolute; bottom: .28em; width: .32em; height: .32em; border-radius: 50%; background: var(--g-out); }