/* Android Decimal: platform chrome and controls (Material 3 structure, Decimal tokens). */

.platform-android { font-family: var(--m-font-family); }

/* ---- Top app bar ---------------------------------------------------------- */
.android-app-bar { flex: none; display: flex; align-items: center; gap: var(--m-space-4); height: var(--m-nav-bar-height); padding: 0 var(--m-space-4); background: var(--m-surface-page); }
.android-app-bar__title { flex: 1; font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0; padding-left: var(--m-space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.android-app-bar--center .android-app-bar__title { text-align: center; }
.android-app-bar--medium { flex-wrap: wrap; height: var(--m-large-title-height); align-content: space-between; padding-bottom: var(--m-space-24); }
.android-app-bar--medium .android-app-bar__title { flex-basis: 100%; order: 2; font: var(--m-type-heading-4); padding-left: var(--m-space-12); }
.android-app-bar--scrolled { background: var(--m-surface-sunken); }

/* ---- Navigation bar (bottom) -------------------------------------------- */
.android-nav-bar { flex: none; display: flex; align-items: flex-start; height: var(--m-tab-bar-height); background: var(--m-surface-sunken); padding-top: var(--m-tab-bar-padding-top); }

.android-nav-bar + .home-indicator { background: var(--m-surface-sunken); }

/* System navigation: gesture handle (.home-indicator) or 3-button bar, never both */
.android-system-nav { flex: none; display: flex; align-items: center; justify-content: space-around; height: var(--m-system-nav-height); padding: 0 var(--m-space-40); background: var(--m-surface-sunken); color: var(--m-glyphs-prominent); }
.android-system-nav svg { width: var(--m-icon-s); height: var(--m-icon-s); fill: currentColor; }
.android-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--m-space-4); border: 0; background: none; color: var(--m-glyphs-default); font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); cursor: pointer; }
.android-nav-item__indicator { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 32px; border-radius: var(--m-corner-pill); }
.android-nav-item[aria-selected="true"] { color: var(--m-glyphs-prominent); }
.android-nav-item[aria-selected="true"] .android-nav-item__indicator { background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); }
.android-nav-item .m-badge { top: 0; right: var(--m-space-12); }

/* ---- Navigation rail (tablet) ------------------------------------------- */
.android-rail { width: var(--m-nav-rail-width); flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--m-space-12); padding: var(--m-space-12) 0; background: var(--m-surface-sunken); }
.android-rail .android-nav-item { flex: none; width: 100%; }
.android-rail .android-nav-item__indicator { width: 56px; }
.android-rail__fab { margin-bottom: var(--m-space-16); }
.android-rail-layout { display: flex; min-height: 360px; }
.android-rail-layout__content { flex: 1; padding: var(--m-space-16); display: flex; flex-direction: column; gap: var(--m-space-12); }

/* ---- Navigation drawer (decimal-side-nav / decimal-sidebar) ------------- */
.android-drawer { width: 300px; max-width: 85%; height: 100%; background: var(--m-surface-card); border-radius: 0 var(--m-corner-sheet) var(--m-corner-sheet) 0; padding: var(--m-space-12); display: flex; flex-direction: column; gap: var(--m-space-2); box-shadow: var(--m-elevation-high); }
.android-drawer__headline { font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); color: var(--m-glyphs-secondary); padding: var(--m-space-16) var(--m-space-16) var(--m-space-8); margin: 0; }
.android-drawer a { display: flex; align-items: center; gap: var(--m-space-12); min-height: 56px; padding: 0 var(--m-space-16); border-radius: var(--m-corner-pill); color: var(--m-glyphs-default); font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); text-decoration: none; }
.android-drawer a[aria-current="page"] { background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); }
.android-drawer hr { border: 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); margin: var(--m-space-8) var(--m-space-16); width: auto; }
.scrim--start { justify-content: flex-start; align-items: stretch; }

/* ---- Bottom app bar ------------------------------------------------------ */
.android-bottom-bar { flex: none; display: flex; align-items: center; gap: var(--m-space-4); height: 80px; padding: 0 var(--m-space-4) 0 var(--m-space-4); background: var(--m-surface-sunken); }
.android-bottom-bar .android-fab { position: static; margin-left: auto; margin-right: var(--m-space-12); box-shadow: none; }

/* ---- FAB ----------------------------------------------------------------- */
.android-fab { position: absolute; right: var(--m-space-16); bottom: var(--m-space-16); width: var(--m-fab-size); height: var(--m-fab-size); border: 0; border-radius: var(--m-corner-sheet); background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--m-elevation-high); cursor: pointer; z-index: 3; }
.android-fab--extended { width: auto; padding: 0 var(--m-space-16); gap: var(--m-space-8); font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); }

/* ---- Search bar ---------------------------------------------------------- */
.android-search { display: flex; align-items: center; gap: var(--m-space-4); height: var(--m-search-field-height); padding: 0 var(--m-space-4); border-radius: var(--m-corner-pill); background: var(--m-surface-sunken); color: var(--m-glyphs-default); }
.android-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--m-type-body-2); color: var(--m-glyphs-prominent); }

/* ---- Segmented buttons (decimal-content-switcher / binary-switcher) ----- */
.android-segmented { display: flex; border: var(--m-stroke-s) solid var(--m-stroke-control); border-radius: var(--m-corner-pill); overflow: hidden; }
.android-segment { flex: 1; min-height: var(--m-control-m); border: 0; border-right: var(--m-stroke-s) solid var(--m-stroke-control); background: transparent; color: var(--m-glyphs-default); font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--m-space-8); cursor: pointer; position: relative; }
.android-segment::after { content: ""; position: absolute; inset: -4px 0; }
.android-segment:last-child { border-right: 0; }
.android-segment[aria-selected="true"] { background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); }
.android-segment[aria-selected="true"]::before { content: ""; width: 10px; height: 6px; border-left: var(--m-stroke-m) solid currentColor; border-bottom: var(--m-stroke-m) solid currentColor; transform: rotate(-45deg) translateY(-2px); }

/* ---- Tabs (decimal-tabs) ------------------------------------------------- */
.android-tabs { flex: none; display: flex; border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); background: var(--m-surface-page); }
.android-tab { flex: 1; min-height: var(--m-touch-target); border: 0; background: none; color: var(--m-glyphs-secondary); font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); position: relative; cursor: pointer; }
.android-tab[aria-selected="true"] { color: var(--m-glyphs-action); }
.android-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; border-radius: var(--m-corner-m) var(--m-corner-m) 0 0; background: var(--m-fill-primary); }

/* ---- Lists (decimal-list / decimal-list-item) ---------------------------- */
.android-list { list-style: none; margin: 0; padding: 0; background: var(--m-surface-card); }
.android-row { display: flex; align-items: center; gap: var(--m-space-16); min-height: var(--m-list-row-min-height); padding: var(--m-space-8) var(--m-space-16); background: var(--m-surface-card); font: var(--m-type-body-2); color: var(--m-glyphs-prominent); }
.android-row--two-line { min-height: 72px; }
.android-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.android-row__sub { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); color: var(--m-glyphs-secondary); }
.android-row__trailing { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }
.android-row .icon { color: var(--m-glyphs-default); }
.android-list-header { font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); color: var(--m-glyphs-action); padding: var(--m-space-16) var(--m-space-16) var(--m-space-8); margin: 0; }
.android-divider { border: 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); margin: 0; }

/* Swipe-to-dismiss uses the shared .swipe pattern */
.swipe { position: relative; overflow: hidden; }
.swipe__actions { position: absolute; inset: 0 0 0 auto; display: flex; }
.swipe__actions button { width: 80px; border: 0; color: var(--m-glyphs-on-fill); font: var(--m-type-label-2-prominent); cursor: pointer; }
.swipe__flag { background: var(--m-fill-primary); }
.swipe__delete { background: var(--m-fill-destructive); }
.swipe__content { position: relative; z-index: 1; touch-action: pan-y; cursor: grab; transition: transform var(--m-duration-base) var(--m-easing); }
.swipe.is-dragging .swipe__content { transition: none; }

/* ---- Switch (decimal-toggle-switch) -------------------------------------- */
.android-switch { position: relative; width: var(--m-switch-width); height: var(--m-switch-height); flex: none; border-radius: var(--m-corner-pill); background: var(--m-surface-sunken); border: var(--m-stroke-m) solid var(--m-stroke-control); padding: 0; cursor: pointer; transition: background var(--m-duration-fast); }
.android-switch::after { content: ""; position: absolute; top: 50%; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--m-stroke-control); transform: translateY(-50%); transition: all var(--m-duration-fast) var(--m-easing); }
.android-switch[aria-checked="true"] { background: var(--m-fill-primary); border-color: var(--m-fill-primary); }
.android-switch[aria-checked="true"]::after { width: var(--m-switch-knob); height: var(--m-switch-knob); left: calc(var(--m-switch-width) - var(--m-switch-knob) - 8px); background: var(--m-fill-control); }
.android-switch:focus-visible { outline: var(--m-stroke-m) solid var(--m-stroke-focus); outline-offset: 2px; }

/* ---- Dialog (decimal-modal) --------------------------------------------- */
.android-dialog { width: var(--m-dialog-width); border-radius: var(--m-corner-dialog); background: var(--m-surface-card); padding: var(--m-space-24); box-shadow: var(--m-elevation-high); display: flex; flex-direction: column; gap: var(--m-space-16); }
.android-dialog__title { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0; }
.android-dialog__text { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); margin: 0; }
.android-dialog__actions { display: flex; justify-content: flex-end; gap: var(--m-space-8); }

/* ---- Bottom sheet -------------------------------------------------------- */
.android-sheet { width: 100%; background: var(--m-surface-card); border-radius: var(--m-corner-sheet) var(--m-corner-sheet) 0 0; box-shadow: var(--m-elevation-high); display: flex; flex-direction: column; max-height: 90%; }
.android-sheet__handle { align-self: center; width: var(--m-sheet-grabber-width); height: var(--m-sheet-grabber-height); border-radius: var(--m-corner-pill); background: var(--m-stroke-control); margin: var(--m-space-16) 0; }
.android-sheet__title { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0; padding: 0 var(--m-space-24) var(--m-space-8); }
.android-sheet__body { padding: 0 var(--m-space-24) var(--m-space-24); display: flex; flex-direction: column; gap: var(--m-space-16); }
.android-sheet .android-list { background: transparent; }
.android-sheet .android-row { background: transparent; padding: var(--m-space-8) var(--m-space-24); }

/* ---- Exposed dropdown (decimal-dropdown) -------------------------------- */
.android-dropdown { position: relative; }
.android-dropdown .m-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 4; }
.android-dropdown__caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid currentColor; }

/* ---- Date + time pickers (decimal-date-picker, decimal-calendar) -------- */
.android-date-dialog { width: 328px; border-radius: var(--m-corner-dialog); background: var(--m-surface-card); box-shadow: var(--m-elevation-high); overflow: hidden; }
.android-date-dialog__head { padding: var(--m-space-16) var(--m-space-24) var(--m-space-12); border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); }
.android-date-dialog__kicker { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); margin: 0 0 var(--m-space-24); }
.android-date-dialog__date { font: var(--m-type-heading-4); color: var(--m-glyphs-prominent); margin: 0; }
.android-calendar { padding: var(--m-space-12) var(--m-space-12) 0; }
.android-calendar__head { display: flex; justify-content: space-between; align-items: center; font: var(--m-type-label-2-prominent); color: var(--m-glyphs-default); padding: 0 var(--m-space-12) var(--m-space-8); }
.android-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.android-calendar__grid span { font: var(--m-type-label-1-prominent); color: var(--m-glyphs-secondary); padding: var(--m-space-8) 0; }
.android-calendar__grid button { width: 40px; height: 40px; justify-self: center; border: 0; border-radius: 50%; background: none; font: var(--m-type-body-1); color: var(--m-glyphs-prominent); cursor: pointer; }
.android-calendar__grid button[aria-selected="true"] { background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); }
.android-calendar__grid button.is-today { border: var(--m-stroke-s) solid var(--m-fill-primary); color: var(--m-glyphs-action); }
.android-date-dialog .android-dialog__actions { padding: var(--m-space-8) var(--m-space-12) var(--m-space-12); }

.android-time { display: flex; align-items: center; justify-content: center; gap: var(--m-space-8); padding: var(--m-space-24); }
.android-time__unit { width: 96px; height: 80px; border-radius: var(--m-corner-card); background: var(--m-surface-sunken); display: flex; align-items: center; justify-content: center; font: var(--m-type-heading-6); color: var(--m-glyphs-prominent); }
.android-time__unit[aria-selected="true"] { background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); }
.android-time__sep { font: var(--m-type-heading-6); color: var(--m-glyphs-prominent); }
.android-time__period { display: flex; flex-direction: column; border: var(--m-stroke-s) solid var(--m-stroke-control); border-radius: var(--m-corner-l); overflow: hidden; }
.android-time__period button { width: 52px; height: 40px; border: 0; background: none; font: var(--m-type-label-2-prominent); color: var(--m-glyphs-default); cursor: pointer; }
.android-time__period button[aria-pressed="true"] { background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); }

/* ---- Two-pane layout (list / detail) ------------------------------------ */
.android-two-pane { display: grid; grid-template-columns: 144px 1fr; min-height: 320px; }
.android-two-pane__list { border-right: var(--m-stroke-s) solid var(--m-stroke-divider); display: flex; flex-direction: column; gap: var(--m-space-4); padding: var(--m-space-8); }
.android-two-pane__list button { text-align: left; border: 0; background: none; padding: var(--m-space-8) var(--m-space-12); border-radius: var(--m-corner-pill); font: var(--m-type-label-2-prominent); color: var(--m-glyphs-default); min-height: var(--m-touch-target); cursor: pointer; }
.android-two-pane__list button[aria-current="true"] { background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); }
.android-two-pane__detail { padding: var(--m-space-16); display: flex; flex-direction: column; gap: var(--m-space-12); }

/* ---- Biometric prompt ---------------------------------------------------- */
.android-biometric { width: 100%; background: var(--m-surface-card); border-radius: var(--m-corner-sheet) var(--m-corner-sheet) 0 0; padding: var(--m-space-24); display: flex; flex-direction: column; align-items: center; gap: var(--m-space-12); text-align: center; }
.android-biometric .icon { width: 56px; height: 56px; color: var(--m-glyphs-action); }
.android-biometric__title { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0; }

/* ---- Keyboard inset (simulated) ----------------------------------------- */
.android-keyboard { flex: none; height: 232px; background: var(--m-surface-sunken); display: grid; grid-template-rows: repeat(4, 1fr); gap: var(--m-space-8); padding: var(--m-space-8) var(--m-space-4); }
.android-keyboard__row { display: flex; gap: var(--m-space-4); justify-content: center; }
.android-keyboard__row span { flex: 1; max-width: 32px; border-radius: var(--m-corner-l); background: var(--m-surface-card); }

/* ---- Pull to refresh ----------------------------------------------------- */
.android-refresh { display: flex; justify-content: center; padding: var(--m-space-12) 0; }
.android-refresh__disc { width: 40px; height: 40px; border-radius: 50%; background: var(--m-surface-card); box-shadow: var(--m-elevation-medium); display: flex; align-items: center; justify-content: center; }