.herb-overlay { position:absolute; inset:0; display:grid; place-items:center; background:#050704dd; z-index:2100; }
.herb-overlay[hidden],.herb-dialog-mask[hidden] { display:none; }
.herb-panel { position:relative; width:432px; height:768px; box-sizing:border-box; padding:16px; display:flex; flex-direction:column; gap:12px; overflow:hidden; background:#13170e; color:#d6c89b; border:1px solid #80652b; border-radius:12px; font-size:14px; }
.herb-panel header { display:flex; align-items:center; gap:6px; flex:none; }
.herb-panel h2 { margin:0 auto 0 0; font-size:21px; color:#d5aa4e; }
.herb-panel h3 { color:#d5aa4e; font-size:17px; margin:12px 0; }
.herb-panel p { line-height:1.7; margin:4px 0; }
.herb-panel button { font:inherit; min-width:0; border:1px solid #80652b; background:#332b17; color:#dfbd70; border-radius:7px; padding:8px; cursor:pointer; }
.herb-panel button:disabled { opacity:.4; cursor:default; }
.herb-panel button:focus-visible { outline:2px solid #e1c576; outline-offset:2px; }
.herb-panel [aria-selected="true"],.herb-panel [aria-pressed="true"] { background:#695023; }
.herb-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; flex:none; }
.herb-tabs button { padding:10px 3px; }

.herb-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; overscroll-behavior:contain; }
.herb-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.herb-panel .herb-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:122px; gap:7px; padding:5px 2px; background:#1d2116; }
.herb-card strong { font-size:15px; line-height:1.5; overflow-wrap:anywhere; }.herb-card small { font-size:13px; line-height:1.5; }
.herb-panel .herb-card[hidden] { display:none; }
.herb-panel .herb-card.is-mine { box-shadow:inset 0 0 0 2px #c7b778; background:#30351e; }
.herb-hint { font-size:13px; padding-bottom:8px; }.herb-gate { color:#c7b778; }
.herb-icon { font-size:32px; line-height:1; }.herb-card.orange { border-color:#d88e35;color:#eab56b; }.herb-card.purple { border-color:#8d63bd;color:#c09bdf; }.herb-card.blue { border-color:#527fa7;color:#8dbbde; }.herb-card.green { border-color:#5c8747;color:#a1c282; }
.herb-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 14px; }
.herb-row { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:13px 2px; border-bottom:1px solid #544624; overflow-wrap:anywhere; }
.herb-row small { display:block; margin-top:5px; color:#aba17e; }.herb-row button { flex:none; }
.herb-empty { text-align:center; padding:30px 8px; color:#aaa080; }
.herb-dialog-mask { position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:#050704df; }
.herb-dialog { position:relative; box-sizing:border-box; width:100%; max-height:680px; display:flex; flex-direction:column; padding:20px; background:#171b10; border:1px solid #947734; border-radius:10px; }
.herb-panel .herb-dialog-close { position:absolute; right:8px; top:8px; width:28px; height:28px; padding:0; font-size:20px; }
.herb-dialog h3 { padding-right:20px; }
.herb-dialog-content { overflow-y:auto; min-height:0; overflow-wrap:anywhere; }.herb-dialog-actions { display:flex; justify-content:center; gap:12px; margin-top:18px; flex:none; }


/* Stage 5.2: normal canvas pages; no second overlay scale. */
.timed-activities-page { height:100%; min-height:0; grid-template-rows:auto auto minmax(0,1fr); align-content:stretch; }
.timed-activities-page [data-timed-status] { margin:0; color:#cbb579; }
.timed-activity-list { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.timed-activity-card { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:center; border:1px solid #665329; border-radius:10px; padding:18px; background:#191b12; }
.timed-activity-card h3 { margin:0 0 12px; color:#d5aa4e; }
.timed-activity-card p { grid-column:1; margin:0; color:#cbb579; }
.timed-activity-card > button { grid-column:2; grid-row:1 / 3; }
.herb-page { position:relative; height:100%; min-height:0; }
.herb-page .herb-overlay { position:absolute; inset:0; display:block; background:none; }
.herb-page .herb-overlay[hidden] { display:none; }
.herb-page .herb-panel { width:100%; height:100%; }
.timed-activities-page,.herb-page { grid-row:1 / -1; height:auto; align-self:stretch; overflow:hidden; }
.timed-activities-page .feature-page-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.timed-activities-page .feature-page-header h2 { margin:0; }
/* Stage 5.3 internal presentation. */

.herb-panel header h2 { margin:0 auto 0 0; }
.herb-dialog { text-align:center; max-height:90%; }
.herb-dialog h3 { padding:0; }
.herb-dialog--point { height:300px; justify-content:center; }
.herb-dialog--point .herb-dialog-content { flex:1; display:flex; flex-direction:column; justify-content:center; }
.herb-dialog-actions button { min-width:86px; }
.herb-task-frame { border:1px solid #665329; border-radius:8px; padding:16px; margin-bottom:16px; }
.herb-task-frame header { justify-content:space-between; }
.herb-task-frame .herb-row:last-child { border-bottom:0; }
.herb-task-actions { display:flex; flex-direction:column; align-items:center; gap:14px; }
.herb-task-actions button { width:130px; }
.herb-task-actions progress { width:100%; accent-color:#bd9947; }
.herb-rank-tabs { display:flex; justify-content:center; gap:10px; margin-bottom:12px; }
.herb-rank-tabs button { min-width:80px; }
.herb-body--rank { display:flex; flex-direction:column; overflow:hidden; }
.herb-rank-table { border:1px solid #665329; border-radius:8px; min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
.herb-rank-scroll { min-height:0; flex:1; overflow-y:auto; }
.herb-rank-row { display:grid; grid-template-columns:54px minmax(0,1fr) 54px 74px; gap:4px; text-align:center; padding:12px 5px; border-bottom:1px solid #423a23; overflow-wrap:anywhere; }
.herb-rank-head,.herb-rank-mine { background:#302c1a; flex:none; }
.herb-shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.herb-shop-grid .shop-product-tile { border:0; background:transparent; padding:5px; }
.herb-shop-grid .shop-product-tile__art { width:100%; aspect-ratio:1; height:auto; box-sizing:border-box; }
.herb-dialog--product .shop-product-tile__art { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 12px; }
.herb-dialog--product img { max-width:100%; max-height:100%; }
.herb-dialog--reports { height:480px; text-align:left; }
.herb-dialog--reports .herb-dialog-content { display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; }
.herb-report-stream { overflow-y:auto; min-height:0; flex:1; }
.herb-report-stream p { border-bottom:1px solid #332f22; padding:8px 0; }
.herb-shop-grid .shop-product-tile__name { font-size:15px; line-height:1.5; }
.herb-shop-grid .shop-product-tile__art { font-size:26px; }