/* The customer account. On top of /site.css (tokens) and support.css
   (forms, thread, pills). */

.hide { display: none !important; }
.small { font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.bar .wrap { gap: 16px; }
.who { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-2); }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ghost { height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 3px; background: transparent;
         color: var(--ink-2); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ghost:hover { color: var(--ink); border-color: var(--ink-3); }
@media (max-width: 560px) { .who span { display: none; } }

.acct-nav { border-bottom: 1px solid var(--line-2); background: #fff; position: sticky; top: 0; z-index: 10; }
.acct-nav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.acct-nav .wrap::-webkit-scrollbar { display: none; }
.acct-nav a { position: relative; padding: 16px 14px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.acct-nav a:hover, .acct-nav a.on { color: var(--ink); }
.acct-nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent); }

body.acct main.sp { padding: 56px 0 96px; }
.acct .head { margin-bottom: 36px; }
.acct h1 { font-size: clamp(32px, 4.2vw, 50px); }

/* sign in */
.signin-box { max-width: 460px; margin-top: 36px; }
.signin-box .actions { margin-top: 18px; }
.hint { font-size: 14px; color: var(--ink-3); margin: 8px 0 0; }
.hint.dev { color: #8a6508; font-weight: 600; }
.sent { margin: 0 0 14px; color: var(--ink-2); }
#code { font: 600 26px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3em; height: 58px; text-align: center; }
.or { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.or span { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.or .btn { align-self: flex-start; }

/* overview cards (the site's ruled columns) */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; border-top: 1px solid var(--line-2); padding-top: 22px; text-decoration: none; display: flex; flex-direction: column; }
.card::before { content: ""; position: absolute; left: 0; top: -2px; width: 40px; height: 3px; background: var(--accent); transition: width .25s ease; }
.card:hover::before { width: 100%; }
.card p { font-size: 16px; color: var(--ink-2); margin: 0; }
.card .more { margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .card::before { transition: none; } }

/* One width for everything: the heading's rule runs the full column, and
   the sections under it share that edge; their insides stay readable. */
.acct .head { max-width: none; }
.block { border-top: 1px solid var(--line-2); padding: 26px 0 30px; }
.block > :not(h2):not(.lic-head) { max-width: 860px; }
/* The heading already ends on a rule; the first section must not add one. */
.head + .block, .head + .nudge + .block { border-top: 0; padding-top: 0; }
.block h2 { margin-bottom: 8px; }
.block p { margin: 8px 0 0; }
.lic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.lic-head h2 { margin: 0; }
.slot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px;
        border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.slot + .slot { margin-top: 8px; }
.slot.free { background: transparent; border-style: dashed; }
.slot .small { margin-top: 2px; }
@media (max-width: 560px) { .slot { flex-direction: column; align-items: flex-start; } }
.btn.sm { height: 36px; padding: 0 14px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.danger { background: #b42318; border-color: #b42318; }
.danger-text { color: #b42318 !important; }
.inline-form { display: flex; gap: 10px; margin-top: 14px; max-width: 520px; }
.inline-form input { flex: 1; }
@media (max-width: 560px) { .inline-form { flex-direction: column; } }
.st-closed { background: #f1f1ee; color: var(--ink-3); }

.dls { display: grid; gap: 10px; max-width: 760px; }
.dl { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.dl h3 { margin: 0; }
.dl p { margin: 2px 0 0; }
ul.notes { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); }
ul.notes li { margin: 4px 0; }

.actions.top { margin: 0 0 18px; }
.tlist { max-width: 860px; }
.trow { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 14px 6px;
        border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.trow:hover { background: #f3f3f1; }
@media (max-width: 640px) { .trow { grid-template-columns: 1fr; gap: 4px; } }
.crumb { margin: 0 0 18px; font-size: 15px; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.form { max-width: 820px; }

.rows { margin-top: 10px; }
.row-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.row-act { display: flex; gap: 8px; flex-shrink: 0; }
.log .row-item { padding: 9px 0; }

dialog { width: min(460px, calc(100% - 32px)); padding: 26px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--ink); }
dialog::backdrop { background: rgba(8, 8, 10, .45); }
dialog h3 { font-size: 22px; margin: 0 0 6px; }
dialog p { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; }
dialog label { margin-top: 14px; }
dialog .actions { justify-content: flex-end; margin-top: 22px; }
dialog .actions.stack { flex-direction: column; align-items: stretch; }
.lost { font-size: 14px; color: var(--ink-3); margin-top: 28px; }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin: 0 0 32px;
         border: 1px solid var(--accent); border-radius: 4px; background: rgba(11, 122, 109, .06); }
.nudge p { margin: 0; color: var(--ink); }
.nudge .row-act { display: flex; gap: 8px; }
@media (max-width: 640px) { .nudge { flex-direction: column; align-items: flex-start; } }
.label { font-weight: 400; color: var(--ink-3); }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 12px; font-size: 16px; color: var(--ink); }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.inv { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }

.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #111113; color: #f2f3f5; padding: 11px 16px; border-radius: 4px; font-size: 15px; font-weight: 500;
         border-left: 3px solid #4fd1c0; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.toast.bad { border-left-color: #ff8a80; }