/* ai-cms work screen (P1b). Visual language and layout rules carried over from the agreed demo v3.4
   (docs/apple-design-demo/styles.css): one-row header, the site as the main area, one operation panel that is closed by
   default and can float or dock left / right / bottom, the opt-in device toolbar, short-height and narrow-width rules. */
:root{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#242a31;background:#fff;font-synthesis:none;--blue:#0665d9;--muted:#5f6975;--line:#e5e7ea;--warn-bg:#fff5de;--warn:#6f4d19;--err-bg:#fff0ed;--err:#9b382f;--ok:#2f7a5c;line-height:1.6}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);background:#fff}body>main{min-height:0;overflow:hidden}
button,input,textarea,select{font:inherit}button,summary{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:active:not(:disabled){scale:.98}
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #086ada;outline-offset:2px}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1,h2,p{margin-top:0}p{overflow-wrap:anywhere}
.wide{display:block;width:100%}.text-button{padding:6px 0;border:0;color:#1759a5;background:transparent;font-size:.75rem;min-height:36px;text-align:left}
.muted{color:var(--muted);font-size:.85rem;line-height:1.8}.small{font-size:.75rem}.caption{font-size:.7rem;text-align:center;color:var(--muted);line-height:1.6;margin:6px 0 0}
.tool-icon{display:block;width:18px;height:18px;opacity:.72;pointer-events:none}

/* ---- one header row ---- */
.toolbar{min-height:52px;min-width:0;display:flex;align-items:center;gap:16px;padding:6px 16px;border-bottom:1px solid var(--line);background:#fafbfc;position:relative;z-index:50}
.identity{display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1}.identity>strong{font-size:1.2rem;letter-spacing:-1px;white-space:nowrap}.identity>strong>span{color:#358368;font-size:7px;margin-left:4px}
.site-name{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.page-button{display:flex;align-items:center;gap:10px;min-width:44px;max-width:420px;flex:1;border:0;text-align:left;background:transparent;padding:3px 8px;color:inherit;border-radius:6px;min-height:44px}
.page-button:hover{background:#eef1f5}.page-button>span{min-width:0}.page-button strong{display:block;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-button small{display:block;font-size:.65rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-button .tool-icon{width:15px;height:15px;flex-shrink:0}
.toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.toolbar .button.icon{display:grid;place-items:center;width:40px;height:40px;padding:8px;min-height:40px}
#device-toggle[aria-expanded=true]{background:#e8effb}

/* ---- workspace: the site is the main area; one panel, four arrangements ---- */
.workspace{height:100%;min-height:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);isolation:isolate}
.canvas-shell{grid-column:1;grid-row:1;min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;background:#fff}
.canvas-shell.device-tools-open{grid-template-rows:auto minmax(0,1fr) auto}
.preview-stage{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr)}
.viewport{min-height:0;overflow:auto;background:#f3f4f5;overscroll-behavior:contain}
#frame-space{margin:0 auto;position:relative;background:#fff;width:100%;height:100%}
iframe#preview{display:block;border:0;transform-origin:top left;background:#fff;width:100%;height:100%}
.empty-state{display:grid;place-content:center;gap:8px;text-align:center;height:100%;padding:24px;color:var(--muted)}.empty-state strong{color:#26313d;font-size:1rem}
.canvas-bottom{min-height:32px;display:flex;align-items:center;gap:8px;padding:3px 16px;border-top:1px solid var(--line);font-size:.7rem;color:#5d6b64;background:#fff;min-width:0}
.green-dot{width:6px;height:6px;border-radius:50%;background:#3c8a6c;flex-shrink:0}.canvas-bottom .status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.canvas-bottom .mode-note{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;text-align:right}
.inspector{display:none;min-width:0;min-height:0;overflow:hidden;background:#fff;flex-direction:column;z-index:10}.panel-open .inspector{display:flex}
.inspector-head{display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:48px;padding:4px 12px 4px 10px;border-bottom:1px solid var(--line)}
.inspector-head h1{font-size:.9rem;font-weight:600;line-height:1.5;margin:0;flex:1;white-space:nowrap}
.panel-grip{display:grid;place-items:center;border:0;border-radius:5px;background:transparent;width:32px;min-height:40px;padding:5px;cursor:grab;touch-action:none}.panel-grip:hover{background:#f0f2f5}.panel-grip:active{cursor:grabbing;scale:1}
#workspace[data-layout=floating] .inspector{position:absolute;right:24px;top:24px;width:390px;max-width:calc(100% - 32px);height:auto;max-height:calc(100% - 48px);border:1px solid #dadee4;border-radius:12px;box-shadow:0 12px 48px #1d2c4926,0 2px 6px #1d2c4910}
#workspace.panel-open[data-layout=right]{grid-template-columns:minmax(0,1fr) 360px}#workspace[data-layout=right] .inspector{grid-column:2;grid-row:1;border-left:1px solid var(--line)}
#workspace.panel-open[data-layout=left]{grid-template-columns:360px minmax(0,1fr)}#workspace[data-layout=left].panel-open .canvas-shell{grid-column:2}#workspace[data-layout=left] .inspector{grid-column:1;grid-row:1;border-right:1px solid var(--line)}
#workspace.panel-open[data-layout=bottom]{grid-template-rows:minmax(0,1fr) min(280px,44dvh)}#workspace[data-layout=bottom] .inspector{grid-column:1;grid-row:2;border-top:1px solid #d6dbe2}
#workspace[data-layout=bottom] .phase{flex-direction:row}#workspace[data-layout=bottom] .action-dock{width:250px;display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:1px solid var(--line)}
#workspace[data-layout=bottom] .phase-body{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(240px,1fr);align-content:start;gap:0 20px}
#workspace[data-layout=bottom] .input-block{grid-column:2;grid-row:1 / span 6}
.phase{display:flex;flex-direction:column;flex:1;min-height:0}
.phase-body{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:14px 16px;scrollbar-width:thin}
.action-dock{flex-shrink:0;padding:10px 16px;background:#fafbfc;border-top:1px solid var(--line)}.action-dock .wide{margin:0;min-height:44px}
.page-context{font-size:.75rem;color:#5d6a7a;margin:0 0 6px}
.target{padding:10px 12px;background:#f0f5fc;border-radius:8px;margin:0 0 6px}
.target-label{font-size:.65rem;color:#526277;font-weight:600;display:flex;gap:8px;align-items:center}
.target-quote{margin:5px 0;font-size:.8rem;max-height:66px;overflow:auto;overflow-wrap:anywhere}
.target-status{font-size:.72rem;margin:4px 0;color:#3d4d60}.target-status.ok{color:var(--ok)}.target-status.warn{color:var(--warn)}.target-status.err{color:var(--err)}
.target-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.facets{border:0;padding:0;margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.72rem}.facets legend{font-size:.65rem;color:#526277;margin-bottom:2px;padding:0}
.facets label,.placement label,.candidates label{display:flex;align-items:center;gap:5px;min-height:32px}
.candidates{border:0;padding:0;margin:6px 0}.candidates legend{font-size:.72rem;margin-bottom:4px;padding:0}.candidates label{align-items:flex-start;padding:6px 0;border-bottom:1px solid #dfe6ef;font-size:.72rem}.candidates code{font-size:.68rem;display:block;color:#394a5e;overflow-wrap:anywhere}.candidates .cand-text{display:block;overflow-wrap:anywhere}.candidates .cand-near{display:block;color:#51637a}.candidates .cand-show{margin-left:auto;flex:none}
.hint{font-size:.72rem;color:#526b89;margin:4px 0}
.notice{font-size:.75rem;background:var(--warn-bg);color:var(--warn);padding:8px 10px;border-radius:7px;margin:0 0 8px}
.intent{border:0;padding:0;margin:12px 0 0;display:flex;align-items:center;gap:10px}.intent legend{float:left;font-size:.75rem;font-weight:550;margin-right:10px;padding:0}
.input-label{display:block;margin:12px 0 6px;font-size:.8rem;font-weight:550}
textarea{display:block;width:100%;border:1px solid #c6ced8;border-radius:8px;padding:10px 12px;background:#fff;resize:vertical;min-height:84px;max-height:30dvh;font-size:.85rem;line-height:1.8}
textarea::placeholder{color:#7b8591}
.placement{border:0;padding:0;margin:8px 0 0;display:flex;gap:4px 12px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}.placement legend{font-size:.75rem;margin-bottom:2px;padding:0}
.save-state{font-size:.72rem;color:var(--muted);margin:6px 0 0;min-height:1.6em}.save-state.ok{color:var(--ok)}.save-state.err{color:var(--err)}.save-state.warn{color:var(--warn)}
.conflict{margin-top:8px;padding:10px;border:1px solid #e8d3a4;background:var(--warn-bg);border-radius:8px;font-size:.75rem}
.conflict pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border-radius:5px;padding:6px 8px;max-height:90px;overflow:auto;font:inherit;margin:4px 0 8px}
.conflict .row{display:flex;flex-wrap:wrap;gap:6px}
.error{font-size:.8rem;background:var(--err-bg);padding:9px 10px;color:var(--err);border-radius:7px;margin:0 0 8px}
.dock-note{font-size:.72rem;color:#3d4d60;background:#eef3f9;border-radius:7px;padding:8px 10px;margin:0 0 8px}

/* ---- device toolbar: opt-in, the header stays one row ---- */
.device-toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:4px 12px;min-width:0;border-bottom:1px solid var(--line);background:#f5f6f8;min-height:44px}
.device-toolbar .seg{background:#e8ecf1}.device-toolbar .seg button{padding:5px 9px;min-height:32px;font-size:.68rem}
.size-input{display:flex;align-items:center;gap:5px;font-size:.72rem;white-space:nowrap;color:var(--muted)}
.size-input input{width:72px;height:32px;border:1px solid #c9d1db;border-radius:5px;padding:3px 6px;font-size:.78rem;color:#26394e;background:#fff}
#scale-info{font-size:.68rem;color:var(--muted);white-space:nowrap}.device-toolbar #zoom{min-height:32px;padding:4px 8px;font-size:.72rem}
.device-tools-open .viewport{padding:16px 28px 32px;background:#eceef1}
.device-tools-open #frame-space,.device-tools-open iframe#preview{width:auto;height:auto}
.resize-tools{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.resize-handle{position:absolute;width:20px;height:56px;display:grid;place-items:center;padding:0;border:1px solid #c9d1dc;border-radius:7px;background:#fff;box-shadow:0 2px 5px #20334b15;pointer-events:auto;cursor:ew-resize;touch-action:none;user-select:none}
.resize-handle:hover,.resize-handle:focus-visible{background:#edf4ff;border-color:#4386df}.resize-handle:active{scale:1}
.height-handle{width:56px;height:20px;cursor:ns-resize}.height-handle .tool-icon{rotate:90deg}
.resizing iframe{pointer-events:none}

/* ---- dialogs (page search, settings) ---- */
dialog{border:1px solid #e1e5eb;border-radius:14px;padding:22px;background:#fff;box-shadow:0 28px 100px #1c2c4540;color:inherit;width:560px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
dialog::backdrop{background:#20334b32}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.dialog-head h2{font-size:1.05rem;margin:0;font-weight:600}
#page-query{width:100%;padding:12px;border:1px solid #c6ced8;border-radius:8px;font-size:1rem}
#page-dialog{width:660px}.result-count{font-size:.72rem;color:var(--muted);margin:12px 0 6px;min-height:1.5em}
.page-result{display:block;width:100%;padding:12px 8px;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;border-radius:4px}
.page-result:hover,.page-result:focus-visible{background:#eff4fb}.page-result strong{display:block;font-size:.88rem}
.page-result small,.page-result span{display:block;font-size:.72rem;color:var(--muted);margin:3px 0;overflow-wrap:anywhere}
.page-result[aria-current=page] strong::after{content:"（表示中）";font-weight:400;color:var(--muted);font-size:.72rem}
.recent{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.recent-button{border:0;border-radius:5px;padding:7px 10px;background:#eaf0f7;color:#3e597b;font-size:.72rem;min-height:36px}
.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.setting input[type=checkbox]{width:22px;height:22px}.setting select{padding:8px;border:1px solid #c8d0db;border-radius:7px;background:#fff;max-width:58%;font-size:.8rem}
.dev-info{font-size:.7rem;background:#f5f7fa;border-radius:7px;padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---- narrow: header stays one row, the panel becomes the full work area below it ---- */
@media(max-width:1099px){.toolbar{gap:10px;padding-inline:12px}.toolbar-actions{gap:6px}#workspace.panel-open[data-layout=right]{grid-template-columns:minmax(0,1fr) 320px}#workspace.panel-open[data-layout=left]{grid-template-columns:320px minmax(0,1fr)}#workspace[data-layout=bottom] .phase-body{grid-template-columns:1fr}#workspace[data-layout=bottom] .input-block{grid-column:auto;grid-row:auto}#workspace[data-layout=bottom] .action-dock{width:210px}}
@media(max-width:699px){.toolbar{padding:4px 6px;gap:4px}.toolbar .identity{display:none}.toolbar-actions{gap:2px}.toolbar .page-button{padding:3px 2px;gap:5px}
  .toolbar .seg button{padding:7px 8px}.toolbar .button.icon{width:36px;padding:6px}
  .panel-open .inspector{position:fixed;inset:var(--header-h,52px) 0 0;z-index:40;border:0;border-radius:0;width:auto!important;max-width:none!important;max-height:none!important;height:auto}
  /* revision 63: while reviewing, the panel takes the lower part and the site stays visible above (never the full screen) */
  #workspace.panel-open[data-layout=review-sheet]{grid-template-rows:minmax(0,1fr) min(52dvh,30rem)}#workspace[data-layout=review-sheet] .inspector{position:static;inset:auto;grid-column:1;grid-row:2;border-top:1px solid #d6dbe2;height:auto;max-height:none!important}
  .phase-body{padding:12px}.action-dock{padding:10px 12px max(10px,env(safe-area-inset-bottom))}textarea{font-size:16px}
  .device-toolbar{gap:6px;padding:4px 6px}.size-input input{width:64px}.device-tools-open .viewport{padding:10px 24px 30px}.canvas-bottom{padding-inline:8px}}
@media(max-height:560px){.inspector-head{min-height:40px}#workspace[data-layout=floating] .inspector{top:8px;max-height:calc(100% - 16px)}.phase-body{padding-block:8px}.action-dock{padding-block:6px}.input-label{margin-top:6px}textarea{min-height:64px}}
@media(max-height:480px){.device-toolbar{min-height:38px;padding-block:2px}.device-tools-open .viewport{padding-top:8px;padding-bottom:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root[data-reduce=true] *,:root[data-reduce=true] *::before{animation:none!important;transition:none!important}
@media(prefers-contrast:more){:root{--muted:#333;--line:#727b86}.inspector,.target{border:1px solid #667}}

/* P2 candidate panel: only the operations the current state allows are shown; details stay short */
.candidate{margin-top:10px;padding:10px;border:1px solid #cfd8e3;border-radius:8px;background:#fff}
.cand-title{font-size:.78rem;margin:0 0 4px;color:#33455c}
.cand-request{font-size:.75rem;margin:0 0 6px;overflow-wrap:anywhere;color:#1f2d3d}
.cand-state{font-size:.75rem;margin:0 0 6px;color:#3d4d60}.cand-state.ok{color:var(--ok)}.cand-state.warn{color:var(--warn)}
.cand-questions{margin:6px 0;display:flex;flex-wrap:wrap;gap:6px}.cand-questions .cand-answer{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}.cand-q{width:100%;font-size:.75rem;margin:0 0 2px}
.cand-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cand-revise{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.cand-revise textarea{width:100%;font:inherit;font-size:.78rem;padding:6px;border:1px solid #c9d3df;border-radius:6px}
.cand-history{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* P2 B2: the image operations of a request */
.materials { margin: 8px 0; padding: 8px; border: 1px solid var(--line, #d8d8d8); border-radius: 8px; }
.materials-title { font-size: 0.95rem; margin: 0 0 4px; cursor: pointer; }
.materials[open] .materials-title { margin-bottom: 6px; }
.materials .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.file-pick { display: inline-flex; align-items: center; cursor: pointer; }
.material-results { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow: auto; margin-top: 6px; }
.material-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.material { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.material.is-selected { outline: 2px solid var(--accent, #2b6cb0); outline-offset: 2px; border-radius: 6px; }
.material-crop { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }

/* P2 R3-06: choosing the crop on the picture itself */
.crop-stage { position: relative; display: inline-block; max-width: 100%; touch-action: none; cursor: crosshair; }
.crop-stage { max-width: 320px; }
/* the element is exactly the picture (no letterboxing), so a range chosen on screen maps 1:1 to the real pixels */
.crop-stage img { display: block; width: 100%; height: auto; background: #f4f4f4; image-rendering: pixelated; }
.crop-box { position: absolute; border: 2px solid var(--accent, #2b6cb0); background: rgba(43,108,176,0.15); pointer-events: none; }
.crop-numbers { margin-top: 4px; }

/* P4: the unread count on the comment icon (no new permanent bar), and the comment panel's own small pieces. */
#comments-toggle { position: relative; }
#comments-toggle .badge {
  position: absolute; top: 2px; right: 2px; min-width: 1.1rem; padding: 0 0.25rem;
  border-radius: 999px; background: var(--accent, #1f6feb); color: #fff;
  font-size: 0.7rem; line-height: 1.1rem; text-align: center;
}
#comment-list p, #comment-messages p { margin: 0.35rem 0; }
#comment-messages { border-top: 1px solid var(--line, #d8dee9); padding-top: 0.35rem; margin-bottom: 0.5rem; }
#comment-thread-head { font-weight: 600; }
/* R6-01: after an adoption the screen could not follow - the reload control must stay whole and clickable */
.canvas-bottom .reload-needed{flex:0 0 auto;white-space:nowrap;overflow:visible;color:#9a3412;font-weight:600}
/* ---- P6 revision 47: change review (変更前／変更後, 変更内容をチェック). System font and the existing tokens; no
   overshoot; the panel fades in only when motion is allowed. Each kind of place is named in words, not by colour alone. ---- */
.cr-legacy{display:none!important}
.cr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.cr-switch button{min-width:4.5em}
.cr-count{margin:0;font-size:.75rem;font-weight:600;color:#22344b;letter-spacing:.01em}
.cr-count:focus-visible{outline:3px solid #086ada;outline-offset:2px;border-radius:4px}
.cr-panel{margin:6px 0 4px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd}
@media (prefers-reduced-motion:no-preference){.cr-panel{animation:cr-in .18s ease-out}}
@keyframes cr-in{from{opacity:0}to{opacity:1}}
.cr-nav{display:flex;align-items:center;gap:6px}.cr-nav .button{min-width:40px}
.cr-where{margin:4px 0 8px;color:#3d4d60;line-height:1.6}
.cr-panel .cand-findings{display:flex;flex-direction:column;gap:8px;margin:0}
.cr-panel .cand-finding{padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.cr-panel .cand-finding.cr-target{border-left:3px solid var(--blue)}
.cr-panel .cand-finding.cr-around{border:1px dashed #9a7b3c;border-left-width:3px}
.cr-panel .cand-finding.cr-unknown{border-left:3px solid #8a96a3}
.cr-panel .cand-finding.cr-block{background:var(--err-bg);border-color:#e3b6ae}
.cr-panel .cand-finding.cr-current{box-shadow:0 0 0 2px #086ada33}
.cr-panel .cand-finding:focus-visible{outline:3px solid #086ada;outline-offset:2px}
.cr-group-name{margin:0 0 2px;font-size:.72rem;font-weight:600;color:#22344b}
.cr-look{margin:2px 0 4px}
.cr-details{font-size:.7rem;color:var(--muted);margin:2px 0 6px}.cr-details summary{cursor:pointer}
.cr-details dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:4px 0 0}.cr-details dt{font-weight:600}.cr-details dd{margin:0;overflow-wrap:anywhere}
.cr-states{list-style:none;padding:8px 0 0;margin:8px 0 4px;border-top:1px solid var(--line);font-size:.72rem;color:#3d4d60;display:grid;gap:2px}
@media (prefers-contrast:more){.cr-panel,.cr-panel .cand-finding{border-color:#5f6975}}
/* r47d: with a larger text size the panel must not scroll sideways: its buttons and words wrap inside the column */
.cr-panel,.cr-bar{min-width:0;max-width:100%}
.cr-panel .button,.cr-bar .button,.cr-switch button{white-space:normal;text-align:center;height:auto}
.cr-panel .cand-finding,.cr-where,.cr-states{overflow-wrap:anywhere;min-width:0}
.cr-nav{flex-wrap:wrap}
.cr-view-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.cr-outline-toggle{display:inline-flex;align-items:center;gap:4px}
/* P6 revision 63 (UX): one current review item, a short summary, one decision row; the full list only when opened */
.cr-summary{margin:0 0 6px;color:#3b4a5c;line-height:1.5}
.cr-item{padding:.75rem .85rem;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem}
.cr-item:focus-visible{outline:3px solid #086ada;outline-offset:2px}
.cr-item.cr-target{border-left:3px solid var(--blue)}.cr-item.cr-around{border-left:3px solid #9a7b3c}.cr-item.cr-unknown{border-left:3px solid #8a96a3}.cr-item.cr-block{background:var(--err-bg);border-color:#e3b6ae}
.cr-item-head{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;font-size:.95rem;line-height:1.45}
.cr-item-where{font-size:.8rem;color:#4b5a6b}
.cr-item-what{margin:0;font-size:.9rem;line-height:1.6}
.cr-item-look{margin:0;font-size:.88rem;line-height:1.6;color:#22344b}.cr-item-look span{display:inline-block;margin-right:.5rem;padding:0 .4rem;border-radius:4px;background:#eef3f9;font-size:.78rem;font-weight:600}
.cr-item-state{margin:0;font-size:.82rem;color:#4b5a6b}.cr-item-state.done{color:#1f6f43;font-weight:600}
.cr-records{margin:.4rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem;font-size:.8rem}
.cr-decide{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 .2rem}.cr-decide .button{white-space:normal;height:auto;text-align:center}
.cr-all{margin-top:.6rem;font-size:.85rem}.cr-all summary{cursor:pointer;color:#22344b}
.cr-all-list{margin:.4rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.2rem}.cr-all-list .cr-jump{text-align:left;white-space:normal}.cr-all-list .cr-jump.current{font-weight:600}
@media (prefers-contrast:more){.cr-item{border-color:#5f6975}.cr-item-look span{background:#fff;border:1px solid #5f6975}}

/* ---- P6 revision 63 (UX): while the change review is open ----
   The input area folds away (its contents are kept) and the panel's lower part becomes the one scrolling column, so the
   current item and its decision are never cut off. Repeated status lines are not shown; the request and what changed are.
   「パネルを小さくする」 keeps only the item's name, the switch and the decision, so more of the site is visible. */
#workspace.reviewing .phase-body{display:none}
#workspace.reviewing .action-dock{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-top:0}
#workspace.reviewing .candidate{margin-top:0}
#workspace.reviewing #cand-state,#workspace.reviewing #cand-checked,#workspace.reviewing #cand-scope,#workspace.reviewing #cr-target{display:none}
#workspace.panel-open.reviewing[data-layout=right]{grid-template-columns:minmax(0,1fr) clamp(360px,30vw,440px)}
#workspace.panel-open.reviewing[data-layout=left]{grid-template-columns:clamp(360px,30vw,440px) minmax(0,1fr)}
.cr-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.cr-head .cr-summary{margin:0}
.cr-fold{font-size:.8rem}
.cr-panel.folded .cr-item-what,.cr-panel.folded .cr-item-look,.cr-panel.folded .cr-details,.cr-panel.folded .cr-item-state,.cr-panel.folded #cr-where,.cr-panel.folded .cr-view-tools,
.cr-panel.folded #cr-help-text,.cr-panel.folded #cr-all,.cr-panel.folded #cr-states,.cr-panel.folded #cr-nav{display:none!important}
#workspace.reviewing:has(.cr-panel.folded) #cand-request,#workspace.reviewing:has(.cr-panel.folded) #cand-diff,#workspace.reviewing:has(.cr-panel.folded) #cr-showing,
#workspace.reviewing:has(.cr-panel.folded) .cand-actions .text-button,#workspace.reviewing:has(.cr-panel.folded) #cand-adopt-why,#workspace.reviewing:has(.cr-panel.folded) #cand-title{display:none}
@media(max-width:699px){#workspace.panel-open.reviewing[data-layout=review-sheet]:has(.cr-panel.folded){grid-template-rows:minmax(0,1fr) auto}
  #workspace.reviewing[data-layout=review-sheet]:has(.cr-panel.folded) .inspector{max-height:min(52dvh,30rem)!important}}
/* the decision stays in reach at the foot of the panel's column while reviewing (also with large text) */
#workspace.reviewing .cr-decide{position:sticky;bottom:0;z-index:2;margin:.6rem -10px 0;padding:.55rem 10px calc(.55rem + env(safe-area-inset-bottom));background:#fbfcfd;border-top:1px solid var(--line)}
.cr-next-step{flex-basis:100%;margin:.2rem 0 0;color:#22344b;line-height:1.55}
/* on a wide screen the 変更前／変更後 switch and the count stay at the top of the panel's column while reviewing */
@media(min-width:700px){#workspace.reviewing #cr-bar{position:sticky;top:-10px;z-index:3;margin:0 -10px 2px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--line)}}
/* folded: the way back to the current content waits; on a narrow screen the one-line summary names what is decided */
@media(max-width:699px){.cr-panel.folded #cand-findings{display:none!important}}
#workspace.reviewing:has(.cr-panel.folded) #cr-current{display:none}
/* folded, the little that is left flows in order (the decision is not laid over the summary and 「パネルを広げる」) */
#workspace.reviewing .cr-panel.folded .cr-decide{position:static;margin-top:.4rem;border-top:0;padding-bottom:.2rem}
/* folded, only the switch row and the review stay, so on a narrow screen the panel shrinks to them and the site grows */
#workspace.reviewing:has(.cr-panel.folded) .action-dock > :not(#candidate):not(#error),#workspace.reviewing:has(.cr-panel.folded) #candidate > :not(#cr-bar):not(#cr-panel){display:none!important}
.cr-item-says{margin:0;font-size:.86rem;line-height:1.55;color:#22344b;background:#f6f7f9;border-radius:8px;padding:.45rem .6rem}
.cr-item-says>span{display:block;font-size:.75rem;color:#4b5a6b;margin-bottom:.15rem}.cr-item-says ul{margin:0;padding-left:1.1rem;overflow-wrap:anywhere}.cr-item-says p{margin:.2rem 0 0;font-size:.78rem;color:#4b5a6b}
.cr-interaction,.cr-runtime,.cr-other{border-left:3px solid #6b5bb3}.cr-evidence,.cr-position{border-left:3px solid #8a96a3}

/* ---- P6 revision 65 (Codex review 64, R64-01): the narrow screen while reviewing ----
   Only one strip is fixed (変更前／変更後 and 「サイトを広く見る」); the current notice starts right under it and the decision
   flows after the explanation (not laid over it). 「サイトを広く見る」 leaves only the strip: the site gets the screen. */
.cr-main{display:contents}
.cr-wide-note{color:#3d4d60}
@media(min-width:700px){.cr-wide,.cr-wide-note{display:none!important}}
@media(max-width:699px){
  #workspace.reviewing .inspector-head{display:none}
  #workspace.reviewing #cr-bar{display:contents}
  #workspace.reviewing .cr-main{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;position:sticky;top:-10px;z-index:3;margin:0 -10px .3rem;padding:.4rem 10px;background:#fff;border-bottom:1px solid var(--line)}
  #workspace.reviewing .cr-decide{position:static;margin:.6rem 0 .2rem;padding:0;border-top:0;background:none}
  #workspace.reviewing .cr-fold{display:none}
  #workspace.reviewing:has(.cr-panel.folded) #candidate > :not(#cr-bar),#workspace.reviewing:has(.cr-panel.folded) #cr-bar > :not(.cr-main){display:none!important}
  #workspace.reviewing:has(.cr-panel.folded) .cr-main{margin-bottom:0;border-bottom:0}
  #workspace.reviewing[data-layout=review-sheet]:has(.cr-panel.folded) .inspector{max-height:none!important}
  #workspace.reviewing:has(.cr-panel.folded) .action-dock{overflow:visible}
}

.session-recovery{padding:16px;margin-bottom:16px;border:1px solid #a8bfd8;border-radius:10px;background:#f2f7fc;color:#182a40}.session-recovery[hidden]{display:none}.session-recovery h3{margin:0 0 8px}.session-recovery p{line-height:1.6}.session-recovery-actions{display:flex;flex-wrap:wrap;gap:8px}.session-recovery a:focus-visible,.session-recovery button:focus-visible{outline:3px solid #1266c6;outline-offset:3px}.session-return{max-width:600px;margin:10vh auto;padding:24px}.auth-account-mismatch #canvas-shell,.auth-account-mismatch .action-dock{visibility:hidden}.auth-account-mismatch #compose .phase-body>:not(#session-recovery){display:none}

.session-auth-dialog{width:480px}.session-auth-dialog .auth-surface{border:0;padding:0;box-shadow:none;background:transparent}.session-auth-dialog .ui-field{display:grid;gap:6px;margin:16px 0}.session-auth-dialog .ui-input{width:100%}.session-auth-dialog .auth-actions{display:flex;gap:12px;flex-wrap:wrap}.session-auth-dialog .auth-actions[hidden]{display:none}.session-auth-dialog #submit-action{margin:18px 0}.session-auth-dialog .wide{width:100%}

.selection-navigation{display:flex;gap:4px;align-items:center;flex-wrap:wrap;width:100%;margin:4px 0 8px}.selection-tool{display:inline-flex;border-radius:7px}.selection-nav-button{width:38px;height:38px;min-height:38px;padding:8px;background:#f0f3f7;color:#314b6a;display:flex;align-items:center;justify-content:center}.selection-nav-button:hover:not(:disabled){background:#e1eaf6}.selection-nav-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.selection-tool:focus-visible{outline:3px solid #086ada;outline-offset:2px}.selection-nav-tooltip{width:max-content;position:fixed;z-index:10050;max-width:min(240px,calc(100vw - 16px));padding:9px 12px;background:#24364c;color:#fff;border-radius:8px;font-size:12px;line-height:1.6;box-shadow:0 4px 16px #152a4033;overflow-wrap:anywhere;pointer-events:none}

/* Original CAMVAS artwork; crop display viewport only, never alter source pixels. */
.camvas-brand{display:inline-flex;align-items:center;flex:none;font-weight:700;line-height:1}
.camvas-wordmark{display:block;position:relative;overflow:hidden;width:112px;aspect-ratio:1294 / 230;background:#fff}
.camvas-wordmark-image{position:absolute;max-width:none;width:111.90108%;height:auto;left:-6.18238%;top:-169.56522%}
.camvas-wordmark.camvas-wordmark-fallback{display:flex;align-items:center;justify-content:center;font-size:18px;letter-spacing:.06em}
@media(max-width:480px){.camvas-wordmark{width:94px}}

.identity>.camvas-brand>.camvas-wordmark{margin-left:0;font-size:inherit;color:inherit}