.yaa-article-actions{direction:rtl;margin:1.75rem 0;padding:1rem 1.1rem 1.05rem;background:linear-gradient(135deg,#fbfaf8,#f4f1eb);border:1px solid rgba(30,30,30,.1);border-radius:12px;box-shadow:0 1px 3px rgba(30,30,30,.05)}.yaa-article-actions--end{margin-top:2.5rem}.yaa-aa-heading{display:flex;align-items:center;gap:.7rem;margin:0 0 .8rem;color:var(--wp--preset--color--placeholder-secondary,#6b6b6b);font-size:.78rem;font-weight:700;letter-spacing:.02em}.yaa-aa-heading i{height:1px;flex:1;background:linear-gradient(90deg,rgba(216,154,58,.7),transparent)}.yaa-aa-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}.yaa-aa-action{margin:0;padding:0}.yaa-aa-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .72rem;color:var(--wp--preset--color--placeholder-foreground,#1e1e1e);background:rgba(255,255,255,.78);border:1px solid rgba(30,30,30,.12);border-radius:8px;font:inherit;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,transform 150ms ease}.yaa-aa-button:hover{background:#fff;border-color:rgba(216,154,58,.75);transform:translateY(-1px)}.yaa-aa-button:focus-visible{outline:2px solid var(--wp--preset--color--placeholder-primary,#3b3b3b);outline-offset:2px}.yaa-aa-icon{flex:0 0 auto}.yaa-aa-status{min-height:1.3em;margin:.6rem 0 0;color:var(--wp--preset--color--placeholder-secondary,#6b6b6b);font-size:.82rem}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media(max-width:480px){.yaa-article-actions{padding:.9rem}.yaa-aa-actions{gap:.4rem}.yaa-aa-action{display:flex;flex:1 1 calc(50% - .4rem)}.yaa-aa-button{flex:1;padding:.55rem .5rem}.yaa-aa-heading{margin-bottom:.7rem}}@media(prefers-reduced-motion:reduce){.yaa-aa-button{transition:none}.yaa-aa-button:hover{transform:none}}

/*
 * The flex-basis:50% approach above (max-width:480px block) never
 * actually produced two columns in testing on a real page — every
 * action item rendered at the full container width regardless, turning
 * an 8-button share list into 8 stacked full-width rows and a long dead
 * stretch of page. Verified live that a plain two-column grid renders
 * correctly, so replacing the fragile nested-flex sizing with that
 * instead of chasing the exact flex/min-content interaction at fault.
 */
@media (max-width: 480px) {
	.yaa-aa-actions {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.4rem;
	}
	.yaa-aa-action {
		display: block;
		width: auto;
	}
	.yaa-aa-button {
		width: 100%;
		box-sizing: border-box;
		flex: none;
	}
}