/* ============================================================================= THE TOP BAR ============================================================================= Shared by every buddy page. It was a flat navy rectangle with a drop shadow — correct, and the same bar you would get from any admin template. Three changes, all small: 1. A gradient rather than a flat fill, so the bar has a direction and the page below it reads as lighter rather than merely different. 2. A 2px lime rule along the bottom. It is the one place the brand colour appears on a page that is otherwise navy and white, and it does the job a border-bottom was doing anyway. 3. The logout button gets the same treatment as the back chevron. It was a bare glyph on navy, which on a phone in daylight is a 16px target with no edge — the two controls that live in this bar should look like the same kind of thing. ========================================================================== */ .bu-topbar { background: linear-gradient(160deg, var(--nz-navy-soft, #002448) 0%, var(--nz-navy, #00243C) 52%, var(--nz-navy-deep, #001830) 100%); border-bottom: 2px solid var(--nz-lime, #3BD304); box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 10px 26px rgba(0, 24, 48, .22); } .bu-topbar h1 { font-size: 20px; /* A long farm name on a narrow phone truncates rather than wrapping the bar to two lines and pushing the page down. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bu-topbar__logo { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); } .bu-back, .bu-icon-btn { border: 1px solid rgba(255, 255, 255, .16); transition: background .16s var(--nz-ease, ease), border-color .16s var(--nz-ease, ease); } .bu-icon-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; font-size: 19px; color: var(--nz-text-on-dark, #fff); background: rgba(255, 255, 255, .10); border-radius: 13px; cursor: pointer; } .bu-icon-btn:hover, .bu-back:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); color: #fff; } .bu-back:focus-visible, .bu-icon-btn:focus-visible { outline: 3px solid var(--nz-lime, #3BD304); outline-offset: 2px; } /* ============================================================================= THE FARMER HERO ============================================================================= Replaces a white contact bar stacked on top of a plain heading. See the note in js/farmer.js's renderAquaFarm() for why the order changed; this is what it looks like. ========================================================================== */ .fm-hero { position: relative; isolation: isolate; overflow: hidden; padding: 26px 26px 22px; margin-bottom: 18px; border-radius: var(--nz-radius, 14px); background: var(--nz-navy, #00243C); color: #fff; } .fm-hero__media { position: absolute; inset: 0; z-index: -2; } .fm-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } /* Two layers. A flat wash dark enough for white type kills the photograph; the gradient keeps the water visible on the right and holds the heading well above AA on the left. */ .fm-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(104deg, rgba(0, 24, 48, .95) 0%, rgba(0, 24, 48, .87) 48%, rgba(0, 24, 48, .5) 100%), linear-gradient(0deg, rgba(0, 24, 48, .26), rgba(0, 24, 48, .26)); } .fm-hero h2 { margin: 0; font-family: var(--bu-display, 'Space Grotesk'), Inter, system-ui, sans-serif; font-size: clamp(22px, 2vw + 14px, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #fff; } .fm-hero__where { display: flex; align-items: flex-start; gap: 8px; margin: 9px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); } .fm-hero__where i { margin-top: 3px; color: var(--nz-lime, #3BD304); } /* ---- the two tap-to-dial buttons ---- 52px tall, because this is used one-handed, outdoors, by someone standing on a bund. Call is solid lime — the single most-used control in this console — and Text is glass, so the two are not competing for the same glance. */ .fm-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); } .fm-call { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 24px; font-size: 15px; font-weight: 700; color: var(--nz-navy, #00243C); text-decoration: none; background: var(--nz-lime, #3BD304); border: 1px solid transparent; border-radius: var(--nz-radius-pill, 999px); transition: transform .16s var(--nz-ease, ease), background .16s var(--nz-ease, ease); } .fm-call:hover { background: var(--nz-lime-deep, #2EA503); color: var(--nz-navy, #00243C); text-decoration: none; transform: translateY(-1px); } .fm-call:active { transform: translateY(0); } .fm-call:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .fm-call--ghost { color: #fff; background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .22); } .fm-call--ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; } .fm-hero__phone { margin-left: auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .72); } /* "email is yours" is a real caveat — the buddy's own address is on this farmer's login — so it stays amber rather than fading into the phone number. */ .fm-hero__phone em { font-style: normal; font-weight: 600; color: var(--nz-role-buddy, #F59E0B); } @media (max-width: 560px) { .fm-hero { padding: 22px 18px 18px; } .fm-hero__media { display: none; } .fm-hero__actions { gap: 9px; } .fm-call { flex: 1; justify-content: center; padding: 0 16px; } /* On a phone the number goes under the buttons rather than squeezing them. */ .fm-hero__phone { flex: 1 0 100%; margin: 4px 0 0; text-align: center; } } @media (prefers-reduced-motion: reduce) { .fm-call, .bu-back, .bu-icon-btn { transition: none; } .fm-call:hover { transform: none; } } /* ============================================================================= MY PATCH — the buddy's home screen ============================================================================= The band, the stats, the farmer list and the districts were each styled on their own and it showed: four radii, three shadows, two ideas of what a "row" is. What follows is one card, one row, one chip, applied across them. This console is used one-handed, outdoors, on a phone, by someone standing on a pond bund in daylight. That is not a stylistic note — it sets the minimum tap target (48px), the minimum body size (15px, not 13px), and why contrast here is deliberately harder than the farmer console's. ========================================================================== */ /* ---- the stat tiles ---- Four numbers about the patch. They were plain white boxes; the icon plate gives each one a subject at a glance, which is what you want from a strip you read while walking. */ .db-stats { gap: 12px; } .db-stat { position: relative; overflow: hidden; padding: 16px 16px 14px; background: var(--nz-surface, #fff); border: 1px solid var(--nz-border, #E5EAF2); border-radius: 15px; box-shadow: 0 1px 2px rgba(0, 36, 60, .05); } .db-stat__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 11px; font-size: 14px; color: var(--nz-blue, #004AF7); background: var(--nz-blue-soft, #EDF2FE); border-radius: 10px; } .db-stat__value { font-family: var(--bu-display, 'Space Grotesk'), Inter, system-ui, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--nz-navy, #00243C); } .db-stat__label { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--nz-text-3, #64748B); } /* ---- section headings ---- The same 3px lime stub the farmer console uses. One mark, one colour, repeated — it groups the page without adding another tint to it. */ .db-section__head h2, .db-section > h2 { display: flex; align-items: center; gap: 10px; font-family: var(--bu-display, 'Space Grotesk'), Inter, system-ui, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nz-text-3, #64748B); } .db-section__head h2::before, .db-section > h2::before { content: ''; flex: none; width: 3px; height: 15px; border-radius: 2px; background: var(--nz-lime, #3BD304); } /* ---- a farmer row ---- The single most-repeated object in this console. It is a link, so it gets a real hover and a real focus ring, and the chevron slides — the one motion that says "this goes somewhere" without a label saying so. */ .db-farmer { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px; background: var(--nz-surface, #fff); border: 1px solid var(--nz-border, #E5EAF2); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .16s var(--nz-ease, ease), box-shadow .16s var(--nz-ease, ease), transform .16s var(--nz-ease, ease); } .db-farmer:hover { color: inherit; text-decoration: none; border-color: var(--nz-lime, #3BD304); box-shadow: 0 6px 18px rgba(0, 36, 60, .09); transform: translateY(-1px); } .db-farmer:focus-visible { outline: 3px solid var(--nz-lime, #3BD304); outline-offset: 2px; } .db-farmer .fa-angle-right { transition: transform .16s var(--nz-ease, ease); } .db-farmer:hover .fa-angle-right { transform: translateX(3px); } /* The initial, on navy with a lime ring. It is the only thing distinguishing one row from the next at a glance when thirty names scroll past. */ .db-farmer__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; font-family: var(--bu-display, 'Space Grotesk'), Inter, system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #fff; background: var(--nz-navy, #00243C); border-radius: 50%; box-shadow: 0 0 0 2px rgba(59, 211, 4, .32); } .db-farmer__body { flex: 1; min-width: 0; } .db-farmer__name { font-size: 15.5px; font-weight: 600; color: var(--nz-navy, #00243C); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-farmer__farm, .db-farmer__phone { font-size: 13.5px; color: var(--nz-text-3, #64748B); } .db-farmer__figs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 5px; } .db-farmer__fig { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--nz-text-2, #475569); } /* A farm with no traced outlines. Amber rather than grey, because it is not a missing value — it is a job waiting for this buddy, and the row is where they will see it. flex-direction: row is the load-bearing line. The base .db-farmer__fig is a COLUMN — that is what stacks "12" above "ponds" for a real figure — and this modifier inherited it, so the map icon sat on its own line above the words and the chip came out two lines tall. */ .db-farmer__fig--todo { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: none; white-space: nowrap; gap: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #7A3E00; background: #FFF4E0; border-radius: 999px; } /* The CAA registration chip. It was a filled pill the width of the words, sitting next to the chevron, and on a list where almost every farm is newly registered that meant a column of identical amber blocks competing with the farmers' names. The "Needs your attention" panel beside it already itemises each one with the farm it belongs to, so the row does not need to shout — it needs to mark. Outline instead of fill, and the text at the size of a caption. */ .db-farmer__chip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; background: transparent; border-radius: 999px; } .db-farmer__chip i { font-size: 11px; } .db-farmer__chip--warn { color: #8A5200; border: 1px solid #F0D9A8; background: #FFFBF2; } .db-farmer__chip--ok { color: var(--nz-ok, #15803D); border: 1px solid #BBE5C6; background: var(--nz-ok-soft, #F0FDF4); } /* Red and filled. Three letters have less area than "Not registered" did, so the outline alone no longer carries at a glance — the tint puts the weight back without shouting. */ .db-farmer__chip--bad { color: var(--nz-danger, #B91C1C); border: 1px solid #EBB6B6; background: var(--nz-danger-soft, #FEF2F2); } /* A farmer whose login has not been claimed yet. Amber, the buddy-layer colour — it is a state of the account, not a fault of the farm. */ .db-farmer__pending { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: #7A3E00; background: #FFF4E0; border-radius: 999px; } /* ---- search ---- */ .db-search { min-height: 44px; border-radius: 12px; } .db-search:focus { border-color: var(--nz-lime, #3BD304); box-shadow: 0 0 0 3px rgba(59, 211, 4, .16); outline: none; } /* ---- district chips ---- */ .db-chips { display: flex; flex-wrap: wrap; gap: 8px; } .db-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--nz-navy, #00243C); background: var(--nz-lime-soft, #EBFBE6); border: 1px solid #CDEFC4; border-radius: 999px; } .db-chip i { color: var(--nz-lime-text, #217A00); } /* ---- the empty and loading states ---- */ .db-empty, .db-loading, .db-note { padding: 22px 20px; font-size: 14.5px; line-height: 1.6; color: var(--nz-text-3, #64748B); background: var(--nz-surface, #fff); border: 1px dashed var(--nz-border, #E5EAF2); border-radius: 14px; } .db-loading i { margin-right: 8px; } /* ---- the primary action ---- Lime on navy, pinned to the thumb zone on a phone. It is the one thing this console exists to do, and it should look like it. */ /* ---- the primary action ---- THE FILL STAYS BLUE. I had this wrong and changed it to lime; dashboard.css rule 4 is explicit that green is an interaction pointer and never a surface, and that rule was written after this button had already been a lime block once. Overriding it here would have reintroduced exactly what it removed, and left this screen disagreeing with itself — the blue is also what every other primary action in the product uses. (The contrast half of rule 4's argument is about white on lime, 2.0:1. Navy on lime is 7.97:1 and would have passed. The systemic half — one colour, one job — is what settles it, not the ratio.) What IS fixed is the shadow: it was tinted lime under a blue button, which is the kind of detail that makes a surface look slightly wrong without anyone being able to say why. It now picks up the button's own blue. */ .db-primary { box-shadow: 0 2px 6px rgba(0, 36, 60, .18), 0 12px 28px rgba(0, 74, 247, .24); transition: transform .16s var(--nz-ease, ease), box-shadow .16s var(--nz-ease, ease); } .db-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 36, 60, .18), 0 16px 34px rgba(0, 74, 247, .32); } .db-primary:active { transform: translateY(0); } .db-primary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* ============================================================================= THE DANGER ZONE ----------------------------------------------------------------------------- "Request removal" was a solid red button the size of a primary action, which is the wrong weight twice over: the buddy cannot actually delete anything — it raises a request an administrator decides on — and a destructive control should never be the loudest thing on a screen. It is now outlined, and the fill only arrives on hover, once you have reached for it deliberately. ========================================================================== */ .fm-danger { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--nz-border, #E5EAF2); } .bu-btn--danger, .fm-danger .bu-btn--danger { color: var(--nz-danger, #B91C1C); background: transparent; border: 1.5px solid #E9B9B9; box-shadow: none; transition: background .16s var(--nz-ease, ease), color .16s var(--nz-ease, ease); } .bu-btn--danger:hover { color: #fff; background: var(--nz-danger, #B91C1C); border-color: var(--nz-danger, #B91C1C); } /* Inside the confirm dialog the button IS the commitment, so there it keeps its solid fill — the restraint above is for the button that merely opens the dialog. */ .bu-modal .bu-btn--danger { color: #fff; background: var(--nz-danger, #B91C1C); border-color: var(--nz-danger, #B91C1C); } @media (prefers-reduced-motion: reduce) { .db-farmer, .db-farmer .fa-angle-right, .db-primary, .bu-btn--danger { transition: none; } .db-farmer:hover, .db-primary:hover { transform: none; } .db-farmer:hover .fa-angle-right { transform: none; } } /* ============================================================================= THE MARK ON SUB-PAGES ============================================================================= Only index.html carried the logo. Every other buddy page opened with a back chevron and a title and nothing else, so a buddy two taps into the console had no indication of what they were in — which is what a farmer looking over their shoulder sees too, since this console is used side by side in a field. The original reasoning for leaving it off was sound as far as it went: the back chevron owns the top-left on sub-pages, and two things fighting for that corner is worse than a console that introduces itself once. So the mark goes to the OPPOSITE end of the bar, not the corner — the round mark alone, not the lockup, because there is no room for a wordmark beside a farm name and the mark is the part people recognise anyway. Order in the bar is therefore: back, title, mark. The two controls stay exactly where muscle memory expects them. ========================================================================== */ .bu-topbar__mark { flex: none; /* LEFT, AFTER THE BACK CHEVRON — not at the right end. The chevron keeps the corner, because that is where a thumb reaches for "back" and moving it would cost more than the brand gains. The lockup takes the next slot, so every buddy page reads the same way: back, brand, title. Home has no chevron, so there the lockup simply IS first. THE FULL LOCKUP, NOT THE ROUND MARK. The mark alone was tried first and does not work at this size: it sets its wordmark inside the ring, so anything that fits a top bar reduces the lettering to mush and it reads as a green circle. The lockup puts the same words on a horizontal baseline, where 46px is ample. Height is fixed and width follows the asset's own 711x300 ratio, so it can never be squashed by whatever the bar does around it. */ height: 46px; width: auto; max-width: 150px; object-fit: contain; /* A rule after it, separating the brand from the page context — which is what the two actually are. Without it the lockup and the eyebrow read as one run of marks jammed together. Matches the home page's treatment. */ margin-right: 16px; padding-right: 16px; border-right: 1px solid rgba(255, 255, 255, .16); /* THE GLOW. Two stacked drop-shadows, and the order matters. The first is a lime halo at the logo's own ring colour, which is what makes it read as lit rather than merely shadowed — a neutral glow on a navy bar just looks like haze. The second is a tight dark shadow underneath that keeps the white wordmark from dissolving into the navy behind it. drop-shadow follows the PNG's alpha channel, so both hug the artwork itself rather than boxing it, which box-shadow would do. */ filter: drop-shadow(0 0 12px rgba(59, 211, 4, .42)) drop-shadow(0 0 4px rgba(59, 211, 4, .30)) drop-shadow(0 2px 5px rgba(0, 0, 0, .45)); } /* The home page's lockup sits in the same slot, minus the chevron before it. Same asset and the same height, so the brand is one size across the console rather than one size at home and another everywhere else. It already had a rule of its own in buddy.css, so only the height and the glow are set here. */ .bu-topbar__logo { height: 46px; width: auto; filter: drop-shadow(0 0 12px rgba(59, 211, 4, .42)) drop-shadow(0 0 4px rgba(59, 211, 4, .30)) drop-shadow(0 2px 5px rgba(0, 0, 0, .45)); } /* The light lockup on the auth pages — change-password opens on a white box, so it uses logo-lockup.png rather than the dark one. */ .bu-auth__brand img { height: 52px; width: auto; object-fit: contain; } /* On register-farmer the BUDDY pill already sits at the right end, so the mark gives up the auto margin and simply precedes it. */ .bu-topbar__mark + .bu-role { margin-left: 12px; } @media (max-width: 620px) { /* The lockup shrinks rather than vanishing — the brand should survive on a phone, which is where this console actually lives. */ .bu-topbar__mark { height: 34px; max-width: 104px; margin-right: 11px; padding-right: 11px; } .bu-topbar__logo { height: 34px; padding-right: 12px; } } @media (max-width: 400px) { /* Below this the bar holds a chevron, a logo and a farm name in about 340px, and the name is the one that cannot be guessed. So on SUB-pages the lockup steps aside; the home page keeps its own, because there it is the only thing identifying the console. */ .bu-topbar__mark { display: none; } } /* ============================================================================= THE REGISTRATION FORM ============================================================================= This was a two-column auto-fit grid with a "Level 3 / Level 4 / Level 5" badge beside every location field. Both are gone, for reasons that are not taste: THE COLUMNS. Baymard's form testing is blunt about multi-column layouts — columns of empty fields pull the eye in two directions, and people both skip fields they never saw and fill ones they misread as required, even when separators are added. NN/g says the same: multiple columns "interrupt the vertical momentum of moving down the form". Their shared exception is two or three GENUINELY related fields on one line, which is why first/last name and country/state share a row and nothing else does. THE LEVEL BADGES. They put our internal taxonomy on screen. A buddy filling this in does not need to know District is the third rung of an abstract hierarchy — numbering the fields made the form read like a database schema, and nobody has ever needed that to fill in an address. Order and grouping carry the hierarchy on their own, which is how every address form works. What replaces both: sections with real headings. NN/g's second recommendation is to visually group related fields, and a heading a buddy can scan ("Their name", "How they sign in", "Where they live") does more for orientation than a badge on each field ever did. ========================================================================== */ .bu-sect { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--nz-border, #E5EAF2); } .bu-sect--last { padding-bottom: 6px; margin-bottom: 0; border-bottom: 0; } .bu-sect__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--bu-display, 'Space Grotesk'), Inter, system-ui, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nz-text-3, #64748B); } /* The same 3px lime stub the rest of the console marks a section with. */ .bu-sect__title::before { content: ''; flex: none; width: 3px; height: 15px; border-radius: 2px; background: var(--nz-lime, #3BD304); } /* One note per section, carrying what used to be repeated in three separate field hints. Placed under the heading, where it is read once before the fields rather than three times beside them. */ .bu-sect__note { margin: -6px 0 18px; max-width: 68ch; font-size: 13px; line-height: 1.6; color: var(--nz-text-3, #64748B); } .bu-sect__note strong { color: var(--nz-text-2, #475569); font-weight: 600; } /* ---- single column, with a sanctioned exception ---- */ .bu-sect .bu-field { margin-bottom: 18px; } .bu-sect .bu-field:last-child { margin-bottom: 0; } .bu-row { display: grid; gap: 18px; margin-bottom: 18px; } .bu-row:last-child { margin-bottom: 0; } .bu-row .bu-field { margin-bottom: 0; } /* Two fields that are one thing: a name, or a country and the state inside it. Everything else stays in one column. */ .bu-row--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .bu-row--2 { grid-template-columns: 1fr; } } /* ---- required, marked once ---- NN/G: distinguish required from optional, and keep the marking to one convention. Most fields on this form are genuinely optional, so the star marks the few that are not and everything unmarked is optional by definition. The "optional" chips that used to sit beside those labels said the same thing a second time, on nearly every row — which is noise, not clarity. The convention is stated once under the step heading instead. */ .bu-req { color: var(--nz-danger, #B91C1C); font-weight: 700; } /* ---- a field with something to hide ---- The Aadhaar input. The eye is inside the field rather than beside it, because a control that belongs to one input should not read as a sibling of it, and the padding below reserves exactly its width so a twelve-digit number can never slide underneath. */ .bu-reveal { position: relative; display: block; } .bu-reveal .bu-input { padding-right: 56px; font-variant-numeric: tabular-nums; /* Bullets and digits share a column, so the string does not reflow as the mask lifts. */ letter-spacing: .08em; } .bu-reveal__btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 16px; color: var(--nz-text-3, #64748B); background: transparent; border: 0; border-radius: 11px; cursor: pointer; transition: color .16s var(--nz-ease, ease), background .16s var(--nz-ease, ease); } .bu-reveal__btn:hover { color: var(--nz-navy, #00243C); background: var(--nz-surface-alt, #F1F5F9); } .bu-reveal__btn:focus-visible { outline: 3px solid var(--nz-lime, #3BD304); outline-offset: 2px; } .bu-reveal__btn[aria-pressed="true"] { color: var(--nz-blue, #004AF7); } /* ---- the carried-over location on step 2 ---- State, district and mandal come from step 1 rather than being asked twice. A quiet line, not a set of fields: it is there so the buddy can CHECK what Form I will say, and check is a reading task. */ .bu-carried { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 18px; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--nz-navy, #00243C); background: var(--nz-surface-alt, #F8FAFD); border: 1px solid var(--nz-border, #E5EAF2); border-radius: 12px; } .bu-carried i { color: var(--nz-lime-text, #217A00); } .bu-carried [data-unset] { font-weight: 500; font-style: italic; color: var(--nz-text-3, #94A3B8); } /* ============================================================================= SEARCHABLE SELECT ============================================================================= 249 countries in a native