/* Quote collage: picking sentences in the reader, the editor, and the works list. */

/* Reader */
.reader-bottom.has-clip{display:flex;align-items:center;gap:10px}
.reader-bottom.has-clip>.secondary{margin:0}
.reader-bottom.has-clip>.reader-clip{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;width:auto}
.reader-clip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.clip-text .clip-sentence{padding:.05em 0;border-radius:2px;cursor:pointer;text-decoration:underline dotted #0d153047;text-decoration-thickness:1.5px;text-underline-offset:.32em;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .15s;-webkit-tap-highlight-color:transparent}
.clip-text .clip-sentence:hover{background-color:var(--mist,#f2f5fa)}
.clip-text .clip-sentence[aria-pressed=true]{text-decoration-color:transparent;background:linear-gradient(transparent 52%,#f2a23a73 52%,#f2a23a73 92%,transparent 92%)}
.clip-text .clip-sentence:focus-visible{outline:2px solid var(--sky,#2b5cff);outline-offset:2px}
.reader.is-clipping .reader-tabs,.reader.is-clipping .reader-source,.reader.is-clipping .reader-version-note{visibility:hidden}
.reader-bottom .clip-bar{display:flex;align-items:center;gap:10px;width:100%;max-width:760px;margin:0 auto}
.clip-count{flex:1;min-width:0;margin:0;font-size:13px;color:var(--ink-2,#38425c)}
.clip-bar button{min-height:46px;padding:0 18px;border-radius:14px;flex:none}
.clip-hint{margin:8px auto 0;max-width:760px;font-size:11.5px;line-height:1.6;color:var(--ink-4,#8a93a8);text-align:center}
.reader-bottom:has(.clip-bar){display:block}
@media(max-width:759px){
  .reader-bottom.has-clip{max-width:760px;margin:0 auto}
  .reader-bottom.has-clip>.secondary:not(.reader-clip){flex:1;width:auto}
  .reader-bottom.has-clip>.reader-clip{min-height:50px;padding:0 18px;border-radius:15px;background:#fff}
}
@media(min-width:760px){.reader-bottom.has-clip>.reader-clip{min-height:36px;padding:7px 14px;font-size:12px}}

/* Editor: full screen on phones, a large panel on desktop. */
dialog#collage-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border-radius:0;background:#eef1f6;overflow:hidden;color:var(--ink,#0d1530)}
dialog#collage-dialog[open]{display:flex;flex-direction:column}
dialog#collage-dialog::before{display:none}
@media(min-width:760px){dialog#collage-dialog{inset:0;margin:auto;width:min(1180px,calc(100% - 48px));height:min(880px,calc(100svh - 48px));border-radius:24px;box-shadow:var(--lift)}}
.collage-bar{display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:#fff;box-shadow:0 .5px 0 var(--line,#e3e8f0);position:relative;z-index:2}
.collage-bar .back-button{margin:0;font-size:15px;min-height:44px;color:var(--ink-2,#38425c)}
#collage-title:focus,#sound-title:focus{outline:none}
.collage-heading{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:8px}
.collage-heading h2{margin:0;font:500 17px var(--serif)}
.collage-status{font-size:12px;color:var(--ink-3,#626c85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#collage-save{min-height:40px;padding:0 16px;border-radius:12px;font-size:14px;white-space:nowrap}
#collage-save:disabled{opacity:.45}
.collage-layout{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.collage-stage{position:sticky;top:0;z-index:1;margin:0;padding:18px 16px 16px;display:grid;justify-items:center;gap:10px;background:radial-gradient(ellipse 80% 120% at 50% 0%,#f7f8fb,#eef1f6 70%)}
.collage-paper{line-height:0;border-radius:3px;overflow:hidden;box-shadow:0 0 0 .5px #0d15301f,0 2px 4px #0d153012,0 28px 48px -30px #0d153085;transition:transform .3s}
#collage-canvas{display:block;height:min(40svh,500px);width:auto;max-width:calc(100vw - 32px)}
.collage-warning{max-width:440px;margin:0;padding:10px 14px;border-radius:12px;background:var(--sun-wash,#fff4e1);color:var(--sun-ink,#985606);font-size:13px;line-height:1.6;text-align:center}
.collage-panel{display:grid;align-content:start;gap:24px;padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px));background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -.5px 0 var(--line,#e3e8f0);position:relative;z-index:1;min-height:60%}
@media(min-width:760px){
  .collage-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,410px);overflow:hidden}
  .collage-stage{position:static;align-content:center;padding:32px;overflow:auto}
  #collage-canvas{height:min(calc(100svh - 240px),660px);max-width:100%}
  .collage-stage[data-ratio=square] #collage-canvas{height:min(calc(100svh - 300px),560px)}
  .collage-panel{overflow:auto;border-radius:0;box-shadow:-.5px 0 0 var(--line,#e3e8f0);padding:24px 24px 28px;min-height:0}
}
.collage-section h3{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-3,#626c85)}
.collage-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#collage-count{font-size:12px;color:var(--ink-4,#8a93a8);font-variant-numeric:tabular-nums}
.collage-empty{margin:0;padding:18px 16px;border-radius:14px;background:var(--mist,#f2f5fa);font-size:13px;line-height:1.7;color:var(--ink-3,#626c85)}
.collage-fragments{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.collage-fragment{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:4px 10px;padding:12px 8px 8px 12px;border-radius:16px;background:var(--mist,#f2f5fa);transition:box-shadow .15s,opacity .15s}
.collage-fragment.is-dragging{opacity:.45}
.collage-fragment.is-drop-target{box-shadow:0 -3px 0 var(--sky,#2b5cff)}
.collage-fragment.is-editing{background:#fff;box-shadow:0 0 0 1px var(--line-2,#ccd4e1)}
.fragment-index{padding-top:4px;font:400 13px var(--serif);color:var(--ink-4,#8a93a8)}
.fragment-body{min-width:0}
.fragment-text{margin:0;font:400 15.5px/1.75 var(--serif);color:var(--ink-text,#1c2440);white-space:pre-wrap;overflow-wrap:anywhere}
.fragment-break{display:inline-block;width:2px;height:.95em;margin:0 3px 0 2px;border-radius:1px;background:var(--sky,#2b5cff);vertical-align:-.12em}
.fragment-source{display:block;margin:2px 0 0;padding:4px 0;min-height:28px;border:0;background:none;text-align:left;font-size:11.5px;line-height:1.5;color:var(--ink-3,#626c85);cursor:pointer}
.fragment-source:disabled{cursor:default}
.fragment-state{display:block;color:var(--sun-ink,#985606)}
.fragment-tools{display:flex;align-items:center;gap:0}
.fragment-tool{position:relative;display:grid;place-items:center;min-width:34px;height:34px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink-2,#38425c);cursor:pointer}
.fragment-tool::before{content:'';position:absolute;inset:-5px 0}
.fragment-tool:hover:not(:disabled){background:#fff}
.fragment-tool:disabled{opacity:.28;cursor:default}
.fragment-tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fragment-breaks{padding:0 8px;font-size:12px}
.fragment-breaks[aria-expanded=true]{background:var(--ink,#0d1530)!important;color:#fff}
.break-editor{grid-column:1/-1;margin-top:6px;padding-top:10px;border-top:.5px solid var(--line,#e3e8f0)}
.break-help{margin:0 0 8px;font-size:12px;color:var(--ink-3,#626c85)}
.break-cells{display:flex;flex-wrap:wrap;gap:2px 0;font:400 18px/1 var(--serif);color:var(--ink-text,#1c2440)}
.break-cell{display:grid;place-items:center;min-width:26px;height:40px;margin:0;padding:0 1px;border:0;border-radius:7px;background:none;font:inherit;color:inherit}
button.break-cell{cursor:pointer}
button.break-cell:hover{background:var(--mist,#f2f5fa)}
.break-cell.is-break{box-shadow:inset 3px 0 0 var(--sky,#2b5cff);background:#2b5cff12}
.break-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 14px;margin-top:10px}
.break-actions .text-button{min-height:36px;font-size:13px}
.break-actions .secondary{min-height:36px;padding:0 16px;border-radius:10px;font-size:13px}
.collage-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.collage-formats button{display:grid;justify-items:center;gap:7px;padding:0;border:0;background:none;font-size:12px;color:var(--ink-2,#38425c);cursor:pointer}
.format-swatch{display:grid;place-content:center;gap:5px;width:100%;height:92px;border-radius:10px;font:400 13px/1.2 var(--serif);box-shadow:0 0 0 .5px var(--hair,#0d153029);transition:box-shadow .15s,transform .15s}
.format-swatch i{font-style:normal}
.format-swatch.verse{background:#fbf8f1;color:#1c2440;text-align:center}
.format-swatch.clipping{background:#e7ebf1;color:#0d1530;font-weight:500}
.format-swatch.clipping i{padding:3px 7px;background:#fffdf8;box-shadow:0 2px 5px #0d153024;transform:rotate(-2deg)}
.format-swatch.clipping i+i{transform:rotate(1.6deg) translateX(6px)}
.format-swatch.night{background:linear-gradient(#18213f,#0b1129);color:#f3ede0;font-weight:300;justify-items:start;padding-left:18%}
.collage-formats [aria-checked=true] .format-swatch{box-shadow:0 0 0 2px var(--ink,#0d1530),0 10px 20px -14px #0d153080;transform:translateY(-1px)}
.collage-formats [aria-checked=true]>span:last-child{color:var(--ink,#0d1530);font-weight:600}
.collage-formats button:focus-visible{outline:none}
.collage-formats button:focus-visible .format-swatch{outline:2px solid var(--sky,#2b5cff);outline-offset:3px}
.collage-options{display:grid}
.collage-option-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;border-bottom:.5px solid var(--line,#e3e8f0)}
.collage-option-label{font-size:14px;color:var(--ink-2,#38425c)}
.collage-segmented{display:flex;padding:2px;border-radius:11px;background:var(--mist,#f2f5fa)}
.collage-segmented button{min-height:36px;padding:0 16px;border:0;border-radius:9px;background:none;font-size:13px;color:var(--ink-3,#626c85);cursor:pointer}
.collage-segmented [aria-pressed=true]{background:#fff;color:var(--ink,#0d1530);font-weight:600;box-shadow:0 1px 2px #0d15301f}
.collage-switch input{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;width:46px;height:28px;min-height:0;min-width:0;padding:0;border:0;margin:0;border-radius:14px;background:var(--line-2,#ccd4e1);cursor:pointer;transition:background .2s;flex:none}
.collage-switch input::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0d153040;transition:transform .2s}
.collage-switch input:checked{background:var(--ink,#0d1530)}
.collage-switch input:checked::after{transform:translateX(18px)}
.collage-switch input:focus-visible{outline:2px solid var(--sky,#2b5cff);outline-offset:2px}
.collage-name{display:grid;gap:8px;padding-top:14px}
.collage-name input{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--mist,#f2f5fa);font:16px var(--serif);color:var(--ink,#0d1530)}
.collage-actions{display:flex;align-items:center;gap:12px}
#collage-export{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:15px;font-size:15px}
#collage-export svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#collage-export:disabled{opacity:.45}
.collage-more{position:relative}
.collage-more>summary{min-height:44px;display:flex;align-items:center;padding:0 6px;list-style:none;cursor:pointer;font-size:14px}
.collage-more>summary::-webkit-details-marker{display:none}
.collage-more .menu-panel{position:absolute;right:0;bottom:calc(100% + 6px);top:auto;left:auto;z-index:3;display:grid;min-width:180px;background:#fff}
.collage-more .menu-panel button{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;text-align:left;font-size:14px;color:var(--ink,#0d1530);cursor:pointer}
.collage-more .menu-panel button:hover{background:var(--mist,#f2f5fa)}
.collage-more .menu-panel .danger{color:var(--danger,#c93a25)}
.collage-privacy{margin:-8px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-4,#8a93a8)}

/* Works in 回看 */
.read-workspace.is-works #archive-calendar,.read-workspace.is-works #archive-calendar-heading,.read-workspace.is-works .search-box,.read-workspace.is-works #active-date-filter{display:none}
.work-draft-card{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 16px;padding:14px 16px;border:0;border-radius:16px;background:var(--sun-wash,#fff4e1);color:var(--sun-ink,#985606);text-align:left;font-size:13px;cursor:pointer}
.work-draft-card>span:nth-child(2){flex:1;min-width:0}
.work-draft-card strong{display:block;font:500 15px var(--serif);color:var(--ink,#0d1530)}
.work-draft-card small{font-size:12px}
.work-draft-mark{flex:none;width:9px;height:9px;border-radius:50%;background:var(--sun,#f2a23a)}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-items:start;padding:4px 0 20px}
.works-grid:empty{display:none}
.work-card{display:grid;gap:9px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;min-width:0}
.work-thumb{display:block;width:100%;height:auto;border-radius:4px;background:var(--mist,#f2f5fa);box-shadow:0 0 0 .5px #0d15301f,0 16px 26px -20px #0d153080;transition:transform .2s}
.work-card:hover .work-thumb{transform:translateY(-2px)}
.work-card.is-unavailable .work-thumb{aspect-ratio:4/5}
.work-meta{display:grid;gap:2px;min-width:0}
.work-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px var(--serif);color:var(--ink,#0d1530)}
.work-meta small{font-size:11.5px;color:var(--ink-3,#626c85);font-variant-numeric:tabular-nums}
.works-empty{padding:48px 12px;text-align:center;color:var(--ink-3,#626c85)}
.works-empty p{margin:0 0 6px}
.works-empty p:first-child{font:400 17px var(--serif);color:var(--ink-2,#38425c)}
.works-trash{margin-top:4px;font-size:13px;color:var(--ink-3,#626c85)}
.works-trash summary{display:flex;align-items:center;min-height:44px;cursor:pointer}
.works-trash-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:.5px solid var(--line,#e3e8f0)}
.works-trash-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--serif);color:var(--ink-2,#38425c)}
.works-trash-row .secondary{flex:none;min-height:36px;padding:0 14px;border-radius:10px;font-size:13px}
@media(prefers-reduced-motion:reduce){.work-thumb,.format-swatch,.collage-paper{transition:none}}
/* The 作品 tab makes the archive toolbar too wide for 320px screens: let the month switcher wrap. */
@media(max-width:359px){.archive-toolbar{flex-wrap:wrap;row-gap:2px}.archive-toolbar .calendar-heading{margin-left:auto}}
/* Narrow phones: tools get their own row so the quote keeps a readable measure. */
@media(max-width:400px){
  .collage-fragment{grid-template-columns:18px minmax(0,1fr);row-gap:2px}
  .fragment-tools{grid-column:2;justify-content:flex-end;margin:-4px -4px 0 0}
}
@media(max-width:759px){.collage-heading{flex-direction:column;align-items:center;gap:1px}.collage-status{font-size:11px;max-width:100%}}