/* Shared portal components. Base typography and shell live in prototype-v07.css.
   Loaded before the base theme so its established component refinements win. */

.development-note { display: grid; gap: 7px; padding: 18px 20px; }
.development-note strong { color: #6f4d16; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.empty-state { display: grid; min-height: 190px; padding: 28px; place-items: center; text-align: center; }
.empty-state > div { max-width: 620px; }
.empty-state h2 { margin-bottom: 7px; }
.empty-state p { margin: 0; color: var(--muted); }
.control {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--ink);
}
.control:focus { border-color: #6d9478; box-shadow: 0 0 0 3px rgba(47, 106, 67, .09); }


/* Task bank */
.filters { padding: 18px; }
.filter-group { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.filter-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.filter-group label, .filter-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.checkrow { display: flex; align-items: flex-start; gap: 8px; margin: 7px 0; font-size: 12px; }
.filter-actions { display: flex; gap: 8px; margin-top: 15px; }
.task-list { display: grid; gap: 11px; }
.task-preview { position: relative; padding: 19px 21px 17px; }
.task-preview .origin { color: var(--muted); font-size: 12.5px; }
.task-preview .preview-title { margin: 0; color: var(--forest); font-size: 19px; font-weight: 820; letter-spacing: .015em; }
.task-preview .snippet { margin: 0; font: 17px Georgia, "Times New Roman", serif; }
.task-preview .random-option { margin-top: 4px; color: var(--muted); font-size: 12px; }
.task-preview .actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.task-preview-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px }
.task-editor-icons{display:flex;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;flex:0 0 auto}
.task-editor-icons a{display:grid;width:34px;height:32px;place-items:center;color:var(--forest);font-size:18px;text-decoration:none}
.task-editor-icons a+a{border-left:1px solid var(--line)}.task-editor-icons a.danger{color:var(--red)}
.task-preview .badge.topic{border-color:#c3d8ca;background:#f2f8f4;color:#25543a}
.task-bank-heading { margin-bottom: 16px; }
.task-search-card { margin-bottom: 16px; padding: 18px; }
.task-search-form { display: grid; gap: 8px; }
.task-search-form .row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.task-list-foundation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-list-foundation .task-preview { display: flex; flex-direction: column; }
.task-list-foundation .actions { margin-top: auto; padding-top: 14px; }
.row-only { display: none; }
.task-list.rows { gap: 8px; }
.task-list.rows .task-preview {
  display: grid;
  grid-template-columns: 135px 82px 100px 128px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}
.task-list.rows .row-only { display: block; overflow: hidden; color: #36473d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-list.rows .origin, .task-list.rows .chips, .task-list.rows .random-option { display: none; }
.task-list.rows .preview-title { margin: 0; font-size: 12.5px; }
.task-list.rows .snippet { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.task-list.rows .actions { justify-content: flex-end; margin: 0; }
.card-only { display: block; }
.task-preview-mainline { display: flex; align-items: baseline; gap: 18px; margin-top: 8px; }
.task-preview-mainline > :first-child { flex: 0 0 auto; }
.task-preview-mainline .preview-title { margin: 0; }
.task-preview-mainline .snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-occurrence-code { margin-top: 2px; color: var(--muted); font: 10px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; }
.task-type-full { margin-top: 6px; color: #42544a; font-size: 12px; }
.task-preview .origin a, .task-source-strip a { color: var(--forest2); text-decoration: none; }
.task-preview .origin a:hover, .task-source-strip a:hover { text-decoration: underline; }
.task-list.rows .task-preview { grid-template-columns: 52px 56px minmax(145px,.85fr) minmax(250px,2fr) auto; gap: 10px; }
.task-list.rows .card-only { display: none; }
.task-list.rows .task-preview-mainline { min-width: 0; margin: 0; gap: 10px; }
.task-list.rows .task-preview-mainline > :first-child { min-width: 82px; }
.task-list.rows .task-occurrence-code { display:block;margin:0;font-size:10.5px }
.task-list.rows .actions { flex-wrap: nowrap; }
.task-row-origin a { color: var(--forest2); }

.filters select + select { margin-top: 8px; }
.tree-picker { position: relative; margin-top: 8px; }
.tree-picker > summary { width: 100%; list-style: none; text-align: left; }
.tree-picker > summary::-webkit-details-marker { display: none; }
.tree-picker > summary::after { content: '›'; float: right; transform: rotate(90deg); }
.tree-picker[open] > summary::after { transform: rotate(-90deg); }
.tree-picker-panel { max-height: 360px; margin-top: 7px; padding: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.selector-tree { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.selector-tree .selector-tree { margin: 3px 0 3px 18px; }
.selector-tree-row { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.selector-tree-row label { display: flex; gap: 5px; margin: 0; font-size: 11.5px; font-weight: 500; cursor: pointer; }
.selector-tree-row input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--forest); }
.tree-toggle, .tree-spacer { width: 18px; height: 18px; flex: 0 0 18px; }
.tree-toggle { padding: 0; border: 0; background: transparent; color: var(--forest); cursor: pointer; }
.tree-toggle.open { transform: rotate(90deg); }
.tree-selected-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tree-selected-tag { cursor: pointer; }
.tree-filter-group{position:relative}
.selector-launch-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;color:#354b40;font-size:12px;font-weight:750}
.selector-add{display:grid;width:27px;height:27px;padding:0;place-items:center;border:1px solid #b9cabf;border-radius:50%;background:#fff;color:var(--forest);font-size:18px;line-height:1;cursor:pointer}
.classification-selector{position:absolute;top:25px;left:calc(100% + 14px);z-index:50;width:min(530px,calc(100vw - 365px));max-height:min(660px,80vh);overflow:hidden;border:1px solid #b9c9bf;border-radius:15px;background:#fff;box-shadow:0 20px 55px rgba(15,43,27,.22)}
.classification-selector-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}.classification-selector-head .registration-close{position:static}
.selector-tabs{display:flex;gap:4px;padding:0 14px 10px;overflow:auto;border-bottom:1px solid var(--line)}
.selector-tabs button{padding:7px 8px;border:0;border-radius:8px;background:transparent;color:#53645a;font-size:11px;cursor:pointer}.selector-tabs button.active{background:var(--forest);color:#fff;font-weight:800}
.selector-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;padding:12px 14px 8px}.selector-tools .control{padding:7px 9px}
.selector-panel{display:none;max-height:390px;padding:7px 14px 14px;overflow:auto}.selector-panel.active{display:block}
.selector-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);background:#f8faf8}
.classification-system-picker { padding: 7px 0; border-bottom: 1px solid #edf0ee; }
.classification-system-picker:last-child { border-bottom: 0; }
.classification-system-picker > summary { cursor: pointer; font-size: 11.5px; }
.classification-system-picker > .selector-tree { margin-top: 8px; }
.range-number-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.range-number-row label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; font-weight: 500; }
.range-number-row .control { min-width: 0; padding: 7px; }
.age-tick-labels { display: flex; justify-content: space-between; margin: 10px 2px -5px; color: var(--muted); font-size: 9.5px; }
.dual-range-track { position: relative; height: 28px; margin: 7px 4px 0; }
.dual-range-track::before { content: ''; position: absolute; top: 12px; right: 0; left: 0; height: 4px; border-radius: 9px; background: #dfe8e2; }
.dual-range-track::after { content:'';position:absolute;z-index:1;top:11px;left:var(--range-low-pct,0%);right:calc(100% - var(--range-high-pct,100%));height:6px;border-radius:9px;background:#17251d }
.dual-range-track input[type='range'] { position: absolute;z-index:2; width: 100%; height: 28px; margin: 0; background: transparent; pointer-events: none; appearance: none; }
.dual-range-track input[type='range']::-webkit-slider-thumb { width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 1px var(--forest); pointer-events: auto; appearance: none; }
.range-explanation { text-align: center; }
.rank-range-layout { display: grid; grid-template-columns: 48px 1fr; gap: 9px; align-items: stretch; min-height: 132px; }
.rank-sliders { position: relative; width: 48px; }
.rank-sliders::before { content: ''; position: absolute; top: 7px; bottom: 7px; left: 50%; width: 4px; border-radius: 8px; background: #dfe8e2; transform: translateX(-50%); }
.rank-sliders::after{content:'';position:absolute;z-index:1;left:50%;top:var(--range-top-pct,7px);bottom:var(--range-bottom-pct,7px);width:6px;border-radius:8px;background:#17251d;transform:translateX(-50%)}
.rank-sliders input { position: absolute;z-index:2; top: 0; left: 50%; width: 22px; height: 132px; margin: 0; background: transparent; writing-mode: vertical-lr; direction: rtl; pointer-events: none; appearance: none; transform: translateX(-50%); }
.rank-sliders input::-webkit-slider-runnable-track { width: 4px; border: 0; background: transparent; }
.rank-sliders input::-webkit-slider-thumb { width: 16px; height: 16px; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 1px var(--forest); pointer-events: auto; appearance: none; }
.rank-sliders input::-moz-range-track { width: 4px; border: 0; background: transparent; }
.rank-sliders input::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 1px var(--forest); pointer-events: auto; }
.rank-labels { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; color: #4f6056; font-size: 10.5px; }
.view-switch { display: flex; gap: 5px; padding: 4px; border: 1px solid #d9e1dc; border-radius: 11px; background: #edf1ee; }
.view-switch button { padding: 8px 11px; border: 0; border-radius: 8px; background: transparent; color: #59675f; cursor: pointer; }
.view-switch button.active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); color: var(--forest); font-weight: 750; }
.task-bank-toolbar{justify-self:end;width:max-content;max-width:100%;gap:12px;padding:8px 10px;border-radius:13px}
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; padding-top: 6px; }
.pagination a, .pagination span { min-width: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: center; }
.pagination .current { border-color: var(--forest3); background: var(--greenwash); color: var(--forest); font-weight: 800; }

.topic-tree-browser{margin-top:16px;padding:0;overflow:hidden}.topic-browser-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,340px);gap:16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);background:#f8faf8}.topic-browser-tabs{padding:0;border:0}.topic-tree-search .control{padding:8px 10px}.topic-tree-panel{display:none;padding:20px}.topic-tree-panel.active{display:block}.topic-navigation-tree{gap:6px}.topic-navigation-tree .selector-tree{margin:7px 0 2px 24px}.topic-tree-row{align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fbfcfb}.topic-tree-row>a{display:grid;min-width:0;color:var(--ink);text-decoration:none}.topic-tree-row>a:hover strong{color:var(--forest3);text-decoration:underline}.topic-tree-row small{margin-top:2px;color:var(--muted);font-size:10px}.topic-admin-actions{display:flex;gap:4px;margin-left:auto}.topic-admin-actions a{display:grid;width:26px;height:26px;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--forest);text-decoration:none}


/* Packages, competitions, topics and search */
.package-grid, .competition-grid, .search-results { display: grid; gap: 14px; }
.package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.competition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.package-card, .competition-card, .source-card {
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: inherit;
}
.package-card:hover, .competition-card:hover, .source-card:hover { border-color: #a9bbae; text-decoration: none; }
.package-card h2, .package-card h3, .competition-card h2, .competition-card h3 { margin: 10px 0 7px; }
.package-card p, .competition-card p { margin: 4px 0; }
.timeline { display: grid; gap: 10px; }
.timeline-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf0ee; }
.timeline-item:last-child { border-bottom: 0; }
.usage { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.usage + .usage { margin-top: 8px; }
.hierarchy-block { padding: 22px 24px; }
.hierarchy-block + .hierarchy-block { margin-top: 14px; }
.part-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.task-link-list { display: grid; gap: 8px; margin-top: 10px; }
.task-link-list a { display: grid; grid-template-columns: 80px 140px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; color: inherit; }
.task-link-list a:hover { border-color: #a9bbae; background: var(--greenwash); text-decoration: none; }
.topic-system-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-system-tabs a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #59675f; }
.topic-system-tabs a.active { border-color: #cddfd2; background: var(--greenwash); color: var(--forest); font-weight: 750; }
.topic-list { display: grid; gap: 8px; margin-top: 14px; }
.topic-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.topic-card strong { display: block; color: var(--forest2); }
.topic-card small { color: var(--muted); }
.search-summary { margin: 0; color: var(--muted); }
.search-result-card { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: inherit; }
.search-result-card:hover { border-color: #a9bbae; background: #fbfcfb; text-decoration: none; }
.search-result-card h2, .search-result-card h3 { margin: 6px 0; }
.search-result-card p { margin: 0; color: #526159; }
.historical-section{margin:12px 0;padding:16px;border:1px solid var(--line);border-radius:13px;background:#fbfcfb}.historical-section h3{margin:3px 0}.section-children{margin:12px 0 0 18px;padding-left:14px;border-left:2px solid #dce7df}
.classification-summary{display:grid;gap:9px}.classification-summary>div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 8px;padding-bottom:8px;border-bottom:1px solid #edf0ed}.classification-summary>div>strong{grid-row:1/3;color:var(--forest2)}.classification-summary>div>span{color:var(--muted);font-size:11px}.classification-summary .chips{grid-column:2}
.task-filter-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end; }


/* Component layouts at narrower widths. */
@media (max-width:1200px){
  .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-list.rows .row-hide-mid{display:none}
}
@media (max-width:980px){
  .task-list-foundation{grid-template-columns:1fr}
  .task-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .package-grid,.competition-grid{grid-template-columns:1fr}
  .task-search-form .row,.timeline-item,.task-link-list a,.task-filter-grid{grid-template-columns:1fr}
  .topic-browser-head{grid-template-columns:1fr}
}
@media (max-width:900px){
  .classification-selector{position:fixed;inset:90px 12px auto;width:auto;max-height:calc(100vh - 110px)}
  .selector-panel{max-height:calc(100vh - 285px)}
}