/*
 * Public three-application shell.
 * Keep the geometry aligned with Web/index.html for vision, flock and reasoning.
 * Authentication and publish-only runtime details remain owned by Publish/index.html.
 */
:root{
  --app-shell-max:3533px;
  --public-page-gap:8px;
}

body.public-publish-shell{height:100dvh;min-height:100dvh;overflow:hidden}
.public-publish-shell header{flex:0 0 auto}
.public-publish-shell header .head{width:min(94vw,var(--app-shell-max));display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:center}
.public-publish-shell header .brand{justify-self:start}
.public-publish-shell header .public-nav-actions{
  --public-nav-control-height:30px;
  --public-nav-control-width:52px;
  display:flex;align-items:center;justify-self:end;gap:8px;min-width:0
}
.public-publish-shell header nav{
  display:flex;height:38px;align-items:center;justify-self:auto;gap:3px;margin-left:0;padding:3px;
  border:1px solid rgba(202,212,221,.74);border-radius:14px;background:rgba(255,255,255,.54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);overflow:visible;
}
.public-publish-shell header .session-tools{justify-self:end;margin-left:0}
.public-publish-shell header .public-logout{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--public-nav-control-width);min-width:var(--public-nav-control-width);max-width:var(--public-nav-control-width);flex:0 0 var(--public-nav-control-width);
  height:var(--public-nav-control-height);min-height:var(--public-nav-control-height);max-height:var(--public-nav-control-height);padding:0;
  border:1px solid rgba(175,194,211,.9);border-radius:9px;background:rgba(255,255,255,.72);color:#667789;
  font:500 11.5px/1 "PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.public-publish-shell header .public-logout:hover,.public-publish-shell header .public-logout:focus-visible{border-color:#7598bd;background:#edf4fb;color:#486f99;outline:none}
.public-publish-shell header nav button{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--public-nav-control-width);min-width:var(--public-nav-control-width);max-width:var(--public-nav-control-width);flex:0 0 var(--public-nav-control-width);
  height:var(--public-nav-control-height);min-height:var(--public-nav-control-height);max-height:var(--public-nav-control-height);padding:0;border:0;border-radius:9px;background:transparent;color:#596573;
  font:500 11.5px/1 "PingFang SC","Microsoft YaHei",sans-serif;white-space:nowrap;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .16s ease,box-shadow .18s ease;
}
.public-publish-shell header nav button+button::before{content:none!important;display:none!important}
.public-publish-shell header nav button:hover{background:rgba(229,238,248,.94);color:#4f78ad}
.public-publish-shell header nav button:active{transform:scale(.98)}
.public-publish-shell header nav button.active{
  border-color:transparent;background:rgba(103,139,181,.88);color:#fff;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(79,120,173,.16);
}
.public-publish-shell header nav button.active::after{content:none!important;display:none!important}
.public-publish-shell main{
  width:min(94vw,var(--app-shell-max));
  height:0;
  min-height:0;
  flex:1 1 0;
  margin:4px auto 16px;
  overflow:hidden;
}
.public-publish-shell .page{width:100%;height:100%;min-height:0}
.public-publish-shell .page.active{display:block}

.ai-shell{
  width:100%;max-width:var(--app-shell-max);height:100%;min-height:0;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--public-page-gap);overflow:hidden;
}
.ai-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px}
.ai-primary{
  display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 18px;
  border:0;border-radius:9px;background:#5b86c2;color:#fff;font-size:13px;font-weight:600;cursor:pointer;
}
.ai-primary:disabled{opacity:.5;cursor:wait}

/* Developer-page condition selector. */
.vision-condition-title{margin-bottom:4px;color:#667085;font-size:12px;font-weight:600}
.vision-condition-block+.vision-condition-block{margin-top:7px}
.vision-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:5px;margin-top:4px}
.vision-habitat-row{display:flex;align-items:end;gap:8px}
.vision-habitat-row .vision-choice-grid{min-width:0;flex:1 1 auto}
.vision-choice{
  --choice-color:#667085;--choice-bg:#f5f6f8;min-width:0;height:26px;padding:0 7px;
  border:1px solid transparent;border-radius:7px;background:var(--choice-bg);color:var(--choice-color);
  font-size:11px;white-space:nowrap;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.vision-choice:hover,.vision-choice:focus-visible{
  border-color:color-mix(in srgb,var(--choice-color) 42%,transparent);
  box-shadow:0 1px 4px rgba(15,23,42,.05);outline:none;
}
.vision-choice.is-selected{background:var(--choice-color);border-color:var(--choice-color);color:#fff;font-weight:600}
.geo-city-value{display:none!important}
.vision-city-branch{position:fixed;z-index:1750;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(360px,calc(100vw - 24px));max-height:min(360px,calc(100vh - 24px));margin:0;padding:11px;overflow:auto;border:1px solid rgba(163,184,201,.72);border-radius:13px;background:rgba(250,253,255,.96);box-shadow:0 18px 48px rgba(38,64,84,.2);backdrop-filter:blur(16px);transform-origin:top left}
.vision-city-branch.hidden{display:none!important}
.vision-city-branch-head{position:sticky;top:-11px;z-index:1;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:33px;margin:-11px -11px 3px;padding:9px 11px 7px;color:#778391;font-size:10px;background:rgba(250,253,255,.96);border-bottom:1px solid #e6edf2}
.vision-city-choice{display:flex;align-items:center;justify-content:center;min-width:0;height:30px;padding:0 7px;overflow:hidden;border:1px solid #d9e4eb;border-radius:7px;background:#fff;color:#52738f;font-size:10.5px;text-align:center;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.vision-city-choice:hover,.vision-city-choice:focus-visible{border-color:#86abc3;background:#eef6fa;outline:none}
.vision-city-choice.is-selected{border-color:#527da3;background:#527da3;color:#fff;font-weight:600;box-shadow:0 0 0 2px rgba(82,125,163,.13)}
.environment-photo-picker.drag{border-color:#79a4d4;background:#eef5fc}
.public-publish-shell .environment-photo-picker,.public-publish-shell .environment-capsule.has-file .environment-photo-picker{height:188px;min-height:188px;align-self:start}
.environment-capsule .vision-run,.environment-capsule .flock-run{
  flex:0 0 auto;min-width:88px;width:auto;height:26px;margin:4px 0 0;padding:0 10px;font-size:12px;
}
.environment-capsule .flock-run{min-width:112px;font-size:11.5px}
.environment-capsule .vision-run.is-detecting{padding-inline:4px;font-size:10px;line-height:1;letter-spacing:-.2px;white-space:nowrap}

/* Vision: same one-screen dialog shell as development. */
#vision.active{height:100%;min-height:0;overflow:hidden}
#vision .vision-dialog-panel{
  min-height:0;flex:1 1 0;padding:14px 16px;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:smooth;
  border:1px solid #e5e7eb;border-radius:12px;background:#fff;
}
#vision .vision-dialog-panel>#vision-status{
  margin:0 0 10px;padding:0 0 10px;border:0;border-bottom:1px solid #eef0f3;
  border-radius:0;background:transparent;box-shadow:none;color:#7b8794;font-size:12px;
}
#vision .vision-results-panel{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;height:auto;padding:0;
  border:0;background:transparent;
}
#vision .vision-results-panel.hidden{display:none!important}
#vision .vision-results-panel>.card{border-radius:11px;box-shadow:none}
#vision #trace-wrap{margin-top:9px;box-shadow:none}
.public-vision-final-output{display:contents}

/* The publish shell uses the same second-round contract as the development UI. */
.vision-second-round-panel{margin-top:10px;padding:13px 14px;border:1px solid #d7e2ed;border-radius:13px;background:linear-gradient(145deg,#f8fbfe,#f3f7fb);color:#5d6d7e}
.vision-second-round-panel.is-loading{border-color:#b9cde1}.vision-second-round-panel.is-error{border-color:#e6c8c8;background:#fff8f8}
.vision-second-round-title{color:#466887;font-size:12px;font-weight:720}.vision-second-round-copy{margin-top:4px;font-size:10.5px;line-height:1.6;overflow-wrap:anywhere}
.vision-second-round-hint{box-sizing:border-box;width:100%;min-height:70px;margin-top:10px;padding:9px 11px;resize:vertical;border:1px solid #cbd9e6;border-radius:11px;background:rgba(255,255,255,.86);color:#43566a;font:inherit;font-size:11px;line-height:1.55;outline:none}
.vision-second-round-hint:focus{border-color:#6f97c0;box-shadow:0 0 0 3px rgba(91,134,180,.12)}
.vision-second-round-upload{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;border:1px dashed #b9cada;border-radius:10px;background:#fff;color:#527291;font-size:10.5px;cursor:pointer}
.vision-second-round-upload input{max-width:100%;font-size:10px}.vision-second-round-file-note{margin-top:5px;color:#8190a0;font-size:10px}
.vision-second-round-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.vision-second-round-button{min-height:36px;padding:0 13px;border:1px solid #b8cadc;border-radius:9px;background:#fff;color:#4f7194;font-size:11px;font-weight:680;cursor:pointer}
.vision-second-round-button.is-primary{border-color:#5b86b4;background:#5b86b4;color:#fff}.vision-second-round-button.is-danger{border-color:#d5a4a4;color:#a45b5b}.vision-second-round-button:disabled{opacity:.55;cursor:not-allowed}
.vision-second-round-evidence{display:grid;gap:8px;margin-top:10px}.vision-second-round-section{min-width:0;padding:9px 10px;border:1px solid #e2e7ed;border-radius:10px;background:#fff}
.vision-second-round-section>strong{display:block;margin-bottom:6px;color:#526b84;font-size:11px}.vision-second-round-list{display:grid;gap:5px}
.vision-second-round-row{display:grid;grid-template-columns:minmax(105px,.36fr) minmax(0,1fr);gap:8px;align-items:start;padding:5px 7px;border-radius:7px;background:#f7f9fb;font-size:10.5px;line-height:1.58}
.vision-second-round-row b{min-width:0;color:#6b7b8c;overflow-wrap:anywhere}.vision-second-round-row span{min-width:0;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
.vision-second-round-verdict{display:inline-flex;margin-top:4px;padding:2px 7px;border-radius:10px;background:#eef4f8;color:#587996;font-size:9.5px}

/* Flock: developer canvas/result split and one-screen geometry. */
#flock.active{height:100%;min-height:0;overflow:hidden}
.flock-shell{
  width:100%;max-width:var(--app-shell-max);height:100%;min-height:0;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--public-page-gap);overflow:hidden;
}
.flock-workspace{min-height:0;flex:1 1 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.flock-canvas-card,.flock-summary{
  min-height:0;overflow:hidden;border:1px solid #e5e7eb;border-radius:12px;background:#fff;
}
.flock-canvas-card{display:flex;flex-direction:column}
.flock-canvas-wrap{
  position:relative;min-height:0;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:9px;color:#9aa4af;font-size:12px;text-align:center;
  background:linear-gradient(45deg,#f5f7f9 25%,transparent 25%) 0 0/18px 18px,
    linear-gradient(-45deg,#f5f7f9 25%,transparent 25%) 0 9px/18px 18px,
    linear-gradient(45deg,transparent 75%,#f5f7f9 75%) 9px -9px/18px 18px,
    linear-gradient(-45deg,transparent 75%,#f5f7f9 75%) -9px 0/18px 18px,#fafbfc;
}
.flock-canvas-wrap canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:7px;background:#fff;box-shadow:0 2px 12px rgba(20,35,50,.12)}
.flock-canvas-wrap canvas.hidden{display:none!important}
.flock-canvas-empty-state{
  appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:min(360px,calc(100% - 36px));min-width:0;min-height:132px;padding:20px 24px;
  border:1px solid rgba(207,219,230,.82);border-radius:16px;background:rgba(252,253,254,.76);
  box-shadow:0 12px 34px rgba(53,75,96,.07);color:#758696;text-align:center;cursor:pointer;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.flock-canvas-empty-state:hover,.flock-canvas-empty-state:focus-visible{border-color:#a9bfd4;background:rgba(255,255,255,.9);outline:none}
.flock-canvas-empty-state.hidden{display:none!important}
.flock-canvas-empty-mark{display:grid;place-items:center;width:34px;height:34px;margin-bottom:10px;border:1px solid #ccdae7;border-radius:11px;background:#eef5fb;color:#5b86c2;font-size:21px}
.flock-canvas-empty-state b{color:#566b80;font-size:13px}
.flock-canvas-empty-state small{max-width:300px;margin-top:5px;color:#929daa;font-size:10.5px;line-height:1.55}
.flock-summary{display:flex;flex-direction:column;align-content:normal;gap:0;padding:0}
.flock-card-head{min-height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid #edf0f3}
.flock-card-head b{display:block;color:#526274;font-size:12px}
.flock-card-head span{display:block;margin-top:2px;color:#8a94a1;font-size:10.5px}
.flock-secondary{height:27px;padding:0 10px;border:1px solid #cdd9e6;border-radius:8px;background:#f8fbfe;color:#527da3;font-size:10.5px;font-weight:650;cursor:pointer}
.flock-secondary:disabled{opacity:.45;cursor:default}
.flock-progress{min-height:0;flex:0 0 auto;display:flex;gap:5px;padding:0 10px;overflow-x:auto;background:#fafbfc;border-bottom:1px solid transparent}
.flock-progress:not(:empty){padding-top:6px;padding-bottom:6px;border-bottom-color:#edf0f3}
.flock-summary-results{min-height:0;flex:1 1 0;display:grid;align-content:start;gap:10px;overflow-x:hidden;overflow-y:auto;padding:11px;border:0;border-radius:0;box-shadow:none;scrollbar-gutter:stable;transition:background .18s}
.flock-summary-empty{height:100%;display:grid;place-items:center;color:#9aa4af;font-size:11px}
.flock-summary-results.is-high-confidence{background:linear-gradient(180deg,rgba(237,248,242,.72),#fff 190px)}
.flock-summary-results.is-low-confidence{background:linear-gradient(180deg,rgba(255,247,232,.82),#fff 210px)}
.flock-summary-results .flock-summary-empty{min-height:110px}
.flock-species-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:6px;align-items:center;padding:5px 0;border-bottom:1px dashed #edf0f3;font-size:10.5px}
.flock-species-dot{width:7px;height:7px;border-radius:50%}
.flock-species-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#526274}
.flock-species-row span:last-child{color:#7b8794;font-variant-numeric:tabular-nums}
.flock-bird-row{padding:7px 8px;margin-top:5px;border:1px solid #e8ebef;border-radius:8px;background:#fafcfd}
.flock-bird-row.is-high{border-color:#b9dcca;background:#f3fbf7}
.flock-bird-row.is-low,.flock-bird-row.is-review{border-color:#edcf9d;background:#fffaf2}
.flock-bird-row.is-insufficient{border-color:#d8dde3;background:#f4f6f8}
.flock-bird-head{display:flex;align-items:center;gap:6px;color:#506276;font-size:10.5px}
.flock-bird-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flock-bird-head span:last-child{margin-left:auto;color:#718297;font-variant-numeric:tabular-nums}
.flock-bird-note{margin-top:4px;color:#8a7560;font-size:9.5px;line-height:1.45}
.flock-confidence-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:8px 9px;border:1px solid;border-radius:9px;font-size:10px}
.flock-confidence-banner.is-high{border-color:#b9dcca;background:#edf8f2;color:#39765a}
.flock-confidence-banner.is-low{border-color:#edcf9d;background:#fff7e8;color:#87642e}
.flock-confidence-banner b{font-size:10.5px}
.flock-confidence-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 8px;padding:8px 9px;border:1px solid #e0e6eb;border-radius:9px;background:#fafcfd;color:#718093;font-size:10px}
.flock-confidence-legend>b{margin-right:2px;color:#56687b;font-size:10.5px}
.flock-confidence-legend>span{display:inline-flex;align-items:center;gap:5px}
.flock-confidence-legend i{width:8px;height:8px;border-radius:50%;background:#7b8794}
.flock-confidence-legend i.is-high{background:#4d9a70}
.flock-confidence-legend i.is-low{background:#d68b28}
.flock-warning{margin-top:6px;padding:7px 8px;border-left:3px solid #d39a35;border-radius:0 7px 7px 0;background:#fffaf1;color:#806b46;font-size:9.5px;line-height:1.45}

/* Reasoning: optional image capsule + full-height chat panel. */
#reasoning.active{height:100%;min-height:0;overflow:hidden}
.reasoning-chat-shell{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:8px}
.reasoning-chat-panel{width:100%;min-height:0;flex:1 1 0;display:flex;flex-direction:column;overflow:hidden;padding:14px 16px;border-radius:12px}
.reasoning-chat{height:0;min-height:0;flex:1 1 0;display:flex;flex-direction:column;gap:11px;overflow-x:hidden;overflow-y:auto;padding:16px;background:#fbfcfd;border:1px solid #edf0f3;border-radius:11px;scrollbar-gutter:stable;overscroll-behavior-y:contain;touch-action:pan-y}
.reasoning-chat :is(.msg,.ai-msg){max-width:min(820px,78%);margin:0;padding:9px 12px;border-radius:12px;font-size:12px;line-height:1.6}
.reasoning-chat :is(.msg,.ai-msg).assistant{align-self:flex-start;background:#fff;border:1px solid #e7eaee;color:#4b5563}
.reasoning-chat :is(.msg,.ai-msg).user{align-self:flex-end;background:#eaf2fb;color:#385f89;border:0}
.reasoning-welcome{max-width:min(760px,88%)!important;line-height:1.78!important}
.reasoning-compose{min-height:0;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) 42px;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;padding:0;border:0}
.reasoning-compose textarea{grid-row:1/3;min-height:78px;max-height:150px;resize:vertical;padding:11px 12px;border:1px solid #d7dce3;border-radius:10px;font-size:12px;line-height:1.6;outline:none}
.reasoning-compose textarea:focus{border-color:#78a3d4;box-shadow:0 0 0 3px rgba(91,134,194,.12)}
.reasoning-send,.reasoning-reset{grid-column:2;width:42px;min-width:42px;min-height:0;height:auto;padding:0;font-size:16px}
.reasoning-reset{grid-row:1}.reasoning-send{grid-row:2}
.reasoning-reset{display:inline-flex;align-items:center;justify-content:center;border:1px solid #dfa6a6;border-radius:9px;background:#fff3f3;color:#bb4d4d;font-weight:700;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.reasoning-reset:hover,.reasoning-reset:focus-visible{border-color:#c96b6b;background:#ffe8e8;color:#a73333;outline:none;box-shadow:0 0 0 3px rgba(190,72,72,.1)}
.reasoning-reset:disabled{opacity:.45;cursor:wait}
.reasoning-process{width:100%;max-width:100%!important;box-sizing:border-box;overflow:visible!important;padding:12px 14px!important;background:#fff!important}
.reasoning-process-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#526274;font-size:12px;font-weight:700}
.reasoning-progress-list{display:flex;flex-direction:column;gap:7px}
.reasoning-entity-list,.reasoning-relation-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.reasoning-mini-tag{display:inline-flex;padding:2px 6px;border-radius:6px;background:#eef4fa;color:#53799f;font-size:10px}
.reasoning-fact-list{display:grid;gap:3px;margin-top:5px}
.reasoning-fact{padding-left:9px;border-left:2px solid #a9bfd7;color:#687688;font-size:10.5px}
.reasoning-source-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:5px;margin-top:6px}
.reasoning-source-card{padding:6px 8px;border:1px solid #e6eae5;border-radius:7px;background:#fff;color:#657164;font-size:10.5px}
.reasoning-answer-summary{min-width:0;max-width:none;max-height:none;overflow:visible;white-space:normal;color:#4f6072;font-size:11.5px;line-height:1.75}
.reasoning-answer-summary .ai-markdown{display:block;max-width:none;max-height:none;overflow:visible;white-space:normal;overflow-wrap:anywhere}
.ai-markdown>:first-child{margin-top:0}.ai-markdown>:last-child{margin-bottom:0}
.ai-markdown p{margin:5px 0}.ai-markdown h1,.ai-markdown h2,.ai-markdown h3,.ai-markdown h4{margin:10px 0 5px;color:#374151;font-weight:720;line-height:1.4}
.ai-markdown h1{font-size:16px}.ai-markdown h2{font-size:15px}.ai-markdown h3,.ai-markdown h4{font-size:13px}
.ai-markdown strong{color:#365f8c;font-weight:750}.ai-markdown em{color:#65748a}
.ai-markdown ul,.ai-markdown ol{margin:5px 0;padding-left:21px}.ai-markdown li{margin:2px 0}
.ai-markdown a{color:#4376aa;text-decoration:underline;text-underline-offset:2px}
.reasoning-chat :is(.msg,.ai-msg).user:has(.reasoning-user-attachment){width:min(420px,86%);max-width:min(420px,86%);overflow:visible}
.reasoning-user-attachment{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:8px;padding:7px;border-radius:9px;background:rgba(255,255,255,.62);color:#617791;font-size:10px;overflow:hidden}
.reasoning-user-attachment img{display:block;width:100%;height:auto;max-height:160px;object-fit:contain;object-position:center;border-radius:7px;background:rgba(244,248,251,.82)}
.reasoning-user-attachment span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.llm-detail-card:focus{outline:none}

/* Final-result contract shared by development and publish. */
.vision-subject-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
.vision-subject-tab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;min-width:150px;padding:7px 9px;border:1px solid #dce5ed;border-radius:10px;background:#fff;color:#607286;cursor:pointer}
.vision-subject-tab.is-active{border-color:#7fa5ca;background:#edf5fc;color:#3f6f9e}
.vision-subject-tab span,.vision-subject-tab small{font-size:10px}.vision-subject-tab b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.vision-final-candidate{min-width:0;padding:8px 0;border-top:1px solid #edf0f3}.vision-final-candidate:first-of-type{border-top:0}
.vision-final-candidate-layout{display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;align-items:start}
.vision-final-candidate-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0}
.vision-final-candidate-rank{color:#97a2af;font-size:9.5px}.vision-final-candidate-name{color:#3f5873;font-size:11.5px;font-weight:700}
.vision-final-candidate-head .vision-conclusion-latin{margin:0;color:#8290a1;font:italic 10.5px/1.35 "Times New Roman",Georgia,serif;letter-spacing:0}
.vision-final-candidate-score{margin-left:auto;color:#5279a6;font-size:11px;font-weight:650}.vision-final-candidate-metrics{margin-top:4px;color:#748397;font-size:10.5px;overflow-wrap:anywhere}
.vision-final-candidate-reason{margin-top:4px;color:#667085;font-size:10.5px;line-height:1.55;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty}
.vision-final-candidate-route{display:inline;padding:1px 4px;border-radius:5px;background:#edf4fa;color:#587797;font-weight:650}
.vision-decision-summary{margin-top:12px;padding:13px;border:1px solid #d9e5ee;border-radius:12px;background:rgba(255,255,255,.72);box-shadow:0 8px 26px rgba(73,101,129,.06)}
.vision-decision-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.vision-decision-head strong{color:#3f5f7f;font-size:12px}
.vision-decision-state{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#e8f1f8;color:#4d769c;font-size:10px;font-weight:700}
.vision-decision-title{margin-top:8px;color:#344f6b;font-size:16px;font-weight:750;line-height:1.35}.vision-decision-conclusion{margin-top:6px;color:#596b7e;font-size:11.5px;line-height:1.7;overflow-wrap:anywhere;text-wrap:pretty}
.vision-decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.vision-decision-block{min-width:0;padding:9px 10px;border:1px solid #e6ebef;border-radius:9px;background:#fff}
.vision-decision-block b{display:block;margin-bottom:5px;color:#60758a;font-size:10.5px}.vision-decision-list{display:grid;gap:5px;color:#637285;font-size:10.5px;line-height:1.58}
.vision-decision-item{position:relative;padding-left:11px;overflow-wrap:anywhere}.vision-decision-item::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:#83a5c2}
.vision-decision-alt-name{color:#486987;font-weight:700}.vision-decision-details{margin-top:9px;border-top:1px solid #e7edf2}.vision-decision-details summary{padding:9px 0 3px;color:#60758a;font-size:10.5px;font-weight:700;cursor:pointer}
.vision-decision-dimensions{display:grid;gap:5px;margin-top:6px}.vision-decision-dimension{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;padding:6px 8px;border-radius:7px;background:#f7f9fb;color:#647386;font-size:10.5px;line-height:1.55}.vision-decision-dimension b{color:#4f6b87}
.vision-decision-method{margin-top:8px;padding-top:7px;border-top:1px dashed #dfe7ed;color:#8995a2;font-size:9.8px;line-height:1.55}.vision-conclusion-note{margin-top:9px;color:#718093;font-size:10.5px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}

@media(max-width:900px){
  .flock-workspace{grid-template-columns:1fr;min-height:760px}
  .flock-summary{max-height:360px}
  .flock-canvas-card{min-height:470px}
  .public-publish-shell .environment-photo-picker,
  .public-publish-shell .environment-capsule.has-file .environment-photo-picker{
    height:clamp(148px,20cqi,188px);min-height:148px;max-height:188px;
  }
}
@media(max-width:780px){
  body.public-publish-shell{overflow:auto}
  .public-publish-shell header .head{width:calc(100vw - 20px);display:flex}
  .public-publish-shell header .public-nav-actions{margin-left:auto;gap:5px}
  .public-publish-shell header nav{margin-left:0}
  .public-publish-shell header .public-nav-actions{--public-nav-control-width:48px}
  .public-publish-shell header nav button{width:var(--public-nav-control-width);min-width:var(--public-nav-control-width);max-width:var(--public-nav-control-width);padding-inline:0}
  .public-publish-shell main{width:calc(100vw - 20px);min-height:calc(100dvh - 98px);overflow:visible}
  #vision.active,#flock.active,#reasoning.active{height:auto;min-height:calc(100dvh - 112px);overflow:visible}
  .ai-shell,.flock-shell,.reasoning-chat-shell{height:auto;min-height:calc(100dvh - 112px);overflow:visible}
  .flock-workspace{grid-template-columns:1fr}
  .reasoning-chat-panel{min-height:520px}
}
@media(max-width:640px){
  .public-publish-shell header .public-logout{width:var(--public-nav-control-width);min-width:var(--public-nav-control-width);max-width:var(--public-nav-control-width);padding:0}
  .vision-choice-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
  .vision-habitat-row{align-items:stretch;flex-direction:column}
  .environment-capsule .vision-run,.environment-capsule .flock-run{width:100%;height:44px;min-height:44px}
  .reasoning-chat :is(.msg,.ai-msg){max-width:92%}
  .reasoning-compose{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:repeat(2,minmax(0,1fr))}
  .reasoning-compose textarea{min-height:84px}
  .reasoning-compose :is(.reasoning-send,.reasoning-reset){width:44px;min-width:44px;min-height:0}
  .public-publish-shell .environment-photo-picker,.public-publish-shell .environment-capsule.has-file .environment-photo-picker{height:148px;min-height:148px;max-height:172px}
  .vision-city-branch{grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100vw - 16px);max-height:min(55vh,420px)}
  .vision-decision-grid{grid-template-columns:1fr}.vision-decision-title{font-size:15px}.vision-decision-dimension{grid-template-columns:1fr;gap:2px}
}
/* The shared capsule reflows at its own width, including when publication
   navigation and content switch at different viewport widths. */
@container(max-width:680px){
  .public-publish-shell .environment-photo-picker,
  .public-publish-shell .environment-capsule.has-file .environment-photo-picker{
    height:148px;min-height:148px;max-height:148px;
  }
}
@media(max-width:640px) and (orientation:portrait){
  .public-publish-shell .environment-capsule :is(#vision-province,#flock-province,#province,#vision-month,#flock-month,#month){
    display:grid!important;
    width:100%;
    min-width:0;
    gap:4px;
  }
  .public-publish-shell .environment-capsule :is(#vision-province,#flock-province,#province){
    grid-template-columns:repeat(auto-fit,minmax(54px,1fr));
  }
  .public-publish-shell .environment-capsule :is(#vision-month,#flock-month,#month){
    grid-template-columns:repeat(auto-fit,minmax(44px,1fr));
  }
  .public-publish-shell .environment-capsule :is(#vision-province,#flock-province,#province,#vision-month,#flock-month,#month)>.vision-choice{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .public-publish-shell .environment-capsule .vision-choice-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:4px;
  }
  .public-publish-shell .environment-capsule .vision-choice{
    flex:0 1 auto;
    width:auto;
    min-width:44px;
    max-width:100%;
    height:auto;
    min-height:32px;
    padding:4px 8px;
    line-height:1.15;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .public-publish-shell .environment-capsule :is(#vision-province,#flock-province)>.vision-choice{
    flex:0 0 54px;
    width:54px;
    min-width:54px;
    max-width:54px;
    padding-inline:4px;
    white-space:nowrap;
  }
  .public-publish-shell .environment-capsule .vision-habitat-row{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .public-publish-shell .environment-capsule .vision-habitat-row .vision-choice-grid{flex:0 1 auto}
  .public-publish-shell .environment-capsule .vision-run,
  .public-publish-shell .environment-capsule .flock-run{
    align-self:flex-start;
    width:auto;
    min-width:76px;
    height:32px;
    min-height:32px;
    margin:2px 0 0;
    padding:0 10px;
  }
  .public-publish-shell .environment-capsule .flock-run{min-width:98px}
  .public-publish-shell .vision-city-branch{
    align-items:start;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:min(360px,max(248px,60vw),calc(100vw - 16px));
    max-height:min(48dvh,320px);
    min-width:0;
    gap:4px;
    padding:7px;
    overflow-x:hidden;
    overflow-y:auto;
    border-radius:10px;
  }
  .public-publish-shell .vision-city-branch-head{top:-7px;min-width:0;min-height:25px;margin:-7px -7px 2px;padding:6px 7px 5px;gap:5px;font-size:9px;flex-wrap:wrap}
  .public-publish-shell .vision-city-branch-head>span{min-width:0;overflow-wrap:anywhere}
  .public-publish-shell .vision-city-choice{
    width:100%;
    max-width:100%;
    height:auto;
    min-height:25px;
    padding:3px 5px;
    border-radius:6px;
    font-size:10px;
    line-height:1.15;
    white-space:normal;
    overflow-wrap:anywhere;
    text-overflow:clip;
  }
}
@media(max-width:360px){
  .public-publish-shell header .brand-copy{display:none}
}