/* Portal Ragnarok V6.5 — surfaces inside the shared fantasy theme.
 * Load after simple-theme.css. Original layout, breakpoints, banner dimensions,
 * semantic status colors, scroll containers and hidden states remain in charge.
 */

/* Account, registration and the description editor. */
.account-bar {
  background: var(--portal-soft);
  border-color: #bacbd0;
  box-shadow: inset 0 1px 0 #fff;
}

.registration-section legend {
  color: var(--portal-blue);
  border-bottom-color: var(--portal-line);
}

.registration-card .actions,
.account-card .account-footnote {
  border-top-color: #dcd2b9;
}

.description-toolbar {
  background: var(--portal-inset);
  border-color: #d5c8a9;
  box-shadow: inset 0 1px 0 #fff;
}

.description-live {
  background: #fff;
  border-color: #c7d2d4;
  box-shadow: inset 0 1px 4px #214f6308;
}

.description-live-label,
.description-color-label {
  color: #506a75;
}

/* Panels and tabular data keep their original scrolling and column sizes. */
.data-table th {
  background: var(--portal-inset);
  color: #46616d;
  border-bottom-color: var(--portal-line);
}

.data-table td {
  border-bottom-color: #e3ddcf;
}

.info-grid {
  background: #fffdf7;
  border-color: #d4c6a6;
}

.info-item {
  border-right-color: #e4ddcd;
  border-bottom-color: #e4ddcd;
}

/* Advertising inventory, order forms and placement diagrams. */
.ad-inventory th {
  background: var(--portal-inset);
  color: #49636f;
  border-bottom-color: var(--portal-line);
}

.ad-inventory td {
  border-bottom-color: #e4ddcd;
}

.ad-inventory tr:hover {
  background: #f8f7ef;
}

.ad-inventory tr:has(input[type="radio"]:checked),
.ad-inventory tr:has(input[type="radio"]:checked):hover {
  background: #eef4f2;
  box-shadow: inset 3px 0 var(--portal-gold);
}

.ad-form-section,
.ad-manage {
  background: var(--portal-ivory);
  border-color: var(--portal-line);
  box-shadow: inset 0 0 0 3px #fffdf5, 0 3px 12px #214f6307;
}

.ad-form-section > h2,
.ad-manage h2 {
  color: var(--portal-blue);
}

.ad-summary {
  background: var(--portal-inset);
  border-color: #d5c7a6;
  box-shadow: inset 0 1px 0 #fff;
}

.ad-summary strong,
.ad-summary-total {
  color: var(--portal-blue);
}

.ad-reservation {
  box-shadow: inset 0 1px 0 #fffdf3;
}

.ad-wireframe {
  background: var(--portal-inset);
  border-color: #cfc5ae;
}

.ad-wireframe-header {
  background: #dce8e8;
  color: #486675;
}

.ad-wireframe-row {
  background: #fffdf8;
  border-color: #d9d5c7;
}

.ad-wireframe-reference {
  background: #eef2ed;
  border-color: #c5cec9;
}

/* TOP - Server: a light ceremonial card and matching interface samples. */
.top-server-page {
  padding: 24px 32px 12px;
  border: 1px solid var(--portal-line);
  border-radius: 6px;
  background: linear-gradient(110deg, #fffef9, #fbf9f2 65%, #fdfbf5);
}
.top-hero { padding-top: 16px; }

.top-plan-card {
  background: linear-gradient(145deg, #fffdf5, #f1f3e9);
  color: var(--portal-text);
  border-color: var(--portal-gold);
  box-shadow: inset 0 0 0 4px #fffdf5, inset 0 0 0 5px #d8c28d,
    0 9px 24px #214f6312;
}

.top-plan-card::before,
.top-plan-card::after {
  border-color: #b69b5e80;
  background: #ddc88b15;
}

.top-plan-mark {
  color: #95702e;
}

.top-plan-card h2,
.top-price {
  color: var(--portal-blue);
}

.top-plan-card p,
.top-plan-card > small {
  color: #506a74;
}

.top-plan-card strong {
  color: #7d5b24;
}

.top-plan-divider {
  background: linear-gradient(90deg, transparent, var(--portal-line), transparent);
}

.top-showcase {
  border-top-color: #d4c7a8;
}

.top-example-label {
  color: #506974;
  background: var(--portal-soft);
  border-bottom-color: #c7d2cf;
}

.top-example--member {
  border-color: var(--portal-gold);
}

.top-example--member .top-example-label {
  background: #f6eed9;
  color: #795a28;
  border-bottom-color: #d8c393;
}

.top-share-heading {
  background: var(--portal-inset);
  color: var(--portal-blue);
  border-bottom-color: #d3c6a6;
}

.top-share-heading > span {
  background: #e8eddf;
  color: #607565;
}

.top-message-preview {
  background: #fff;
  border-color: #bfcccd;
  box-shadow: inset 0 1px 3px #214f6307;
}

.top-network-grid > span {
  background: #fffdf7;
  border-color: #d6ccb5;
  box-shadow: inset 0 1px 0 #fff;
}

.top-art-preview {
  background: var(--portal-inset);
  border-color: #d1c7b1;
}

.top-art-preview > div > span {
  background: #fffdf7;
  border-color: #c6cdbf;
}

.top-art-preview > div > span:first-child {
  background: var(--portal-blue);
  border-color: var(--portal-blue);
  color: #fff;
}

.top-fair-note {
  background: #edf3ef;
  border-left-color: #73908d;
}

/* Checkout: selection remains distinct from payment status and availability. */
.checkout-steps li {
  border-bottom-color: #d4cbb5;
}

.checkout-steps .is-current {
  color: var(--portal-blue);
  border-bottom-color: var(--portal-blue);
}

.checkout-steps .is-done {
  border-bottom-color: #9eafa6;
}

.checkout-note {
  border-color: #daceaf;
  background: #f8f4e8;
}

.checkout-actions {
  border-top-color: #ddd3bb;
}

.checkout-total {
  border-top-color: #d6c7a2;
}

.payment-option {
  background: #fffdf8;
  border-color: #cbc8b7;
  box-shadow: inset 0 1px 0 #fff;
}

.payment-option:hover {
  background: #f5f7ef;
  border-color: #a8bbb7;
}

.payment-option:has(input:checked),
.payment-option.is-selected {
  background: #edf4f1;
  border-color: var(--portal-blue);
  box-shadow: inset 3px 0 var(--portal-blue);
}

.payment-option:has(input:disabled) {
  background: #f1f2ee;
  border-color: #d9dcd2;
  box-shadow: none;
}

.gateway-explanation {
  background: var(--portal-soft);
  border-color: #c8d3cd;
}

/* Statistics: plain chart surfaces and unchanged native scroll wrappers. */
.stats-copy-field textarea.input {
  background: #f8f8f1;
  border-color: #c5cdbf;
}

.stats-summary {
  background: var(--portal-inset);
  border-color: #d2c5a6;
}

.stats-summary > div {
  border-right-color: #dbd1b9;
}

.stats-empty-note {
  background: #f5f6ef;
  border-color: #d2d9cb;
}

.stats-chart-scroll {
  border-color: #d9d6c8;
  background: #fff;
}

.stats-values th,
.stats-history-table th {
  background: var(--portal-inset);
  color: #46636f;
}

.stats-values th,
.stats-values td,
.stats-history-table th,
.stats-history-table td {
  border-color: #e0dccd;
}

.stats-history-table tr:nth-child(even) td {
  background: #fafaf4;
}

/* Sharing: preserve artwork pixels, transparency checkerboard and icon colors. */
.share-destination {
  background: #fffdf8;
  border-color: #d5c9ae;
  color: var(--portal-blue);
  box-shadow: inset 0 1px 0 #fff;
}

.share-destination:hover {
  background: #f2f5ec;
  border-color: #a7b8ac;
}

.share-destination[aria-pressed="true"] {
  background: #edf4f1;
  border-color: var(--portal-blue);
  box-shadow: inset 0 0 0 1px var(--portal-blue);
}

.share-art-choice {
  background: var(--portal-inset);
  border-color: #d3c5a4;
}

.share-art-choice legend {
  color: var(--portal-blue);
}

.share-art-option {
  background: #fffdf8;
  border-color: #c5ccb9;
  color: var(--portal-blue);
}

.share-art-option[aria-pressed="true"] {
  background: var(--portal-blue);
  border-color: var(--portal-blue);
  color: #fff;
}

.share-art-editor,
.share-next-step {
  border-top-color: #d9d0b9;
}

.share-preview-note {
  background: #f4f5ed;
  border-color: #d3d7c7;
}

.share-art-frame {
  border-color: #c4b58e;
}

/* Original mobile layouts still apply; only the inventory surface changes. */
@media (max-width: 700px) {
  .top-server-page { padding: 16px 17px 8px; }
  .ad-inventory tr {
    background: var(--portal-ivory);
    border-color: #cfc2a2;
  }
}

/* The advertising and account flows use their own card classes rather than
   .panel. Give those surfaces the same frame as the rest of the portal. */
.ad-form-section,
.ad-manage {
  position: relative;
  border-color: #a77b3c;
  box-shadow: inset 0 0 0 1px #fff9e4, inset 0 0 0 2px #c39955,
              inset 0 0 0 3px #fdf5dc, 0 2px 5px #1f3b4820;
}
.ad-form-section::before,
.ad-manage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--portal-corner-tl), var(--portal-corner-tr),
                    var(--portal-corner-bl), var(--portal-corner-br);
  background-position: left top, right top, left bottom, right bottom;
  background-size: 30px 30px;
  background-repeat: no-repeat;
}

/* Frame the outside of the lateral creative. Its 120 × 460 content box and
   link stay intact; the decorative layer is never a click target. */
.ad-placement--side > a {
  border-radius: 3px;
  outline: 1px solid #caa353;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #183c4c, 0 0 0 3px #f4dfaa,
              0 0 0 4px #805c2d, 0 4px 10px #203d4b38;
}
.ad-placement--side > a::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 5;
  pointer-events: none;
  background-image: var(--portal-corner-tl), var(--portal-corner-tr),
                    var(--portal-corner-bl), var(--portal-corner-br);
  background-position: left top, right top, left bottom, right bottom;
  background-size: 25px 25px;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  .ad-form-section::before,
  .ad-manage::before { background-size: 24px 24px; }
  /* The mobile inventory is a stack of individual rows, not one card. */
  .ad-inventory-wrap::before { display: none; }
}