/* ログイン画面（base.css に足す）。形は Listagram（sales-database-mvp/public/login.html）の「上から一本吊り」。
   白い壁に、ロゴの札を紐1本で吊るす。紐穴の輪だけ差し色の紫。 */
.login-page { --edge: #dfe4ea; --perf: #c3cad2; --string: #9aa4ae; --hang: clamp(48px, 13vh, 132px); --chamfer: 44px; background: #ffffff; padding: 0 16px 32px; }
.login-page * { box-sizing: border-box; }

/* 札を吊るす位置。札の上端が --hang、紐穴の中心は札の上端から 26px（17px + 輪の半径 9px）。
   紐は画面の上端からその中心まで。同じ変数で決めるので、画面の高さが変わってもずれない。 */
.hang { position: relative; width: min(340px, 100%); margin: var(--hang) auto 0; }
.string { position: absolute; left: 50%; top: calc(-1 * var(--hang)); width: 1.5px; height: calc(var(--hang) + 26px); margin-left: -0.75px; background: var(--string); }
.grommet { position: absolute; left: 50%; top: 17px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 4px solid var(--brand); background: #ffffff; }

/* 札の形。肩を45°に落とす。白い壁に白い札なので、1px の縁と薄い影で輪郭を出す。 */
.tag { filter: drop-shadow(0 2px 3px rgba(48, 56, 65, .07)); }
.tag-edge { padding: 1px; background: var(--edge); clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%, 0 var(--chamfer)); }
.tag-paper { padding: 52px 22px 18px; background: #ffffff; clip-path: polygon(calc(var(--chamfer) - .4px) 0, calc(100% - var(--chamfer) + .4px) 0, 100% calc(var(--chamfer) - .4px), 100% 100%, 0 100%, 0 calc(var(--chamfer) - .4px)); }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: block; flex: 0 0 auto; width: 38px; height: 38px; }
.brand h1 { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 25px; line-height: 1; letter-spacing: -.01em; }
.brand p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.perf { margin: 28px -22px 16px; border: 0; border-top: 1.5px dashed var(--perf); }

.status { min-height: 20px; margin: 0 0 12px; font-size: 12.5px; line-height: 20px; color: var(--muted); }
.status.error { color: #b42318; font-weight: 600; }
.status.busy { color: var(--brand-dark); font-weight: 600; }

/* Google 公式のボタンの置き場。flex にしない（Google の部品は中で2つのボタンを重ねて出すので、
   flex だと重ならずに縦に2つ並ぶ。営業リストで 2026-09-12 に見えた）。 */
.google-slot { min-height: 44px; width: 100%; }
.google-slot:empty { display: grid; place-items: center; border: 1px dashed var(--line-dark); border-radius: 6px; }
.google-slot.is-busy { opacity: .55; pointer-events: none; }

.foot { margin: 16px 0 0; font-size: 11px; color: var(--muted); letter-spacing: .04em; }

@media (max-width: 480px) {
  .login-page { --hang: clamp(40px, 10vh, 96px); --chamfer: 40px; }
  .tag-paper { padding: 50px 20px 18px; }
  .perf { margin: 24px -20px 14px; }
}