/* Task Helper — Company branding (job-intake §44.2; BR-2 BRIEF-1218). Copyright Rapid Surveys Pty Ltd. App tokens only; namespace br-. Phone-first. */
.br-ov { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 24px 12px; background: rgba(20, 28, 40, .45); }
.br-card { position: relative; width: min(560px, 100%); margin: 0 auto; padding: 16px 20px 20px; background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 28, 40, .25); }
.br-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.br-head h2 { margin: 0; }
.br-x { width: 44px; height: 44px; padding: 0; background: transparent; color: var(--ink); border: 0; border-radius: 10px; font-size: 18px; cursor: pointer; }
.br-x:hover { background: var(--hover); }
.br-lede { margin: 6px 0 10px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.br-note { margin: 0 0 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; background: #f3f6fb; border: 1px solid var(--line); border-radius: 10px; }
.br-note.br-off { background: #fff8e6; border-color: #f0d9a0; }
.br-form, .br-logo, .br-prev { display: grid; gap: 12px; }
.br-logo, .br-prev { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.br-logo h3, .br-prev h3 { margin: 0; font-size: 16px; }
.br-f { display: grid; gap: 6px; } .br-f > span { font-size: 14px; font-weight: 600; }
.br-colrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.br-colrow input[type=color] { width: 56px; min-width: 56px; height: 44px; padding: 2px; border-radius: 10px; cursor: pointer; }
.br-colrow input[name=colour] { width: 9.5em; flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.br-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.br-btn { width: auto; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; cursor: pointer; }
.br-btn:disabled { opacity: .55; cursor: default; }
.br-primary { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.br-rm { color: #b3261e; }
.br-link { width: auto; min-height: 44px; padding: 0 6px; background: transparent; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.br-msg { margin: 0; font-size: 14px; line-height: 1.45; } .br-msg.br-bad { color: #b3261e; }
.br-msg .br-fix { margin-left: 4px; min-height: 40px; color: var(--ink); }
.br-hint, .br-dim, .br-cap { margin: 0; font-size: 13px; color: var(--muted); }
.br-cur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.br-cur img { max-height: 56px; max-width: 220px; object-fit: contain; padding: 6px; background: repeating-conic-gradient(#eef1f4 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line); border-radius: 8px; }
.br-page, .br-mail { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.br-mail { max-width: 420px; }
.br-ph { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; }
.br-ph img { max-height: 32px; max-width: 140px; object-fit: contain; }
.br-ph span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; }
.br-ph .br-dim2 { font-weight: 500; opacity: .75; font-size: 14px; }
.br-pbody { display: grid; gap: 6px; padding: 12px 14px 4px; } .br-pbody span { display: block; height: 8px; border-radius: 4px; background: #e8ecf1; } .br-pbody span:nth-child(2) { width: 80%; } .br-pbody span:nth-child(3) { width: 60%; }
.br-pfoot { margin: 6px 0 10px; text-align: center; font-size: 12px; color: #6b7280; }
.br-load, .br-err { margin: 12px 0; } .br-err { color: #b3261e; }
@media (max-width: 600px) { .br-ov { padding: 0; } .br-card { min-height: 100%; border-radius: 0; padding: calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); } }
/* the app shell for outside people: their logo / name in their colour where the TaTasche mark was, and a stripe of their colour under the bar */
.topbar.br-branded { box-shadow: inset 0 -3px 0 var(--br-colour); }
.topbar.br-branded .tb-brand { display: none; }
.br-chip { flex: none; display: inline-flex; align-items: center; height: 40px; max-width: 150px; padding: 4px 10px; margin-right: 4px; background: var(--br-colour); color: var(--br-text); border-radius: 10px; font-weight: 700; font-size: 15px; }
.br-chip img { display: block; max-height: 32px; max-width: 130px; object-fit: contain; }
.br-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .br-chip { max-width: 110px; } .br-chip img { max-width: 90px; } }
/* the sign-in screen reached from a branded invite: their chip + a stripe of their colour on the card; "Powered by TaTasche" under the form */
.authcard.br-signin { border-top: 5px solid var(--br-colour); }
.authcard.br-signin .auth-brand { display: none; }
.br-schip { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: -4px 0 10px; padding: 8px 12px; background: var(--br-colour); color: var(--br-text); border-radius: 10px; }
.br-schip img { display: block; max-height: 40px; max-width: 160px; object-fit: contain; }
.br-schip span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; font-weight: 700; font-size: 18px; line-height: 1.25; }   /* a long name wraps to 2 lines, then … */
.br-powered { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--muted); }