/* Shared visual rules for Android and the web account. Theme colors have one source. */
:root,:root[data-theme="light"]{
  --bg:#f6f8f6;
  --paper:#fff;
  --white:#fff;
  --ink:#233d34;
  --text:#233d34;
  --muted:#53685d;
  --line:#d7e1db;
  --soft:#edf3ef;
  --sage:#edf3ef;
  --green:#205d49;
  --accent:#205d49;
  --on-accent:#fff;
  --danger:#9d352c;
  --warning:#80591b;
  --warning-bg:#fff4df;
  --danger-bg:#fff0ed;
  --success-bg:#eaf5ed;
  --panel-radius:16px;
  --control-radius:11px;
  --focus:#36896b;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#111c18;
  --paper:#1a2922;
  --white:#1a2922;
  --ink:#edf3ef;
  --text:#edf3ef;
  --muted:#bacac0;
  --line:#3a5043;
  --soft:#263c30;
  --sage:#263c30;
  --green:#a1d8b6;
  --accent:#a1d8b6;
  --on-accent:#112d20;
  --danger:#ffb5a8;
  --warning:#f1cb86;
  --warning-bg:#3a301f;
  --danger-bg:#3b2824;
  --success-bg:#263c30;
  --focus:#a1d8b6;
  color-scheme:dark;
}
html{
  scroll-padding-block:90px 110px}
body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.85}
button,input,select,textarea{
  font:inherit}
p,small,summary,label,button{
  overflow-wrap:break-word}
button{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--line)}
.section-help{
  background:var(--soft)!important;
  color:var(--ink)!important;
  border-color:var(--line)!important}
small,.muted,.lead,.help-note,.activity-help,.library-metrics{
  color:var(--muted)}
:is(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px}
input,select,textarea{
  color:var(--ink);
  background:var(--paper);
  border-color:var(--line);
  border-radius:var(--control-radius);
  scroll-margin-block:100px 120px}
input::placeholder,textarea::placeholder{
  color:var(--muted);
  opacity:1}
button,.button,summary{
  touch-action:manipulation}
button:disabled,.button:disabled{
  opacity:.62;
  cursor:default}
.button.primary,.profile-primary-action,.archive-library [data-library-export],.archive-library [data-library-confirm]{
  background:var(--green)!important;
  color:var(--on-accent)!important;
  border-color:var(--green)!important}
.auth-card form button:not(:is(.field-help,.section-help)),.workspace-content form button:not(:is(.secondary,.danger,.field-help,.section-help)),.stack-form>button:not(:is(.secondary,.subtle,.field-help,.section-help)){
  background:var(--green);
  color:var(--on-accent)}
.button.subtle,.button.secondary,button.secondary{
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-color:var(--line)!important}
:root[data-theme="dark"] :is(.settings-card,.transfer-panel,.wizard-card,.transfer-wizard,.stack-form,.connection-form,.auth-card,.workspace-content,.section-navigation,.library-dialog,.transfer-profile-card,.activity-post,dialog){
  background:var(--paper)!important;
  color:var(--ink);
  border-color:var(--line)!important}
:root[data-theme="dark"] :is(.profile-card-status,.source-platform-picker label,.destination-options label,.library-filter-chips span,.help-note,.review-scope,.profile-setup-state,.review-plain-summary){
  background:var(--soft)!important;
  color:var(--ink);
  border-color:var(--line)!important}
:root[data-theme="dark"] :is(.topbar,.sidebar,.primary-navigation,.section-navigation){
  background:var(--paper)!important;
  color:var(--ink);
  border-color:var(--line)!important}
:root[data-theme="dark"] :is(.notice,.operation-feedback.error,.form-result,.actionable-error){
  background:var(--danger-bg);
  color:var(--danger);
  border-color:var(--line)}
:root[data-theme="dark"] :is(.settings-card p,.settings-card small,.auth-card p,.profile-card-glance,.profile-card-last,.library-card-body small,.workspace-toolbar,.page-heading p){
  color:var(--muted)!important}
:root[data-theme="dark"] :is(.library-status,.profile-result.success,.operation-feedback.success){
  background:var(--success-bg);
  color:var(--ink)}
:root[data-theme="dark"] :is(.activity-status,.activity-summary-status,.library-status.missing){
  background:var(--warning-bg);
  color:var(--warning)}
.settings-card{
  padding:20px;
  border-radius:var(--panel-radius);
  box-shadow:none}
.settings-card .settings-card,.wizard-card .settings-card{
  padding:16px;
  margin-block:10px;
  border-radius:12px;
  box-shadow:none}
.settings-card h2,.wizard-pane h2{
  font-size:1.16rem;
  line-height:1.7;
  margin-block:0 8px}
.settings-card p,.wizard-pane>p{
  line-height:1.9}
.settings-card details>summary,.device-settings details>summary{
  min-height:44px;
  display:list-item;
  padding-block:8px}
.settings-card details:not([open]){
  padding-block:4px}
.topbar{
  gap:10px!important;
  min-width:0}
.topbar-actions{
  gap:8px!important;
  min-width:0}
.workspace-context-compact{
  flex:1 1 130px;
  max-width:360px;
  margin:0!important;
  padding:0!important;
  min-width:0}
.workspace-context-compact select{
  min-width:0!important;
  width:100%;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-height:44px}
.native-shell .topbar{
  min-height:60px;
  padding-block:6px!important;
  flex-wrap:nowrap!important;
  align-items:center}
.native-shell .topbar .breadcrumb{
  display:none}
.native-shell .topbar-actions{
  display:flex;
  flex-wrap:nowrap!important;
  flex:1;
  justify-content:flex-end}
.native-shell .topbar-actions>.icon-button{
  width:38px;
  min-width:38px;
  height:42px;
  padding:8px;
  border-radius:12px;
  flex-shrink:0}
.native-shell .account-entry{
  min-width:44px;
  flex-shrink:0;
  padding:8px!important;
  border-radius:12px!important}
.native-shell .account-entry [data-account-label]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip-path:inset(50%);
  white-space:nowrap!important}
.native-shell .account-entry svg{
  margin:0}
.transfer-profile-list{
  align-items:start;
  gap:14px}
#identity>article:has(.transfer-profile-list),#transfer-profiles{
  border:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important}
.transfer-profile-card{
  padding:18px;
  border-radius:var(--panel-radius);
  box-shadow:none;
  border:1px solid var(--line)}
.transfer-profile-card.is-active{
  border-color:var(--green);
  box-shadow:inset 0 3px 0 var(--green)}
.profile-card-heading{
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap}
.profile-card-heading h3{
  font-size:1.05rem;
  line-height:1.8;
  margin:0}
.profile-card-status{
  font-size:.78rem;
  line-height:1.8;
  padding:4px 9px;
  background:var(--soft);
  color:var(--ink);
  max-width:100%}
.profile-status-icon{
  display:inline-block;
  margin-inline-end:5px;
  font-weight:800}
.profile-card-route{
  font-size:.92rem;
  line-height:1.9;
  margin-block:10px 12px;
  gap:6px}
.profile-card-details{
  border-block-start:1px solid var(--line);
  margin-block:12px 4px;
  padding-block:0}
.profile-card-details>summary{
  min-height:44px;
  color:var(--muted);
  font-size:.84rem}
.profile-card-counts>span{
  border:0;
  background:var(--soft);
  color:var(--ink);
  border-radius:8px;
  padding:4px 8px}
.profile-card-counts .needs-attention{
  background:var(--warning-bg);
  color:var(--warning)}
.profile-card-actions{
  gap:8px;
  align-items:center}
.profile-card-actions>button:not(.profile-primary-action){
  font-size:.84rem}
.profile-card-actions button{
  border-radius:var(--control-radius);
  min-height:44px;
  line-height:1.7}
.profile-card-details .transfer-phase-summary{
  margin-block:10px}
.profile-result.success{
  border-inline-start:3px solid var(--green);
  background:var(--soft);
  padding:8px 12px;
  font-size:.84rem}
.wizard-actions,.journey-web-actions{
  background:var(--paper);
  border-block-start:1px solid var(--line);
  padding-block:12px;
  margin-block-start:16px;
  gap:10px}
.wizard-actions button,.journey-web-actions a{
  min-height:46px;
  padding:10px 16px;
  font-size:.94rem;
  line-height:1.7}
.wizard-next-hint{
  color:var(--muted);
  font-size:.85rem;
  margin-block:8px;
  line-height:1.8}
.library-heading{
  margin-bottom:10px}
.library-tools{
  gap:10px}
.library-metrics{
  font-size:.82rem}
.archive-library .library-card-check{
  display:none;
  min-width:40px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px #0002}
.archive-library.is-selecting .library-card-check{
  display:flex}
.library-browse-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-block:8px}
.library-browse-actions .library-select-menu{
  margin:0;
  flex:1}
.library-select-menu>summary{
  display:inline-flex!important;
  align-items:center;
  min-height:44px!important;
  padding:6px 12px!important;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  font-weight:600}
.library-card-body small{
  font-size:.78rem;
  line-height:1.8}
.library-card-body p{
  font-size:.92rem}
.library-technical{
  margin-block:14px;
  font-size:.85rem}
.library-technical>summary{
  cursor:pointer;
  min-height:44px;
  padding-block:8px;
  color:var(--muted)}
.library-technical .library-health{
  margin-block:0;
  border:0;
  border-block-start:1px solid var(--line);
  border-radius:0;
  padding-inline:0}
.library-technical>summary:empty{
  display:none}
.library-technical>.library-health>summary{
  font-size:.85rem}
.appearance-note{
  display:block;
  color:var(--muted);
  font-size:.84rem;
  margin-block:8px}
.field-validation{
  display:block!important;
  grid-column:1/-1;
  flex-basis:100%;
  color:var(--danger)!important;
  font-size:.84rem;
  line-height:1.8;
  margin-block:5px 8px}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--danger)!important;
  outline-color:var(--danger)!important}
.toast{
  max-width:min(480px,calc(100vw - 32px));
  font-size:.88rem!important;
  line-height:1.8;
  box-shadow:0 4px 18px #0002}
.toast button{
  border:0;
  background:transparent;
  color:inherit;
  min-width:36px;
  min-height:36px;
  margin-inline-start:10px;
  padding:4px;
  font:inherit;
  cursor:pointer}
.toast .toast-text{
  white-space:pre-wrap}
.toast[hidden]{
  display:none!important}
.operation-feedback{
  display:flex;
  gap:8px;
  align-items:start;
  line-height:1.85}
.operation-feedback::before{
  content:'ⓘ';
  font-weight:700}
.operation-feedback.error::before{
  content:'!';
  color:var(--danger)}
.operation-feedback.success::before{
  content:'✓';
  color:var(--green)}
@media(max-width:600px){
  .native-shell .topbar{
    padding-inline:12px!important}
  .native-shell .topbar .local-badge{
    display:none}
  .native-shell .topbar-actions{
    gap:6px!important}
  .native-shell .topbar-actions>.icon-button{
    width:44px;
    min-width:44px;
    padding:9px}
  .workspace-context-compact select{
    font-size:.88rem!important}
  .content{
    padding-inline:14px!important}
  .settings-card{
    padding:16px}
  .settings-card .settings-card{
    padding:12px}
  .transfer-profile-card{
    padding:14px}
  .profile-card-actions>.profile-primary-action{
    flex:1 1 100%}
  .profile-card-heading h3{
    font-size:1rem}
  .library-tools label{
    flex:1 1 120px}
  .library-tools .library-search{
    order:-1;
    flex-basis:100%}
  .library-heading .library-actions{
    gap:6px}
  .archive-library .library-heading button{
    font-size:.8rem;
    padding:7px 10px}
  .library-grid{
    margin-block-start:10px}
  .library-selection{
    max-height:35dvh;
    overflow:auto}
  .wizard-actions{
    position:sticky;
    bottom:calc(var(--bottom-nav-height,76px) + 4px);
    z-index:6;
    margin-inline:-4px;
    padding-inline:4px}
  .is-keyboard-open .wizard-actions{
    position:static}
  .is-keyboard-open .library-selection{
    position:static}
  .is-keyboard-open .sidebar{
    display:none!important}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto!important}
  *,*::before,*::after{
    transition:none!important;
    animation:none!important}
}
/* Shared transfer readiness and device storage controls. */
.transfer-preflight{
  border:1px solid var(--line,#cbd5e1);
  border-radius:14px;
  padding:14px;
  margin-block:12px;
  background:var(--paper,#fff);
  color:var(--ink,#233d34)}
.readiness-checks{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:10px}
.readiness-checks li{
  border:1px solid var(--border,#cbd5e1);
  border-inline-start:4px solid #4d8d73;
  border-radius:10px;
  padding:10px;
  min-width:0}
.readiness-checks .readiness-warning{
  border-inline-start-color:#b7791f}
.readiness-checks .readiness-error{
  border-inline-start-color:#c74a4a}
.readiness-checks p{
  margin-block:6px;
  font-size:.92em}
.readiness-checks button{
  font-size:.9em;
  padding:6px 10px}
.device-download-settings{
  border-block-start:1px solid var(--border,#cbd5e1);
  padding-block-start:12px;
  margin-block-start:14px}
[data-download-settings]{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:10px}
[data-download-settings] label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0}
[data-download-settings] button{
  align-self:end}
.device-space-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:8px}
.device-space-summary>div{
  border:1px solid var(--border,#cbd5e1);
  border-radius:10px;
  padding:10px}
.device-space-summary dd{
  margin:6px 0 0;
  font-weight:600;
  overflow-wrap:anywhere}
/* Compact profile tools and verified connections, shared by web and Android. */
.attention-item{
  grid-template-columns:minmax(0,1fr)!important}
.attention-item>p:empty{
  display:none}
.attention-item>strong,.attention-item>p,.attention-item>.attention-actions{
  grid-column:1!important;
  min-width:0}
.attention-item>p{
  margin-block:.4rem;
  overflow-wrap:anywhere}
.content-search-bar{
  display:flex;
  align-items:end;
  gap:.6rem}
.content-search-bar label{
  flex:1;
  min-width:0}
.content-search-bar button{
  flex:none}
.content-search form{
  display:block}
.content-search label{
  margin:0!important;
  gap:.25rem}
.content-search .composer-caption{
  font-size:.9rem}
.content-search-options{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.7rem;
  margin:.6rem 0}
.content-search-options label{
  margin:0!important}
.content-search-options .composer-check{
  display:flex;
  gap:.4rem;
  align-items:center}
.content-search .compact-options{
  margin-block:.65rem}
.content-search .compact-options[open]{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.6rem}
.content-search .compact-options summary{
  grid-column:1/-1}
.content-search [data-search-results]{
  display:grid;
  gap:.6rem;
  margin-block:.7rem}
.search-result{
  border:1px solid var(--border,#77889955);
  border-radius:12px;
  padding:.75rem;
  min-width:0}
.search-result p{
  margin:.4rem 0;
  overflow-wrap:anywhere}
.search-result button{
  margin:0;
  min-height:40px}
.connection-details{
  margin-block:.3rem}
.connection-details summary{
  font-size:.86rem;
  cursor:pointer}
.connection-details[open]{
  padding-block:.4rem}
.connection-details small{
  display:block;
  overflow-wrap:anywhere}
.control-record{
  padding:.75rem!important}
.control-record>.card-header{
  margin-bottom:.35rem}
.control-record>button{
  margin-block:.2rem}
.profile-policy-options{
  margin-block:.8rem;
  border:1px solid var(--border,#77889955);
  border-radius:12px;
  padding:.7rem}
.profile-policy-options>summary{
  font-weight:600;
  cursor:pointer}
.profile-policy-options .composer{
  margin:0;
  padding:0;
  border:0;
  box-shadow:none}
.profile-policy-options .composer-heading h3{
  font-size:.95rem}
.policy-pending{
  margin-block:.7rem}
.policy-pending:empty{
  display:none}
.backup-destination{
  margin-block:.8rem!important;
  padding:.8rem!important;
  border:1px solid var(--border,#77889955);
  border-radius:12px}
.backup-destination>.composer-check{
  font-weight:600;
  margin:0!important}
.backup-destination [data-backup-options]>p{
  font-size:.85rem;
  line-height:1.8}
.backup-destination [data-backup-options]>p:empty{
  display:none}
.backup-destination .backup-files{
  margin-top:.7rem}
.backup-destination [data-backup-options] form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.6rem}
.backup-destination [name=keyConfirmed]{
  min-width:18px}
.backup-destination .composer-heading{
  margin:0}
@media(max-width:480px){
  .content-search-options{
    gap:.5rem}
  .content-search-options>label:first-child{
    width:100%}
  .content-search-bar button{
    padding-inline:.8rem}
  .connection-details .connection-actions{
    flex-wrap:wrap}
}
/* Transfer capabilities and account drafts: the same compact controls on both clients. */
.source-capability-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
  margin:.75rem 0}
.source-capability-list>div{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.6rem}
.source-capability-list dt{
  font-weight:700;
  font-size:.85rem}
.source-capability-list dd{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8}
.profile-cloud-draft{
  padding:.5rem .75rem;
  margin:.5rem 0;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:.85rem}
.profile-cloud-draft p:empty,.profile-cloud-draft:has(p:empty){
  display:none}
.profile-cloud-draft p{
  margin:.15rem 0}
.profile-cloud-draft>div{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap}
.profile-cloud-draft button{
  font-size:.85rem;
  min-height:44px}
.profile-cloud-draft[data-state=conflict]{
  border-color:var(--accent)}
@media(max-width:480px){
  .source-capability-list{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .source-capability-list dd{
    font-size:.8rem}
}

/* Keep alerts readable in both shared themes. */
.attention-item.warning>strong{color:var(--warning,#80591b)}
.attention-item.critical>strong{color:var(--danger,#9d352c)}
.attention-item.info>strong{color:var(--text,#233d34)}

.account-avatar{display:inline-flex;flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--soft);align-items:center;justify-content:center;vertical-align:middle;margin-inline-end:8px}.account-avatar>img{width:100%;height:100%;object-fit:cover}.account-avatar .network-mark{width:27px;height:27px}.network-mark>img{width:100%;height:100%;object-fit:contain}.network-mark{background:transparent!important;border-radius:0!important}
.social-connections{margin-block:18px;min-width:0}.social-provider{padding:16px;margin-block:12px;border:1px solid var(--line);border-radius:var(--panel-radius);background:var(--paper);color:var(--ink);min-width:0}.social-provider h4{display:flex;align-items:center;gap:8px;margin-block:0 12px}.social-provider p,.social-provider strong{overflow-wrap:anywhere}.social-provider button{min-height:44px;max-width:100%;white-space:normal}.social-identity{border-block-start:1px solid var(--line);padding-block:14px;margin-block:10px}.social-identity>div{padding-block:12px}.social-identity .check-row{display:flex;align-items:flex-start;gap:8px}.social-identity .check-row input{flex-shrink:0;margin-top:5px}.network-linkedin{color:var(--accent)}.network-x{color:var(--ink)}
.control-record .badge:not(.bad):not(.warn){background:var(--success-bg);color:var(--green)}

:root{--surface:var(--paper)}
.public-legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:8px 12px;font-size:.8rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}