/* design polish: shell, home, sign-in, settings, vault (loaded after app.css) */

:root {
  --pill-bg: #16181d;
  --pill-pad: 4px;
  --nav-add-size: 34px;
  --nav-add-size-phone: 32px;
  --nav-add-icon: 18px;
  --nav-add-gap: 44px;
  /* shared polish system */
  --r-lg: 20px; --r-md: 14px; --r-chip: 8px;
  --field-h: 44px; --field-h-sm: 36px;
  --field-bg: rgba(255, 255, 255, .06); --field-border: rgba(255, 255, 255, .16); --field-border-hover: rgba(255, 255, 255, .28);
  --btn-h: 44px; --btn-h-sm: 36px; --btn-r: 999px; --btn-border: rgba(255, 255, 255, .22);
  --label-fs: 13px;
  --fs-cap: 11px; --fs-meta: 13px; --fs-body: 14px; --fs-item: 16px; --fs-lead: 20px;
  --faint: rgba(255, 255, 255, .28);
  --scrim: linear-gradient(90deg, rgba(7, 12, 24, .97) 0%, rgba(7, 12, 24, .85) 55%, rgba(7, 12, 24, .35) 100%);
  --scrim-v: linear-gradient(180deg, rgba(10, 15, 28, .9) 0%, rgba(10, 15, 28, .72) 60%, rgba(10, 15, 28, .5) 100%);
  --dock-clear: calc(96px + env(safe-area-inset-bottom, 0px) + 24px);
}
/* light theme: the same tokens in dark ink */
:root[data-theme="light"] {
  --field-bg: var(--surface); --field-border: var(--input); --field-border-hover: rgba(15, 23, 42, .45);
  --btn-border: rgba(15, 23, 42, .2); --faint: rgba(15, 23, 42, .3);
}

/* the + leads the tab pill, pinned at its start; tabs scroll away to its right */
.topbar .tabs { scroll-padding-inline-start: var(--nav-add-gap, 44px); }
.topbar .tabs .nav-add {
  width: var(--nav-add-size, 34px); height: var(--nav-add-size, 34px);
  position: sticky; left: 0; right: auto; z-index: 1; margin: 0 6px 0 0;
}
/* only once tabs have scrolled under it: a solid backing so their text never shows through.
   At rest there is nothing to hide, and the backing would bite into the tab beside it. */
.topbar .tabs.scrolled .nav-add {
  box-shadow: 0 0 0 var(--pill-pad, 4px) var(--pill-bg, #16181d), 14px 0 0 0 var(--pill-bg, #16181d);
}
.topbar .tabs .nav-add svg { width: var(--nav-add-icon, 18px); height: var(--nav-add-icon, 18px); }
@media (max-width: 760px) {
  .topbar .tabs .nav-add { width: var(--nav-add-size-phone, 32px); height: var(--nav-add-size-phone, 32px); }
}

/* one add per screen: when the pill's + shows on the Vault, the header button hides (the + clicks it) */
#app-screen:has(#nav-add:not([hidden])) .head-actions #add-item-btn { display: none; }


/* ================= polish pass: shell, sign-in, home, vault, import, settings ================= */

/* ---- fields ---- */
input, textarea, select { border-color: var(--field-border, rgba(255, 255, 255, .16)); background-color: var(--field-bg, rgba(255, 255, 255, .06)); }
@media (hover: hover) {
  input:hover, textarea:hover, select:hover:not(:disabled) { border-color: var(--field-border-hover, rgba(255, 255, 255, .28)); }
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])), select { height: var(--field-h, 44px); }
select { font-size: 16px; padding-left: 14px; border-radius: var(--r); }
textarea { resize: none; }
.form-narrow input { height: var(--field-h, 44px); }
.side-new input, .rename input, .rename select, .map-grid input, .map-grid select { height: var(--field-h-sm, 36px); font-size: 14px; }
.smtp-grid input, .smtp-grid select { height: var(--field-h, 44px); }
.search { height: var(--field-h, 44px); }

/* labels (outside Project Management) */
.main:not(.pm) .field, .panel:not(.pm-modal, .pm-add-modal) .field { gap: 6px; }
.main:not(.pm) .field > label:not(.pm-label), .panel:not(.pm-modal, .pm-add-modal) .field > label:not(.pm-label) {
  color: var(--muted); font-size: var(--label-fs, 13px); font-weight: 500; line-height: 18px;
}

/* ---- buttons: primary (light) and secondary (outlined), both pills ---- */
.btn { height: var(--btn-h, 44px); border-radius: var(--btn-r, 999px); padding: 0 18px; font-size: 14px; font-weight: 600; border-color: var(--btn-border, rgba(255, 255, 255, .22)); }
.btn.primary { border-color: transparent; font-size: 14px; }
.btn.small { height: var(--btn-h-sm, 36px); padding: 0 14px; font-size: 13px; border-radius: var(--btn-r, 999px); }
.auth .btn.primary { height: 52px; font-size: 16px; }
.btn.danger-text { height: var(--btn-h-sm, 36px); border-radius: var(--btn-r, 999px); border: 1px solid transparent; background: none; color: var(--muted); padding: 0 14px; }
@media (hover: hover) {
  .btn.danger-text:hover { color: var(--danger); border-color: rgba(240, 138, 138, .4); background: none; }
}
.sheet .btn, .sheet .btn.small { height: var(--btn-h-sm, 36px); }
#import-page .sheet .btn { height: var(--btn-h, 44px); }
.invite-bar:not(.compact) input[type=email], .invite-bar:not(.compact) .btn { height: var(--btn-h, 44px); }

/* ---- page titles (match headings.css) ---- */
.home-head h2, .settings-head h2, #vaults-page .main-head h2, #import-page .main-head h2 {
  margin: 0; font-family: var(--display); font-size: clamp(48px, 6vw, 72px); font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase;
}
.home-head h2 { max-width: none; font-size: clamp(56px, 8vw, 96px); text-wrap: balance; }
:is(.home-head, .settings-head, .main-head) h2 em { font-style: normal; color: var(--accent); }
.main-head.spaced-head h2 { font-family: var(--display); font-size: clamp(30px, 3.4vw, 38px); font-weight: 400; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
#vault-sub, #import-page .main-head .muted, .settings-head .muted, #errors-sub {
  margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: .14em; text-transform: uppercase;
}
#vault-sub:empty, #errors-sub:empty { display: none; }
@media (max-width: 700px) {
  .settings-head h2, #vaults-page .main-head h2, #import-page .main-head h2 { font-size: clamp(44px, 13vw, 60px); }
  .home-head h2 { font-size: clamp(48px, 14vw, 64px); }
}

/* ---- home cards ---- */
.app-grid { margin-top: 32px; }
.app-card { min-height: 184px; padding: 24px; border-radius: var(--r-lg, 20px); gap: 12px; }
.app-icon { margin-bottom: 0; }
.app-name { font-size: var(--fs-item, 16px); font-weight: 600; }
.app-meta { margin-top: auto; padding-top: 0; min-height: 0; color: var(--muted); font-size: var(--fs-meta, 13px); }
.app-go { top: 48px; right: 24px; transform: translateY(-50%); } /* centred on the 48px icon */
.app-card:hover .app-go { transform: translateY(-50%); }
@media (hover: hover) { .app-card:hover .app-go { transform: translate(2px, -50%); } }
@media (max-width: 720px) {
  .app-grid { margin-top: 24px; }
  .app-card { min-height: 148px; padding: 20px; }
  .app-go { top: 44px; right: 20px; }
}

/* ---- settings: tabs, counts, tables ---- */
.settings-tabs { margin-top: 32px; }
.settings-tabs a { gap: 6px; }
.settings-tabs .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 12px; font-weight: 600; line-height: 1; }
.settings-tabs .count.off { background: rgba(255, 255, 255, .08); color: var(--muted); }
@media (max-width: 700px) { .settings-tabs { margin-top: 24px; } }
@media (max-width: 480px) {
  .settings-tabs { gap: 16px; }
  .settings-tabs a svg { display: none; }
  .settings-tabs a { font-size: 14px; }
}
.table th { font-size: var(--fs-cap, 11px); font-weight: 600; letter-spacing: .14em; }
.table-wrap { border-radius: var(--r-lg, 20px); }
.pill { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pill.wait { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.pill.off { background: rgba(255, 255, 255, .08); color: var(--muted); }
@media (max-width: 700px) {
  #people-table th:nth-child(3), #people-table td:nth-child(3) { display: none; } /* Last active */
  #people-table td:first-child { white-space: normal; max-width: none; }
  #people-table td.actions { padding-left: 4px; padding-right: 8px; }
}

/* account */
@media (max-width: 760px) { .sheet > .sheet-row { align-items: flex-start; } }
#tfa-status { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1; }
#tfa-status:empty { display: none; }
#tfa-status.ok { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* ---- vault ---- */
.side-label { font-size: var(--fs-cap, 11px); letter-spacing: .14em; }
.side-new { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 0 0 0 8px; }
.side-new input { padding: 0 10px; border-style: dashed; border-color: rgba(255, 255, 255, .14); border-radius: var(--r-sm); background-color: transparent; }
.side-new .icon-btn { width: 36px; height: 36px; flex: none; }
.tag-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 12px; font-weight: 600; }
.tag-chip.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.muted-dash { color: var(--faint, rgba(255, 255, 255, .28)); }
#app-screen:has(#import-tab:not([hidden])) #import-btn { display: none; } /* the Import tab already shows */
@media (max-width: 760px) {
  #vaults-page .main { order: 1; padding-bottom: 24px; }
  #vaults-page .sidebar { order: 2; border-bottom: 0; border-top: 1px solid var(--line); padding-bottom: var(--dock-clear, 144px); }
}
@media (max-width: 700px) {
  /* Name, Username and the actions; Folder, Tags, Saved by, Updated drop */
  #items-table th:nth-child(n+3):not(:last-child), #items-table td:nth-child(n+3):not(:last-child) { display: none; }
}

/* ---- import ---- */
#import-page .sheet { padding: 0; border: 0; background: none; box-shadow: none; }
.drop { padding: 48px 24px; border: 1.5px dashed rgba(255, 255, 255, .18); border-radius: var(--r-lg, 20px); background: rgba(255, 255, 255, .03); }
.drop:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .03); }
@media (hover: hover) { .drop:hover { border-color: var(--accent); } }
.drop.over { border-color: var(--accent); }
#import-pick > .meta-line { color: var(--muted); font-size: 13px; text-align: center; }

/* ---- item popup ---- */
.panel { border-radius: var(--r-lg, 20px); }
#it-otp::placeholder, #it-totp::placeholder { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: 0; }
#item-foot { position: sticky; bottom: 0; z-index: 1; flex-wrap: wrap; margin: 0 -24px -24px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 480px) { #item-foot .btn { padding: 0 14px; } }

/* ---- user menu ---- */
.menu { width: 248px; }
.menu-head b { color: var(--text); font-size: 14px; }
.menu-head small { color: var(--muted); font-size: var(--fs-cap, 11px); letter-spacing: .1em; text-transform: uppercase; }
.menu #menu-signout, .menu #menu-signout svg { color: var(--danger); }

/* ---- sign-in: quiet, even links under the button ---- */
.auth .link-btn { color: var(--muted); font-size: 14px; }
.auth .link-btn + .link-btn { margin-top: -6px; }
.auth-foot { font-size: 14px; }

/* ---- toast: dark pill with an emerald dot, above the dock ---- */
.toast {
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 96px); height: 36px; max-width: calc(100vw - 32px);
  overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #1f2228; color: #e9ecf2; /* the pill is dark in both themes */
  font-size: 13px; line-height: 34px; white-space: nowrap; text-overflow: ellipsis;
}
.toast::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* ---- every scrolling shell page clears the dock (Project Management sets its own) ---- */
.main:not(.pm) { padding-bottom: var(--dock-clear, 144px); }