/* Settings. Builds on style.css's tokens and rows. */

/* Today header: review pill + gear */
.head-end { display: flex; align-items: center; gap: 4px; flex: none; }
.icon-btn {
  width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); flex: none;
}
.icon-btn:active { background: var(--chip); }
.icon-btn svg { width: 24px; height: 24px; }

/* Home: coloured icon tiles */
.tile {
  width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff;
}
.tile svg { width: 19px; height: 19px; }
.badge-dot.static { position: static; margin: 0; flex: none; }

/* Rows */
.row .sub.wrap, .wrap-subs .row .sub { white-space: normal; }
.wrap-subs .row .title { white-space: normal; overflow-wrap: anywhere; }
.row.dim .avatar, .row.dim .title, .dim-rows .row .title { color: var(--hint); }
.row .badge { flex: none; }
.row .end:not(.money) { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
label.row { cursor: text; }
.row.muted { color: var(--hint); }
.section-row .sync { font-size: 13px; color: var(--hint); }

/* A bank that needs logging in again */
.card.warn-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; margin-bottom: 8px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 45%, transparent);
}
.card.warn-card .title { font-size: 16px; color: var(--danger); }
.card.warn-card .sub { font-size: 13px; color: var(--subtle); overflow-wrap: anywhere; }
.card.warn-card .pill.solid { margin-top: 10px; align-self: stretch; justify-content: center; }
.pill.solid { background: var(--button); color: var(--button-text); min-height: 40px; padding: 0 16px; flex: none; }
.pill.solid:disabled { opacity: .6; }

/* Long tag names wrap inside their chip */
.rule-chips .chip { max-width: 100%; text-align: left; overflow-wrap: anywhere; }

/* Times and amounts in fields */
.field input[type="time"] { flex: 0 1 auto; margin-left: auto; min-width: 88px; color: var(--accent); font-variant-numeric: tabular-nums; }
.field input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.field[hidden] { display: none; }
.field.amount .affix { margin-left: auto; font-size: 22px; font-weight: 600; color: var(--hint); }
.field.amount .affix + input { flex: 0 1 140px; }

/* Advanced: score inputs */
input.score {
  flex: none; width: 60px; height: 40px; border-radius: 10px; border: 0; outline: 0; text-align: center;
  background: var(--chip); color: var(--text); font: inherit; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
}
input.score:focus { box-shadow: inset 0 0 0 2px var(--button); }
input.score.bad { box-shadow: inset 0 0 0 2px var(--danger); color: var(--danger); }

/* Status */
.state { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.state.ok { background: var(--positive); }
.state.bad { background: var(--danger); }
.state.none { box-shadow: inset 0 0 0 1.5px var(--hint); }
.card.stats { margin-top: 0; }
.card.stats .stat { min-width: 0; }
.card.stats .stat .v { overflow-wrap: anywhere; white-space: normal; }

/* Who you are and what you may do */
.ask { display: flex; gap: 10px; align-items: flex-start; margin: 12px 16px; color: var(--hint); font-size: 13px; line-height: 1.35; }
.ask svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.avatar.me { background: var(--button); color: var(--button-text); }
.row .title .you { color: var(--hint); font-weight: 400; }
.badge.role-admin { background: color-mix(in srgb, var(--button) 16%, transparent); color: var(--accent); }
.badge.role-viewer { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hint) 45%, transparent); color: var(--hint); }
.badge.role-custom { background: color-mix(in srgb, #ff9500 18%, transparent); color: #c76e00; }
.section-row .badge { align-self: center; }
.foot.warn { color: var(--danger); }
button.row:disabled { cursor: default; }

/* Invite link */
.card.link-box { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.link-box .link {
  font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); word-break: break-all;
  user-select: all; -webkit-user-select: all;
}
.link-actions { display: flex; gap: 10px; }
.link-actions .pill { flex: 1; justify-content: center; min-height: 40px; }

/* Timezone search */
.field.search input { text-align: left; }