/* Phase 6B: authenticated mobile shell. Public Collection is the visual reference. */
:root{
  --ech-shell-paper:#f4eee4;
  --ech-shell-ink:#12382c;
  --ech-shell-bronze:#a17b43;
  --ech-shell-muted:#716d62;
  --ech-shell-rule:rgba(18,56,44,.20);
  --ech-shell-space-1:var(--ech-space-1, 4px);
  --ech-shell-space-2:var(--ech-space-2, 8px);
  --ech-shell-space-3:var(--ech-space-3, 12px);
  --ech-shell-space-4:var(--ech-space-4, 16px);
  --ech-shell-radius-control:12px;
  --ech-shell-radius-panel:18px;
  --ech-shell-elevation-header:0 8px 20px rgba(18,56,44,.04);
  --ech-shell-z-header:40;
}

.ech-mobile-app-shell{ display:none; }
.dashboard-home-summary{ display:none; }
.ech-mobile-page-intro{ display:none; }

@media (max-width:760px){
  body.ech-mobile-shell-active{
    background:var(--ech-shell-paper);
  }

  #appRoot > .ech-mobile-app-shell{
    position:sticky;
    z-index:var(--ech-shell-z-header);
    top:0;
    display:block;
    min-height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) var(--ech-page-gutter, 20px) 0;
    border-bottom:1px solid var(--ech-shell-rule);
    background:rgba(244,238,228,.96);
    box-shadow:var(--ech-shell-elevation-header);
    backdrop-filter:blur(10px);
  }

  .ech-mobile-shell-inner{
    display:grid;
    grid-template-columns:46px minmax(0, 1fr) auto;
    align-items:center;
    min-height:56px;
    gap:var(--ech-shell-space-3);
  }

  .ech-mobile-shell-brand{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid rgba(161,123,67,.42);
    border-radius:50%;
    background:rgba(255,255,255,.22);
  }

  .ech-mobile-shell-brand img{
    display:block;
    width:30px;
    height:30px;
    object-fit:contain;
  }

  .ech-mobile-shell-context{
    min-width:0;
    display:grid;
    gap:2px;
  }

  .ech-mobile-shell-context-kicker{
    overflow:hidden;
    color:var(--ech-shell-bronze);
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:9px;
    font-weight:600;
    letter-spacing:.13em;
    line-height:1.1;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .ech-mobile-shell-context-title{
    overflow:hidden;
    color:var(--ech-shell-ink);
    font-family:Georgia, "Times New Roman", serif;
    font-size:20px;
    font-weight:400;
    letter-spacing:-.025em;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .ech-mobile-shell-utilities{
    display:flex;
    align-items:center;
    gap:var(--ech-shell-space-2);
  }

  .ech-mobile-shell-profile-slot{
    display:flex;
    justify-content:flex-end;
    min-width:46px;
  }

  /* The existing account controller owns the menu and its handlers. */
  #echMobileAppShell .ech-mobile-account-anchor{
    position:relative;
    top:auto;
    right:auto;
    z-index:auto;
  }

  #echMobileAppShell .ech-mobile-account-btn{
    width:46px;
    height:46px;
    border-color:var(--ech-shell-rule);
    background:rgba(255,255,255,.28);
    box-shadow:none;
  }

  #appRoot #echMobileAppShell .notification-mailbox-control{
    position:relative;
    top:auto;
    right:auto;
    z-index:auto;
    display:inline-flex;
  }

  #appRoot #echMobileAppShell .notification-mailbox-trigger{
    position:relative;
    width:46px;
    height:46px;
    border-color:var(--ech-shell-rule);
    border-radius:50%;
    background:rgba(255,255,255,.28);
    box-shadow:none;
  }

  #appRoot #echMobileAppShell .notification-mailbox-trigger img{
    width:33px;
    height:33px;
  }

  #appRoot #echMobileAppShell .notification-mailbox-trigger.has-unread::after{
    content:"";
    position:absolute;
    top:7px;
    right:7px;
    width:7px;
    height:7px;
    border:1px solid var(--ech-shell-paper);
    border-radius:50%;
    background:var(--ech-shell-bronze);
  }

  #echMobileAppShell .ech-mobile-account-menu{
    z-index:90;
    top:calc(100% + 9px);
    right:0;
    border-radius:var(--ech-shell-radius-panel);
  }

  #echMobileAppShell .ech-mobile-account-menu{
    gap:9px;
    padding:13px;
    background:rgba(248,244,236,.99);
    box-shadow:0 18px 34px rgba(18,56,44,.14);
  }

  #echMobileAppShell .ech-mobile-account-summary{
    gap:4px;
    padding:4px 5px 9px;
    line-height:1.25;
  }

  #echMobileAppShell .ech-mobile-account-language{
    min-height:50px;
    padding:7px;
    border-color:var(--ech-shell-rule);
    background:rgba(255,255,255,.20);
  }

  #echMobileAppShell .ech-mobile-account-language .hero-language-switch{
    justify-content:space-between;
    gap:6px;
  }

  #echMobileAppShell .ech-mobile-account-language .lang-flag-btn{
    width:42px !important;
    height:36px !important;
    min-width:42px !important;
    flex-basis:42px !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    padding:4px !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #echMobileAppShell .ech-mobile-account-language .lang-flag-btn.active{
    border-color:var(--ech-shell-bronze) !important;
    background:rgba(161,123,67,.14) !important;
    box-shadow:inset 0 0 0 1px rgba(161,123,67,.16) !important;
  }

  #echMobileAppShell .ech-mobile-account-language .lang-flag-btn img{
    width:25px;
    height:18px;
    object-fit:cover;
    opacity:.62;
    filter:saturate(.72);
  }

  #echMobileAppShell .ech-mobile-account-language .lang-flag-btn.active img{
    opacity:1;
    filter:none;
  }

  #echMobileAppShell .ech-mobile-account-action{
    min-height:48px;
    align-items:center;
    padding:12px 13px;
    border-color:var(--ech-shell-rule);
    background:rgba(255,255,255,.20);
  }

  #humidor .filters-grid,
  #history .filters-grid{
    gap:8px !important;
    margin-bottom:10px;
  }

  #humidor .input,
  #humidor .select,
  #history .input,
  #history .select{
    min-height:46px !important;
    padding:10px 13px !important;
    border-radius:13px !important;
    font-size:15px !important;
    line-height:1.3 !important;
  }

  #humidor .search-wrap,
  #history .search-wrap{
    margin-bottom:8px;
  }

  #humidor .filters-grid + *,
  #history .filters-grid + *{
    margin-top:0 !important;
  }

  #appRoot .dashboard-panorama-detail{
    position:relative;
  }

  #humidor > .ech-mobile-page-intro,
  #history > .ech-mobile-page-intro{
    display:block;
    margin:var(--ech-space-6, 24px) var(--ech-page-gutter, 20px) var(--ech-space-4, 16px);
    padding:20px 18px 18px;
    overflow:hidden;
    border:1px solid var(--ech-shell-rule);
    border-radius:var(--ech-shell-radius-panel);
    background:
      radial-gradient(circle at 100% 0, rgba(161,123,67,.10), transparent 92px),
      rgba(255,255,255,.20);
    box-shadow:0 10px 22px rgba(18,56,44,.04);
  }

  .ech-mobile-page-intro__eyebrow{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:13px;
    color:var(--ech-shell-bronze);
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:10px;
    font-weight:600;
    letter-spacing:.13em;
    line-height:1.2;
    text-transform:uppercase;
  }

  .ech-mobile-page-intro__icon{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border:1px solid rgba(161,123,67,.34);
    border-radius:9px;
    background:rgba(161,123,67,.08);
  }

  .ech-mobile-page-intro__icon svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:var(--ech-shell-bronze);
    stroke-width:1.6;
  }

  .ech-mobile-page-intro__title{
    margin:0 0 7px;
    color:var(--ech-shell-ink);
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(29px, 8vw, 36px);
    font-weight:400;
    letter-spacing:-.04em;
    line-height:1;
  }

  .ech-mobile-page-intro__description{
    max-width:42ch;
    margin:0;
    color:var(--ech-shell-muted);
    font-size:14px;
    line-height:1.45;
  }

  /* The original headings remain available on desktop; the mobile intro owns presentation. */
  #humidor .inventory-grid-full > .card:nth-child(2) > .card-header > .section-head,
  #history > .card > .card-header > .section-head{
    display:none;
  }

  #humidor .inventory-grid-full > .card:nth-child(2) > .card-header,
  #history > .card > .card-header{
    padding-top:0 !important;
    border-bottom:0;
  }

  #humidor .inventory-grid-full > .card:nth-child(2) > .card-header .toolbar,
  #history > .card > .card-header .toolbar{
    margin-top:0;
  }

  body.ech-mobile-home-active #appRoot .container > .hero{
    display:none !important;
  }

  body.ech-mobile-home-active[data-ech-dashboard-view="home"] #dashboard .dashboard-panorama-detail{
    display:none !important;
  }

  body.ech-mobile-home-active[data-ech-dashboard-view="panorama"] #dashboardHomeSummary{
    display:none !important;
  }

  #dashboardHomeSummary{
    display:block;
    padding:22px 0 calc(var(--ech-mobile-dock-total, 88px) + 18px);
  }

  #dashboardHomeSummary[hidden]{ display:none !important; }

  .ech-mobile-home-intro{
    padding:0 var(--ech-page-gutter, 20px) 18px;
  }

  .ech-mobile-home-intro h1{
    margin:0 0 5px;
    color:var(--ech-shell-ink);
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(28px, 8vw, 36px);
    font-weight:400;
    letter-spacing:-.04em;
    line-height:1;
  }

  .ech-mobile-home-intro p{
    margin:0;
    color:var(--ech-shell-muted);
    font-size:15px;
    line-height:1.45;
  }

  .ech-mobile-home-surface{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    margin:0 var(--ech-page-gutter, 20px);
    overflow:hidden;
    border:1px solid var(--ech-shell-rule);
    border-radius:var(--ech-shell-radius-panel);
    background:rgba(255,255,255,.23);
    box-shadow:0 12px 26px rgba(18,56,44,.045);
  }

  .ech-mobile-home-territory{
    min-height:150px;
    display:grid;
    align-content:start;
    gap:8px;
    padding:18px 16px;
    border:0;
    background:transparent;
    color:var(--ech-shell-ink);
    text-align:left;
    transition:background 160ms ease-out, transform 160ms ease-out;
  }

  .ech-mobile-home-territory:nth-child(odd){ border-right:1px solid var(--ech-shell-rule); }
  .ech-mobile-home-territory:nth-child(-n + 2){ border-bottom:1px solid var(--ech-shell-rule); }
  .ech-mobile-home-territory:active{ background:rgba(161,123,67,.10); transform:scale(.985); }
  .ech-mobile-home-territory:focus-visible,
  .ech-mobile-home-panorama-link:focus-visible,
  .ech-mobile-home-back:focus-visible{ outline:2px solid var(--ech-shell-bronze); outline-offset:-3px; }

  .ech-mobile-home-territory-icon{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    color:var(--ech-shell-bronze);
  }

  .ech-mobile-home-territory-icon svg,
  .ech-mobile-home-panorama-link svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
  }

  .ech-mobile-home-territory-label{
    color:var(--ech-shell-bronze);
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:10px;
    font-weight:600;
    letter-spacing:.11em;
    line-height:1.2;
    text-transform:uppercase;
  }

  .ech-mobile-home-territory-value{
    color:var(--ech-shell-ink);
    font-family:Georgia, "Times New Roman", serif;
    font-size:19px;
    font-weight:400;
    letter-spacing:-.025em;
    line-height:1.12;
  }

  .ech-mobile-home-panorama-link,
  .ech-mobile-home-back{
    display:flex;
    align-items:center;
    gap:7px;
    margin:16px var(--ech-page-gutter, 20px) 0;
    border:0;
    border-bottom:1px solid var(--ech-shell-bronze);
    padding:0 0 4px;
    background:transparent;
    color:var(--ech-shell-ink);
    font:600 14px/1.2 ui-sans-serif, system-ui, sans-serif;
  }

  .ech-mobile-home-panorama-link svg{ width:16px; height:16px; }
  .ech-mobile-home-secondary{ margin:28px var(--ech-page-gutter, 20px) 0; }

  #mobileHomeInvestedSlot{ margin-bottom:16px; }

  .ech-mobile-invested-card{
    min-height:0 !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px !important;
    border:1px solid var(--ech-shell-rule) !important;
    border-radius:var(--ech-shell-radius-panel) !important;
    background:rgba(255,255,255,.23) !important;
    box-shadow:0 10px 22px rgba(18,56,44,.04) !important;
  }

  .ech-mobile-invested-card__label{
    color:var(--ech-shell-bronze) !important;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:10px !important;
    letter-spacing:.12em !important;
  }

  .ech-mobile-invested-card__value{
    margin-top:6px;
    max-width:calc(100vw - 126px);
    color:var(--ech-shell-ink) !important;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(24px, 7.5vw, 32px) !important;
    letter-spacing:-.035em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .ech-mobile-invested-card__toggle{
    width:42px;
    height:42px;
    border-color:var(--ech-shell-rule);
    border-radius:50%;
    background:rgba(255,255,255,.25);
  }

  .ech-mobile-invested-card__toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ech-mobile-invested-card__hint{
    margin-top:5px !important;
    color:var(--ech-shell-muted) !important;
    font-size:13px !important;
  }

  .ech-mobile-invested-card__toggle.is-open{
    border-color:rgba(18,56,44,.35);
    background:rgba(18,56,44,.10);
    color:var(--ech-shell-ink);
  }

  .ech-mobile-home-secondary .hero-support-card{
    display:grid !important;
    width:100%;
    margin:0 !important;
  }

  /* Search tools are independent from the collection and journal content. */
  #humidor .inventory-grid-full > .card:nth-child(2),
  #history > .card{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  #humidor .inventory-grid-full > .card:nth-child(2) > .card-header,
  #history > .card > .card-header{
    padding:0;
    border:0;
    background:transparent;
  }

  #humidor .section-icon,
  #history .section-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(161,123,67,.34);
    border-radius:12px;
    background:rgba(161,123,67,.08);
    font-size:17px;
  }

  #humidor .section-title,
  #history .section-title{
    color:var(--ech-shell-ink);
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(25px, 7vw, 31px);
    font-weight:400;
    letter-spacing:-.035em;
    line-height:1;
  }

  #humidor .section-subtitle,
  #history .section-subtitle{
    margin-top:5px;
    color:var(--ech-shell-muted);
    font-size:14px;
    line-height:1.4;
  }

  #humidor .toolbar,
  #history .toolbar{
    gap:8px !important;
    margin-top:14px;
  }

  #humidor .inventory-grid-full > .card:nth-child(2) > .card-content,
  #history > .card > .card-content{
    padding:18px 0 0;
    background:transparent;
  }

  #inventoryList .inventory-card,
  #historyList .history-final-card{
    border-color:var(--ech-shell-rule) !important;
    border-radius:16px !important;
    box-shadow:0 8px 18px rgba(18,56,44,.045) !important;
  }

  #inventoryList .inventory-card-create{
    background:rgba(255,255,255,.25) !important;
    box-shadow:none !important;
  }

  #historyList .history-final-card-body{
    padding:16px !important;
  }

  #historyList .history-final-card-title{
    font-family:Georgia, "Times New Roman", serif;
    letter-spacing:-.03em;
  }

  #inventoryList .btn,
  #historyList .history-final-action{
    min-height:44px !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }

  .ech-mobile-home-back{
    margin:14px 0 18px;
    color:var(--ech-shell-muted);
    font-size:13px;
  }

  @media (prefers-reduced-motion:reduce){
    .ech-mobile-home-territory{ transition:none; }
  }
}

@media (max-width:359px){
  .ech-mobile-shell-inner{ grid-template-columns:38px minmax(0, 1fr) auto; gap:8px; }
  .ech-mobile-shell-brand{ width:32px; height:32px; }
  .ech-mobile-shell-brand img{ width:27px; height:27px; }
  #echMobileAppShell .ech-mobile-account-btn{ width:44px; height:44px; }
  #echMobileAppShell .notification-mailbox-trigger{ width:44px; height:44px; }
  .ech-mobile-home-territory{ min-height:138px; padding:15px 13px; }
  .ech-mobile-home-territory-value{ font-size:17px; }
}